如何在Quasar表格中映射JSON数据内的驾车、步行距离等POI字段？

现有代码问题修正 #

• 选项式API下data返回的属性默认是响应式的，不需要额外用ref包裹
• finally回调中访问loading需要加this指向组件实例
• 你代码里的列配置属性名concurrentsColums拼写少了字母n，要确认和子组件接收的属性名匹配，避免渲染异常
• 需先对接口返回的嵌套JSON结构做扁平化处理，才能匹配表格的行数据格式

核心POI数据提取逻辑 #

不需要手动维护i、j索引，用JS内置遍历方法即可批量提取所有POI，还可按需扩展出行模式、阈值字段方便后续筛选：

// 可灵活调整要提取的出行模式，这里默认拿驾车、步行两种
const TARGET_MODES = ['driving', 'walking']
// 如果axios已经自动解析JSON响应，可去掉外层JSON.parse
const resData = JSON.parse(result.data.result)
const isoData = resData[0].iso
const allPoi = []

TARGET_MODES.forEach(mode => {
  const modeData = isoData[mode]
  // 遍历当前模式下所有阈值，如果只要特定阈值（比如仅5、10），可以加filter过滤：
  // Object.keys(modeData).filter(threshold => ['5','10'].includes(threshold)).forEach(...)
  Object.keys(modeData).forEach(threshold => {
    const poiList = modeData[threshold].poi
    // 给每个POI追加模式、阈值字段，不需要可以直接push原始poiList
    const formattedPoi = poiList.map(item => ({
      ...item,
      mode: mode === 'driving' ? '驾车' : '步行',
      threshold: `${threshold}分钟`
    }))
    allPoi.push(...formattedPoi)
  })
})
// 赋值给表格行数据
this.concurrentsRows = allPoi

完整修改后代码 #

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

<script>
import { defineComponent } from 'vue'
import axios from 'axios'
import SimpleTableFirstCell from 'src/components/SimpleTableFirstCell.vue'

export default defineComponent({
  name: 'Concurrents',
  components: {
    SimpleTableFirstCell
  },
  data () {
    return {
      concurrentsColumns: [
        {
          name: 'distance',
          label: 'Distance',
          field: 'distance',
        },
        {
          name: 'latitude',
          label: 'Latitude',
          field: 'latitude',
        },
        {
          name: 'longitude',
          label: 'Longitude',
          field: 'longitude',
        }
        // 如果要展示出行模式、阈值，可以新增两个列配置
        // {
        //   name: 'mode',
        //   label: '出行模式',
        //   field: 'mode',
        // },
        // {
        //   name: 'threshold',
        //   label: '时间阈值',
        //   field: 'threshold',
        // }
      ],
      loading: false,
      concurrentsRows: [],
    }
  },
  mounted() {
    // 页面加载时调用接口取数
    this.concurrentsData()
  },
  methods: {
    concurrentsData () {
      this.loading = true
      axios.get('https://url...')
        .then(result => {
          const TARGET_MODES = ['driving', 'walking']
          const resData = JSON.parse(result.data.result)
          const isoData = resData[0].iso
          const allPoi = []
          TARGET_MODES.forEach(mode => {
            const modeData = isoData[mode]
            Object.keys(modeData).forEach(threshold => {
              const poiList = modeData[threshold].poi
              allPoi.push(...poiList)
            })
          })
          this.concurrentsRows = allPoi
        })
        .finally(() => {
          this.loading = false
        })
    }
  }
})
</script>

内容的提问来源于stack exchange，提问作者gcbox999