Javascript – adding objects to array with matching id

January 6, 2022

I have an array categories that has the value id which I am trying to match with my array articles

If articles has a matching id with one of the categories I like would to combine them into one array. I am able to add these objects to the array but they are not matching based on id.

Here is an example of categories:

const categories = [{results: 
    { 
      "id": 28,
      "name": "Articles"
    }, { 
      "id": 76,
      "name": "Projects"
    }
    }]

Here is an example of articles:

const articles = [ 
{
 "title": "first article",
 "content": "lorem ipsum",
 "categoryId": 28
},
{
 "title": "second article",
 "content": "lorem ipsum",
 "categoryId": 28
},
{
 "title": "thirdarticle",
 "content": "lorem ipsum",
 "categoryId": 76
},
]

I am attempting to combine the two arrays into one. If possible I would like the articles array to be an array in that matching index. For example:

 const combined = [
      {
        "id": 28,
        "name": "Articles",
        "articles:: [
          { "title": "first article", "content": "lorem ipsum", "categoryId": 28 },
          { "title": "second article", "content": "lorem ipsum", "categoryId": 28 },
        ],
      },
    ];

I’ve attempted to do this by mapping through categories and using Object.assign. The output results seems to combine arrays but I believe they are all combined and not to match the id.

How am I able to achieve this?

const articles = [ 
    {
     "title": "first article",
     "content": "lorem ipsum",
     "categoryId": 28
    },
    {
     "title": "second article",
     "content": "lorem ipsum",
     "categoryId": 28
    },
    {
     "title": "thirdarticle",
     "content": "lorem ipsum",
     "categoryId": 76
    },
    ]
    

const categories = {results: [{ "id": 28, "name": "Articles"}, {"id": 76, "name": "Projects"}]}

let combined = categories.results.map((item, i ) => Object.assign(item, articles));

  console.log(combined)

>Solution :

Here’s one way to get there using your code but filtering matching articles and using the spread operator

let combined = categories.results.map(item => ({ ...item,
  articles: articles.filter(f => f.categoryId == item.id)
}));

const articles = [{
    "title": "first article",
    "content": "lorem ipsum",
    "categoryId": 28
  },
  {
    "title": "second article",
    "content": "lorem ipsum",
    "categoryId": 28
  },
  {
    "title": "thirdarticle",
    "content": "lorem ipsum",
    "categoryId": 76
  },
]


const categories = {
  results: [{
    "id": 28,
    "name": "Articles"
  }, {
    "id": 76,
    "name": "Projects"
  }]
}

let combined = categories.results.map(item => ({ ...item,
  articles: articles.filter(f => f.categoryId == item.id)
}));

console.log(combined)