Merge Object array based on id

July 23, 2022

Hi I am calling an API where it returns an Object containing questions and answers like so

{
   "questions":[
      {
         "id":1,
         "questionHeader":"Some question header",
         "questionText":"Some question text?",
      },
      {
         "id":2,
         "questionHeader":"Some question header",
         "questionText":"Some question text?",
      },
   ],
   "answers":[
      {
         "id":1,
         "questionId":1,
         "answer":"Some answer",
      },
      {
         "id":2,
         "questionId":1,
         "answer":"Some answer",
      },
      {
         "id":3,
         "questionId":2,
         "answer":"Some answer",
      },
   ]
}

What I am trying to achieve is to get the answers embedded within their respective question based on a questions id and an answers questionId. So for the above, I am trying to achieve something like the following.

{
   "questions":[
      {
         "id":1,
         "questionHeader":"Some question header",
         "questionText":"Some question text?",
         "answers":[
          {
             "id":1,
             "questionId":1,
             "answer":"Some answer",
          },
          {
             "id":2,
             "questionId":1,
             "answer":"Some answer",
          },
        ]
      },
      {
         "id":2,
         "questionHeader":"Some question header",
         "questionText":"Some question text?",
         "answers":[
          {
            "id":3,
            "questionId":2,
            "answer":"Some answer",
          },
        ]
      },
   ],
}

I have something which adds some answers but not as an array of objects per question. Currently I have this

const newItem = data.questions.map((t1) => ({
    ...t1,
    ...data.answers.find((t2) => t2.questionId === t1.id),
}));
console.log(newItem);

I have set up a JSFiddle. How can I achieve my desired output?

Thanks

>Solution :

Array#filter can be used to find all the answers with a specific question id. (Note that Array#find only returns the first element matching a condition.)

const data={questions:[{id:1,questionHeader:"Some question header",questionText:"Some question text?"},{id:2,questionHeader:"Some question header",questionText:"Some question text?"},],answers:[{id:1,questionId:1,answer:"Some answer"},{id:2,questionId:1,answer:"Some answer"},{id:3,questionId:2,answer:"Some answer"},]};
const newItem = data.questions.map((t1) => ({
    ...t1,
    answers: data.answers.filter((t2) => t2.questionId === t1.id),
}));
console.log(newItem);