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

Posted 2023-02-19

【中文标题】如何将我的 JSON 数据文件的结果映射到 quasar 表中？

【英文标题】：How to map the results of my JSON data file in quasar table?

【发布时间】：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”

好吧，但你为什么不能呢？如果您可以在网络选项卡中将它们视为对象，则可以对所有内容进行循环（或循环中的循环..您明白了）。

【参考方案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]`);

见

javascript for documentation JavaScript for...in documentation