如何遍历两个 arrays 对象并获得修改了一些数据的新数组？

Question

How to loop through two arrays of objects and get a new array with some data modified?

Arrays:

  const products = [
    {
      brand: 'Levis',
      category: 'Jeans',
    },
    {
      brand: 'Levis',
      category: 'Jeans',
    },
    {
      brand: 'Levis',
      category: 'Tees',
    },
  ];


  const categories = [
    {
      name: 'Jeans',
    },
    {
      name: 'Tees',
    },
  ];

Need new categories array like this with new prop productCount :

  const newCategories = [
    {
      name: 'Jeans',
      productCount: 2,
    },
    {
      name: 'Tees',
      productCount: 0,
    },
  ];

I tried this way but it doesn't work:

  const newArr = categories.map((category) => {
    let count = 0;

    const index = products.findIndex((product) => category.name === product.category);

    if (index > -1) {
      return {
        ...category,
        productCount: count++,
      };
    }

    return {
      ...category,
      productCount: 0,
    };
  });

Answer 1

Increasing the count number will not in that case because it will always start with zero. Instead, you can use the filter() method to find the number of products with a specific category and assign this number to productCount attribute.

 const products = [{ brand: 'Levis', category: 'Jeans', }, { brand: 'Levis', category: 'Jeans', }, { brand: 'Levis', category: 'Tees', }, ]; const categories = [{ name: 'Jeans', }, { name: 'Tees', }, ]; const newArr = categories.map((category) => { const numberOfItems = products.filter((product) => category.name === product.category); return {...category, productCount: numberOfItems.length, }; }); console.log(newArr)

Answer 2

You can create an object and the transform it to array, something like this:

 const products = [ { brand: "Levis", category: "Jeans" }, { brand: "Levis", category: "Jeans" }, { brand: "Levis", category: "Tees" } ]; const categoriesObj = {}; products.forEach(({ brand, category }) => { categoriesObj[category]??= { name: category, productCount: 0 }; ++categoriesObj[category].productCount; }); const newCategories = Object.values(categoriesObj); console.log(newCategories);

Answer 3

You can use the Array#Map method and add a productCount property using the Array#filter method

 const products = [{ brand: 'Levis', category: 'Jeans', }, { brand: 'Levis', category: 'Jeans', }, { brand: 'Levis', category: 'Tees', }, ]; const categories = [{ name: 'Jeans', }, { name: 'Tees', }, ]; const newCategories = [...categories].map(category => ({...category, productCount: products.filter(product => product.category === category.name).length })) console.log(newCategories)

Answer 4

You could do this with Array.reduce() , incrementing the productCount for each item. This should also be efficient, requiring only one iteration of the products array.

We'd run the reduce over both arrays, ensuring that we'll end up with a productCount of zero where no products for that category exist.

 const products = [ { brand: 'Levis', category: 'Jeans', }, { brand: 'Levis', category: 'Jeans', }, { brand: 'Levis', category: 'Tees', }, ]; const categories = [ { name: 'Jeans', }, { name: 'Tees', }, { name: 'Foo', } ]; const result = Object.values([...categories,...products].reduce((acc, { brand, category, name }) => { const key = name || category; acc[key] = acc[key] || { name: key, productCount: 0 }; if (category) acc[key].productCount++; return acc; }, {})); console.log('Result:', result);

 .as-console-wrapper { max-height: 100%;important }