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，但是运气不高。

还是相对较新的-任何信息，指导甚至工作示例都将不胜感激。

更新：我已经在这方面取得了一些进展。编写一个小的测试函数，我现在可以使用一些虚拟数据来更新section / question对象。

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>

合并Javascript中的数据对象以在VueJS中显示

1 个答案: