Search code examples
javascriptlodash

Merging two arrays based on Property


I have two arrays: one contains categories and the second contains items.

I would like to merge the all items items into their proper category array using lodash. However, I do have a question. Since this can be done with a double foreach loop, is there any reason to use lodash?

Array 1 (categories):

"categories": [
    {
        "id": 1,
        "name": "cat_1",
        "items": []
    },
    {
        "id": 11,
        "name": "cat_2",
        "items": []
    },
    {
        "id": 61,
        "name": "cat_3",
        "items": []
    }
]

Array 2 (contains items):

[ 
    { 
        id: 15,
        name: 'some_item',
        category_id: 1,
        category_name: 'cat_1',
    },
    { 
        id: 112,
        name: 'some_item',
        category_id: 11,
        category_name: 'cat_2',
    },
    { 
        id: 235,
        name: 'some_item',
        category_id: 11,
        category_name: 'cat_2',
    },

]

The desired object would look:

"categories": 
    [
        {
            "id": 1,
            "name": "cat_1",
            "items": [
                { 
                    id: 15,
                    name: 'some_item',
                    category_id: 1,
                    category_name: 'cat_1',
                }
            ]
        },
        {
            "id": 11,
            "name": "cat_2",
            "items": [
                { 
                    id: 112,
                    name: 'some_item',
                    category_id: 11,
                    category_name: 'cat_2',
                },
                { 
                    id: 235,
                    name: 'some_item',
                    category_id: 11,
                    category_name: 'cat_2',
                }
            ]
        },
        {
            "id": 61,
            "name": "cat_3",
            "items": []
        }
    ]

Solution

  • I have never used lodash, but you're right, this could be quite easily done with a foreach loop. Not even a double foreach loop, a single one with a '.find' or '.filter'

    (a) loop through each item and use array.find to find the appropriate category, and input the item into the category

    (b) loop through each category and use array.filter to find the appropriate items, and input those items into each category.

    Here's one option laid out:

    (()=>{
      const categories = [{
          "id": 1,
          "name": "cat_1",
          "items": []
        },
        {
          "id": 11,
          "name": "cat_2",
          "items": []
        },
        {
          "id": 61,
          "name": "cat_3",
          "items": []
        }]
    
      const items = [{ 
          id: 15,
          name: 'some_item',
          category_id: 1,
          category_name: 'cat_1',
        },
        { 
          id: 112,
          name: 'some_item',
          category_id: 11,
          category_name: 'cat_2',
        },
        { 
          id: 235,
          name: 'some_item',
          category_id: 11,
          category_name: 'cat_2',
        }]
    
      categories.forEach((cat) => {
        cat.items = items.filter((item) => item.category_id === cat.id);
      })
    })()