如何用Lodash在JavaScript中按列表内键分组数组及处理指定数据

Hey there! Let's work through your two questions with clear, practical examples.

Lodash has a dedicated method for this exact use case: _.groupBy(). It takes two main arguments: the array you want to group, and either the key name you want to group by, or a function that returns the grouping key (super handy for nested properties).

Basic Example #

Suppose you have an array of objects and want to group them by a category key:

const items = [
  { category: 'fruit', name: 'apple' },
  { category: 'vegetable', name: 'carrot' },
  { category: 'fruit', name: 'banana' }
];

// Group by the 'category' key
const groupedItems = _.groupBy(items, 'category');

console.log(groupedItems);
// Output:
// {
//   fruit: [{ category: 'fruit', name: 'apple' }, { category: 'fruit', name: 'banana' }],
//   vegetable: [{ category: 'vegetable', name: 'carrot' }]
// }

For Nested Keys #

If your grouping key is nested inside the objects, use a function to access it:

const nestedItems = [
  { details: { type: 'electronics' }, name: 'phone' },
  { details: { type: 'furniture' }, name: 'chair' },
  { details: { type: 'electronics' }, name: 'laptop' }
];

const groupedNested = _.groupBy(nestedItems, item => item.details.type);

Looking at your data structure, the goal is likely to group products by their id and pair each group with the corresponding offer from the offers array. This way, you can pass each grouped entry to a modal to display the offer and its associated products.

Step-by-Step Solution #

First, let's restate your data for clarity:

var data = { 
  "offers" : [{id:1}, {id:2}],
  "products": [
    {"name":"nike","id":1},
    {"name":"puma","id":2},
    {"name":"nike","id":1}
  ]
};

We'll use _.groupBy() to organize products by id, then map over the offers to combine them with their matching products:

// 1. Group products by their 'id'
const groupedProducts = _.groupBy(data.products, 'id');

// 2. Combine each offer with its corresponding products
const modalReadyData = data.offers.map(offer => ({
  ...offer, // Include all offer properties
  products: groupedProducts[offer.id] || [] // Add matching products (empty array if none)
}));

console.log(modalReadyData);
// Expected Output:
// [
//   { id: 1, products: [ { name: 'nike', id: 1 }, { name: 'nike', id: 1 } ] },
//   { id: 2, products: [ { name: 'puma', id: 2 } ] }
// ]

This modalReadyData array is perfect for dynamic modal rendering—each entry contains everything you need: the offer details and the list of products tied to that offer. You can loop through this array and pass each object to your modal component as needed.

内容的提问来源于stack exchange，提问作者Pramod Mg