0

first time question asker.

I am working on trying to bring together data from two different API endpoints being served from a Django Rest Framework backend and rendering the display with VueJS on the frontend.

The challenge I am faced with is merging my questionnaire sections and questions with the associated answers. The questionnaire information is coming from one endpoint and the answers from another. Below is a sample of the data.

Sections & Questions Data

{
    "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
                },

Answers Data

"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,
    },

I know I need to match up the question_id fields from both the questionnaire sections data and the answers data. The problem I am facing is, how does one go about doing this?

I would like to create a new set of data that appends the answer data to the question data. I am also trying to build in some flexibility since I have multiple survey types with a variable number of sections and questions.

Trying to keep the data in sections so I can render the frontend views the way I would like.

I've tried looping through sections and questions, using the example I found here: Merge two array of objects based on a key but haven't had much luck.

Still relatively new - any information, guidance or even a working example would be greatly appreciated.

Update: I've managed to make a bit of progress on this. Writing a small test function, I can now update the section/question object with some dummy data.

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);
      }
   }

Each of the question objects within each section now includes the answer_text and answer_numeric key/value pairs.

The next challenge is to find the matching answer data based on matching the appropriate question_id within the answer object to the question_id in the question object.

Any thoughts?

Chris Enstrom
  • 11
  • 1
  • 5

1 Answers1

0

I would store results as a dictionary, instead of an array:

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

Now, you can show your questions in your template with their answers:

<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>
jotaelesalinas
  • 1,387
  • 1
  • 11
  • 24
  • I tried to work through this logic in my code but was unable to get it working. Likely due to my inexperience but if you have any additional context, I might be able to work my way through it. When you say "store the results as a dictionary instead of an array" can you provide a bit more guidance? I tried to load the data in to a dictionary on the "GET" call but it didn't work. – Chris Enstrom Nov 27 '19 at 13:49
  • To be honest, this is quite a tricky question. You have to wait for the results of two AJAX requests in order to show your data. When one of them loads before the other, the template will fail. You have to use a variable to control whether you are waiting for both responses to arrive or they already arrived. Then, you have to loop through several levels of data and link one result to the other one. Try to simplify. Create a new endpoint that returns everything in one go. Or start outputting one field only and build up from there. – jotaelesalinas Nov 27 '19 at 18:26
  • Thanks @jotaelesalinas. That's kind of where my head is at as well. New endpoint likely simplifies this considerably. – Chris Enstrom Nov 29 '19 at 15:27