如何将我的 JSON 数据文件的结果映射到 quasar 表中？答案

【问题标题】：How to map the results of my JSON data file in quasar table?如何将我的 JSON 数据文件的结果映射到 quasar 表中？
【发布时间】：2021-12-23 01:17:23
【问题描述】：

我实际上是 VueJS 学生，我似乎无法将我的 JSON 文件的距离返回到表格。请通过步行和驾驶返回“5”，“10”的所有数据的最佳做法是什么？

this.concurrentsRows = JSON.parse(result.data.result.iso.driving[i].poi[j].distance) ???

如何定义 i 和 j ？

我的文件 VueJS(Quasar)：

<template>
 <div>
  <SimpleTableFirstCell
    :loading="loading"
    :columns="concurrentsColums"
    :rows="concurrentsRows"
    :title="Concurrents List"
  />
 </div>
</template>

<script>
import { defineComponent, ref } from 'vue'
import axios from 'axios'

import SimpleTableFirstCell from 'src/components/SimpleTableFirstCell.vue'

export default defineComponent({
  name: 'Concurrents',

  components: {,
    SimpleTableFirstCell
  },
  data () {
    return {
      concurrentsColums: [
        {
          name: 'distance',
          label: 'Distance',
          field: 'distance',
        },
        {
          name: 'latitude',
          label: 'Latitude',
          field: 'latitude',
        },
        {
          name: 'longitude',
          label: 'Longitude',
          field: 'longitude',
        }
      ],
      loading: ref(false),

      concurrentsRows: ref([]),
    }
  },
  methods: {
    concurrentsData () {
     
        axios.get('https://url...')
         .then(result => {
           this.loading = true
           this.concurrentsRows = JSON.parse(result.data.result)
         .finally(() => {
           loading.value = false
         })
    }
   }
  })
</script>

我的 JSON：

[
  {
    "iso": {
      "driving": {
        "5": {
          "poi": [
            {
              "distance": 1.67168887573,
              "latitude": "50.415",
              "longitude": "2.990",
            },
            {
              "distance": 3.68833575679,
              "latitude": "50.403",
              "longitude": "3.031",
            },
          ],
        },
        "10": {
          "poi": [
            {
              "distance": 2.40512340917,
              "latitude": "50.412",
              "longitude": "2.977",
            },
            {
              "distance": 2.11846991875,
              "latitude": "50.417",
              "longitude": "2.975",
            },
          ],
        },
      },
      "walking": {
        "5": {
          "poi": [
            {
            "distance": 3.68833575679,
            "latitude": "50.403",
              "longitude": "3.031",
            }
          ],
        },
      }
    }
  }
]

【问题讨论】：

"如何定义 i 和 j？" 是什么意思？通常使用var 或let.. 它们似乎通常与for 或任何一般循环一起使用。你能循环通过result.data.result吗？那不是一个数组吗？我很确定 Axios 应该已经为你解析了 JSON。如果您不确定值是什么，只需拨打console.log 电话。
Axios 确实向我发送了一个数据表，但我无法检索表中的 POI。一定要写一个函数来迭代“driving”和“poi”吗？放在哪里？
很确定你必须编写一个循环来迭代它们，是的。您可能只需执行 let values = result.data.result; 并执行 for 循环，然后将 this.concurrentsRows 设为您需要的任何内容。
这是我不能做的循环，它必须迭代“walking”、“driving”和“poi”
好吧，但你为什么不能呢？如果您可以在网络选项卡中将它们视为对象，则可以对所有内容进行循环（或循环中的循环..您明白了）。

标签： javascript vue.js quasar-framework quasar

【解决方案1】：

i 和j 通常用于for 循环。一个简单的：

let arr = [2, 4, 8];
for(let i=0; i < arr.length; i++) {
  console.log(i, arr[i]);
}

在您的情况下，您可以在 for 循环中使用 for 循环。

let arr = [[1,2,3], [2,4,8], [-1,-1]];
for(let i=0; i<arr.length; i++) {
  for(let j=0; j<arr[i].length; j++) {
    console.log(i, j, arr[i][j]);
  }
}

同样的对象可以用for...in 遍历。此处示例：

const object = { a: 1, b: 2, c: 3 };

for (const property in object) {
  console.log(`${property}: ${object[property]}`);
}

见

【讨论】：