如何使用axios get调用来分发响应vuejs

Question

我正在创建Vue应用，需要帮助。

我从axios get调用中获取了一个嵌套的json，我需要为数据设置响应的特定部分。

这是我的回复：

[
    {
        "id": 1,
        "survey_title": "questionnaire TIC TAC",
        "company": {
            "companyId": 1,
            "company_type": "TPE",
            "models": [
                {
                    "modelId": 1,
                    "model_title": "Questionnaire TPE",
                    "topics": [
                        {
                            "topicId": 1,
                            "topic_title": "Sécurité des systèmes d'informations",

                            "questions": [
                                {
                                    "questionId": 1,
                                    "question_title": "Avez-vous, un jour, procédé à un audit de sécurité du système d'information de votre entreprise par une entreprise externe ?",                                    
                                    "answers": [
                                        {
                                            "answerId": 1,
                                            "answer_title": "Inconnu"

                                        },
                                        {
                                            "answerId": 2,
                                            "answer_title": "Non"

                                        },
                                        {
                                            "answerId": 3,
                                            "answer_title": "Une fois"

                                        },
                                        {
                                            "answerId": 4,
                                            "answer_title": "Récemment"

                                        },
                                        {
                                            "answerId": 5,
                                            "answer_title": "Régulièrement"

                                        }
                                    ]
                                },
                                {
                                    "questionId": 2,
                                    "question_title": "Avez-vous procédé à un inventaire des OS & logiciels, installés sur le matériel fixe et portable de l'entreprise ?",                                    
                                    "answers": [
                                        {
                                            "answerId": 1,
                                            "answer_title": "Inconnu"                                         
                                        },
                                        {
                                            "answerId": 2,
                                            "answer_title": "Non"                                           
                                        },
                                        {
                                            "answerId": 5,
                                            "answer_title": "Régulièrement"                                            
                                        },
                                        {
                                            "answerId": 6,
                                            "answer_title": "Occasionnellement"                                            
                                        },
                                        {
                                            "answerId": 11,
                                            "answer_title": "Peu"                                        
                                        }
                                    ]
                                },


                            ]
                        },
                        {
                            "topicId": 2,
                            "topic_title": "Sécurité du réseau",
                            "topic_max_quote": 16,
                            "questions": [
                                {
                                    "questionId": 10,
                                    "question_title": "Présence d'un pare-feu ?"                                  
                                    "answers": [
                                        {
                                            "answerId": 1,
                                            "answer_title": "Inconnu"                                          
                                        },
                                        {
                                            "answerId": 2,
                                            "answer_title": "Non"                                        
                                        },
                                        {
                                            "answerId": 18,
                                            "answer_title": "Oui mais il n'est pas mis à jour"                                        
                                        },
                                        {
                                            "answerId": 19,
                                            "answer_title": "Oui mis à jour régulièrement"                                         
                                    ]
                                },
                                {
                                    "questionId": 11,
                                    "question_title": "Les appareils importants sont-ils reliés à un onduleur ?",
                                    "answers": [
                                        {
                                            "answerId": 1,
                                            "answer_title": "Inconnu"                                          
                                        },
                                        {
                                            "answerId": 2,
                                            "answer_title": "Non"                                          
                                        },
                                        {
                                            "answerId": 20,
                                            "answer_title": "En partie"                                          
                                        }
                                        {
                                            "answerId": 21,
                                            "answer_title": "Oui"                                         
                                        }
                                    ]
                                },

                            ]
                        }
                    ]
                }
            ]
        }
    }
]

还有我的剧本：

data: () => ({

    currentSurveys: [],
    allQuestionsIds: []
  }),

mounted() {
    axios
      .get(`http://localhost:3005/surveys/` + this.$route.params.id)
      .then(response => {
        this.currentSurveys = response.data;
      })
      .catch(e => {
        console.log(e);
      });
  },

我想要在allQuestionsIds中推送所有“ questionId”：[]。我相信我必须在axios调用中插入一个循环，但是我不知道如何。

任何想法？

非常感谢。

Answer 1

首先，请记住，您处理的这种嵌套数据不是传输数据的正确方法，应考虑将其分成几小段。

[此外，您提供的数据中有一些错别字，我们设法解决了。为了从提供的数据中获取questionId，您应该定义嵌套的循环，如下所示：

const allQuestionsIds = [];

const data = [{
  id: 1,
  survey_title: "questionnaire TIC TAC",
  company: {
    companyId: 1,
    company_type: "TPE",
    models: [{
      modelId: 1,
      model_title: "Questionnaire TPE",
      topics: [{
          topicId: 1,
          topic_title: "Sécurité des systèmes d'informations",

          questions: [{
              questionId: 1,
              question_title: "Avez-vous, un jour, procédé à un audit de sécurité du système d'information de votre entreprise par une entreprise externe ?",
              answers: [{
                  answerId: 1,
                  answer_title: "Inconnu"
                },
                {
                  answerId: 2,
                  answer_title: "Non"
                },
                {
                  answerId: 3,
                  answer_title: "Une fois"
                },
                {
                  answerId: 4,
                  answer_title: "Récemment"
                },
                {
                  answerId: 5,
                  answer_title: "Régulièrement"
                }
              ]
            },
            {
              questionId: 2,
              question_title: "Avez-vous procédé à un inventaire des OS & logiciels, installés sur le matériel fixe et portable de l'entreprise ?",
              answers: [{
                  answerId: 1,
                  answer_title: "Inconnu"
                },
                {
                  answerId: 2,
                  answer_title: "Non"
                },
                {
                  answerId: 5,
                  answer_title: "Régulièrement"
                },
                {
                  answerId: 6,
                  answer_title: "Occasionnellement"
                },
                {
                  answerId: 11,
                  answer_title: "Peu"
                }
              ]
            }
          ]
        },
        {
          topicId: 2,
          topic_title: "Sécurité du réseau",
          topic_max_quote: 16,
          questions: [{
              questionId: 10,
              question_title: "Présence d'un pare-feu ?",
              answers: [{
                  answerId: 1,
                  answer_title: "Inconnu"
                },
                {
                  answerId: 2,
                  answer_title: "Non"
                },
                {
                  answerId: 18,
                  answer_title: "Oui mais il n'est pas mis à jour"
                },
                {
                  answerId: 19,
                  answer_title: "Oui mis à jour régulièrement"
                }
              ]
            },
            {
              questionId: 11,
              question_title: "Les appareils importants sont-ils reliés à un onduleur ?",
              answers: [{
                  answerId: 1,
                  answer_title: "Inconnu"
                },
                {
                  answerId: 2,
                  answer_title: "Non"
                },
                {
                  answerId: 20,
                  answer_title: "En partie"
                },
                {
                  answerId: 21,
                  answer_title: "Oui"
                }
              ]
            }
          ]
        }
      ]
    }]
  }
}];

data.forEach((item) => {
  item.company.models.forEach((newItem) => {
    newItem.topics.forEach((newSecondItem) => {
      newSecondItem.questions.forEach((newThirdItem) => {
        allQuestionsIds.push(newThirdItem.questionId);
      });
    });
  });
});

console.log(allQuestionsIds);

注意：我只是将allQuestionsIds定义为const以提供实时演示，您应该跳过其变量声明，然后在Vue应用程序中将allQuestionsIds.push(newThirdItem.questionId);替换为this.allQuestionsIds.push(newThirdItem.questionId);。