合並 Javascript 中的數據對象以在 VueJS 中顯示

Question

第一次提問。

我正在嘗試將來自 Django Rest Framework 后端提供的兩個不同 API 端點的數據整合在一起，並在前端使用 VueJS 呈現顯示。

我面臨的挑戰是將我的問卷部分和問題與相關答案合並。 問卷信息來自一個端點，答案來自另一個端點。 下面是一個數據樣本。

部分和問題數據

{
    "survey_id": 2,
    "survey_name": "My Survey",
    "instructions": "Instructions.",
    "other_header_info": ""
    "section": [
        {
            "section_id": 2,
            "section_name": "Section Name",
            "section_title": "Section Title",
            "section_instructions": "Some Instructions",
            "section_required_yn": true,
            "question": [
                {
                    "question_id": 2,
                    "question_name": "Question One.",
                    "question_subtext": "None.",
                    "answer_required_yn": true,
                    "input_type_id": {
                        "id": 3,
                        "input_type_name": "Dropdown"
                    },
                    "option_group_id": "1 - 10",
                    "allow_multiple_option_answers_yn": false
                },
{
            "section_id": 3,
            "section_name": "Another Section",
            "section_title": "Section Title",
            "section_instructions": "Section Instructions",
            "section_required_yn": true,
            "question": [
                {
                    "question_id": 10,
                    "question_name": "Another question to be answered",
                    "question_subtext": "None.",
                    "answer_required_yn": true,
                    "input_type_id": {
                        "id": 3,
                        "input_type_name": "Dropdown"
                    },
                    "option_group_id": "1 - 10",
                    "allow_multiple_option_answers_yn": false
                },

答案數據

"results": [
    {
        "id": 100,
        "answer_numeric": 4,
        "answer_text": null,
        "answer_yn": null,
        "answer_group": "4-ojepljuu",
        "question_id": 2,
    },
    {
        "id": 101,
        "answer_numeric": 1,
        "answer_text": null,
        "answer_yn": null,
        "answer_group": "4-ojepljuu",
        "user_id": 4,
        "question_id": 5,
    },

我知道我需要匹配來自問卷部分數據和答案數據的 question_id 字段。 我面臨的問題是，如何去做呢？

我想創建一組新數據，將答案數據附加到問題數據。 我還嘗試建立一些靈活性，因為我有多種調查類型，其中包含可變數量的部分和問題。

嘗試將數據保存在部分中，以便我可以按照我想要的方式呈現前端視圖。

我嘗試使用我在此處找到的示例來循環瀏覽部分和問題： Merge two array of objects based on a key，但運氣不佳。

仍然相對較新 - 任何信息、指導甚至工作示例都將不勝感激。

更新：我已經在這方面取得了一些進展。 編寫一個小測試函數，我現在可以用一些虛擬數據更新部分/問題對象。

var a = this.answers;
var s = this.section;

var newObj = { answer_text: "test1", answer_numeric: "test2" };
for (var idx3 = 0; idx3 < s.length; idx3++) {
   for (var idx4 = 0; idx4 < s[idx3].question.length; idx4++) {
      Object.assign(s[idx3].question[idx4], newObj);
      }
   }

每個部分中的每個問題對象現在都包含answer_text和answer_numeric鍵/值對。

下一個挑戰是基於將答案對象中的適當question_id與問題對象中的question_id匹配來找到匹配的答案數據。

有什么想法嗎？

Answer 1

我會將results存儲為字典，而不是數組：

var results_to_dict = function (results) {
  var dict = {};
  results.forEach(r => dict[r.question_id] = r);
  return dict;
};
results = results_to_dict(results);

現在，您可以在模板中顯示您的問題及其答案：

<div v-for="question in section.questions" :key="question.question_id">
  <p>Question: {{question.question_name}}</p>
  <p>Answer: {{answers[question_id].text}}</p>
</div>