Скачать или смотреть How to Compare Two Arrays in JavaScript and Create a New Array Based on Differences

Learn how to efficiently compare two arrays in JavaScript and generate a new array that includes matched elements and fills in any missing items with defaults.
---
This video is based on the question https://stackoverflow.com/q/68401092/ asked by the user 'Joey' ( https://stackoverflow.com/u/1756998/ ) and on the answer https://stackoverflow.com/a/68401744/ provided by the user 'Claytronicon' ( https://stackoverflow.com/u/2933113/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Comparing one array to another and create a new array based on the differences

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Compare Two Arrays in JavaScript and Create a New Array Based on Differences

When working with arrays in JavaScript, it’s not uncommon to encounter scenarios where you need to compare two arrays and create a new array based on specific criteria. A common challenge is ensuring that you have a comprehensive list that includes items from both arrays, while also taking care of missing data. In this guide, we will walk through a practical example to address this problem step-by-step.

The Problem

Suppose we have two arrays: salesDates, which lists dates for sales, and jsonSalesData, which contains sales data for some of those dates. Here are our arrays:

[[See Video to Reveal this Text or Code Snippet]]

What We Need

Match Sales Data: We want to return objects from jsonSalesData if their date matches with the salesDates array.

Fill Missing Data: If there is a date in salesDates that isn't in jsonSalesData, we need to add an object for that date with sales set to 0.

Desired Output

Given what we have, the output should look like this:

[[See Video to Reveal this Text or Code Snippet]]

The Solution

Now, let’s dive into how we can achieve this with JavaScript.

Step 1: Use map to Iterate Over salesDates

We can utilize the map function in JavaScript to iterate over salesDates. For each date, we will look for a corresponding entry in jsonSalesData.

Step 2: Find the Corresponding Entry

We use the find method to check if the date exists in jsonSalesData. If it does, we take that entry; if not, we create a new object with sales equal to 0.

Here’s how the code looks:

[[See Video to Reveal this Text or Code Snippet]]

Explanation of the Code

salesDates.map(...): This iterates over each date in the salesDates array.

find(item => item.date === date): This searches for an object in jsonSalesData where the date matches the current date.

|| { date, company: 'ABC', sales: '0' }: If no match is found, we create a new object with the corresponding date, setting sales to 0 and specifying a company.

Conclusion

By using the above approach, we can efficiently manage our data and ensure that our output meets the required specifications. This technique is not only useful for sales data, but can be adapted for various applications where array comparisons and data completion are needed. So next time you face a similar situation, remember this method for combining arrays in JavaScript!