将数据从一个对象附加到另一个 javascript

Question

大家好，我有两个对象

问题

[
  0:{
   question:"favourite food", id:"1", question_type:"text",
   sub_questions: {
     0:{
        question:"what is it's origin", parent_id:"1",
        sub_question_id:"1" question_type:"text",
     },
     1:{
        question:"how much does it cost", parent_id:"1",
        sub_question_id:"2" question_type:"text",
     }
   }
 },
 1:{
    question:"Dream car", id:"2", question_type:"text"
   },
 2:{
    question:"favourite pet", id:"2", question_type:"text"
   }
]

答案

[
  0:{
      question_id:1, response: "Fufu", sub_question: false
    },
  1:{
      parent_id:1, question_id:1, response: "Fufu originated from West Africa", sub_question: true
    },
  2:{
      parent_id:1, question_id:2, response: "USD3", sub_question: true
    },
 3:{
      question_id:3, response: "Tesla Model S", sub_question: false
    }
 4:{
      question_id:3, response: "Cat (Nameless)", sub_question: false
   }

]

我希望能够将答案附加到正确的问题字段（包括子问题）

欢迎所有建议并提前感谢您的帮助，请注意，我需要纯 javascript 的答案，没有 jquery

Answer 1

您似乎必须使用 array.prototype.forEach 函数遍历 questions 数组和附加的 sub_questions 数组，然后对每个项目使用 array.prototype.find 函数来查找并附加匹配的答案。

请在此链接中找到实施的解决方案： https://jsfiddle.net/jawLtz03/

var questions = [{
    question: "favourite food",
    id: "1",
    question_type: "text",
    sub_questions: [{
        question: "what is it's origin",
        parent_id: "1",
        sub_question_id: "1",
        question_type: "text",
      },
      {
        question: "how much does it cost",
        parent_id: "1",
        sub_question_id: "2",
        question_type: "text",
      }
    ]
  },
  {
    question: "Dream car",
    id: "3",
    question_type: "text"
  },
  {
    question: "favourite pet",
    id: "4",
    question_type: "text"
  }
];

var answers = [{
    question_id: 1,
    response: "Fufu",
    sub_question: false
  },
  {
    parent_id: 1,
    question_id: 1,
    response: "Fufu originated from West Africa",
    sub_question: true
  },
  {
    parent_id: 1,
    question_id: 2,
    response: "USD3",
    sub_question: true
  },
  {
    question_id: 3,
    response: "Tesla Model S",
    sub_question: false
  },
  {
    question_id: 4,
    response: "Cat (Nameless)",
    sub_question: false
  }
];

var innerHtml = "<ul>"
questions.forEach(function(question, index) {
  innerHtml += `<li>Question ${index + 1}. ${question.question}?<br/>`;

  const hasSub = question.sub_questions ? true : false;
  question.answer = matchWithAnswer(question, false);
  innerHtml += `Answer: ${question.answer.response}.`;

  if (hasSub) {
    innerHtml += "<p><ul>";

    question.sub_questions.forEach(function(sub_question, sub_index) {
      innerHtml += `<li>Sub-Question ${sub_index + 1}. ${sub_question.question}?<br/>`;

      sub_question.answer = matchWithAnswer(sub_question, true);

      innerHtml += `Answer: ${sub_question.answer.response}.</li>`;
    });

    innerHtml += "</ul></p>";
  }

  innerHtml += "</li>";
});

function matchWithAnswer(question, isSub = false) {
  return answers.find(function(answer) {
    if (isSub) {
      return answer.sub_question == true && answer.parent_id == question.parent_id && answer.question_id == question.sub_question_id;
    } else {
      return answer.question_id == question.id;
    }
  });
}

innerHtml += "</ul>";

var div = document.getElementById('output');
div.innerHTML = innerHtml;

<h1>Q & A</h1>
<div id="output"></div>