Vue v-对于JSON 文件中每次出现的记录

Question

我正在尝试显示来自网站的信息。该网站跟踪交通拥堵和其他维护工作。我只想收集交通拥堵并将它们分别显示在 a 中。

该代码使用 Axios 从静态 url 获取数据：https : //www.anwb.nl/feeds/gethf。我已经想出了如何从这个文件中获取信息：

{{roadEntries[0].events.trafficJams[0].from}} => To get where the jam starst

{{roadEntries[0].events.trafficJams[0].to}} => To get where the jam ends. 

 export default {

        name: "Melding",

        data() {

            return {

                datum: {},

                roads: {},

                informations: {},

                roadEntries: {},

            }

        },

        mounted() {

            const axios = require('axios');

            const api = 'https://www.anwb.nl/feeds/gethf';

            // Make a request for a user with a given ID

            axios.get(api).then((response) => {

                this.informations = response.data;

                this.datum = response.data.dateTime;

                this.roadEntries = response.data.roadEntries;

                this.roads = response.data.roadEntries;

            })

        }

    }

模板：

   <div>

        <p>{{ datum }}</p>

        <hr>

        {{roadEntries[0].road}}

        {{roadEntries[0].events.trafficJams[0].from}}

        {{roadEntries[0].events.trafficJams[0].to}}

    </div>

我曾经设法将“from”放在 data() 中，但是循环只是给了我一个单词中每个字母的循环。

此外，包含信息的文件包含几个数组，使其难以使用。“基准”数据很容易收集，因为它只是一个静态字符串。

有人可以向我展示/解释我如何循环遍历文件中的每条记录并在模板中显示它们吗？

Answer 1

您需要两个循环来显示交通拥堵情况，一个通过roadEntries数组，一个内部循环通过trafficJams每条道路的数组。要了解 vue.js 中的循环用法，我鼓励您阅读v-for 文档。一个计算的属性也是在这种情况下，会非常方便过滤所有可能没有遇到任何堵车的道路。new Vue({&nbsp; el: '#app',&nbsp; data() {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; datum: '',&nbsp; &nbsp; &nbsp; roadEntries: [],&nbsp; &nbsp; }&nbsp; },&nbsp; computed: {&nbsp; &nbsp; roadEntriesWithTrafficJams() {&nbsp; &nbsp; &nbsp; return this.roadEntries.filter(roadEntry => roadEntry.events != null && roadEntry.events.trafficJams != null && roadEntry.events.trafficJams.length > 0);&nbsp; &nbsp; }&nbsp; },&nbsp; mounted() {&nbsp; &nbsp; const api = 'https://www.anwb.nl/feeds/gethf';&nbsp; &nbsp; // Make a request for a user with a given ID&nbsp; &nbsp; axios.get(api).then((response) => {&nbsp; &nbsp; &nbsp; this.datum = response.data.dateTime;&nbsp; &nbsp; &nbsp; this.roadEntries = response.data.roadEntries;&nbsp; &nbsp; })&nbsp; }})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script><div id="app">&nbsp; <h3>&nbsp; &nbsp;Date time : {{ datum }}&nbsp; </h3>&nbsp; <div v-for="roadEntry in roadEntriesWithTrafficJams">&nbsp; &nbsp; <h4>&nbsp; &nbsp; {{ roadEntry.road }}&nbsp; &nbsp; </h4>&nbsp; &nbsp; <div v-for="trafficJam in roadEntry.events.trafficJams">&nbsp; &nbsp; &nbsp; &nbsp;{{ trafficJam.from }} - {{ trafficJam.to }}&nbsp; &nbsp; </div>&nbsp; </div></div>

Answer 2

我的答案不是完整的 Vue 解决方案，但我专注于如何从 API 响应中提取所需的数据到一个数组（然后可以由 v-for 循环）：// consider these variables in your Vue data()let date = '';const trafficJams = [];axios.get('https://www.anwb.nl/feeds/gethf').then((resp) => {&nbsp; &nbsp; date = resp.data.dateTime;&nbsp; &nbsp; const roadEntries = resp.data.roadEntries;&nbsp; &nbsp; // loop through all roadEntries&nbsp; &nbsp; roadEntries.forEach(entry => {&nbsp; &nbsp; &nbsp; &nbsp; // extract the trafficJams array to a variable for easier reading&nbsp; &nbsp; &nbsp; &nbsp; const jams = entry.events.trafficJams;&nbsp; &nbsp; &nbsp; &nbsp; // if there are jams on the given road (entry):&nbsp; &nbsp; &nbsp; &nbsp; if (jams.length > 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // loop through all traffic jam and push the needed data to your variable&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; jams.forEach(jam => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; trafficJams.push({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; road: entry.road,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; from: jam.from,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; to: jam.to&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; &nbsp; // and there you have "road", "from" and "to" data for all traffic jams&nbsp; &nbsp; console.log(trafficJams);});<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>