Блог

Главная - Вопросы по программированию - Как отобразить результаты моего файла данных JSON в таблице quasar?

Как отобразить результаты моего файла данных JSON в таблице quasar?

#javascript #vue.js #quasar-framework #quasar

Вопрос:

На самом деле я студент VueJS, и, похоже, я не могу вернуть расстояния из моего файла JSON в таблицу. Как лучше всего вернуть все данные «5», «10»… пожалуйста, пешком и за рулем?

this.concurrentsRows = JSON.parse(result.data.result.iso.driving[i].poi[j].расстояние)???

Как определить 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",
            }
          ],
        },
      }
    }
  }
]

Комментарии:

1. Что вы имеете в виду под «Как определить i и j ?» ? С var помощью или let обычно.. похоже, они обычно используются с for или с любым циклом в целом. Можете ли вы выполнить цикл result.data.result ? Разве это уже не массив? Я уверен, что Axios должен был проанализировать JSON для вас. Просто выполняйте console.log вызовы, если вы не уверены, что такое значение.

2. Axios отправляет мне таблицу данных, но я не могу получить POI в таблице. Нужно ли писать функцию, которая повторяет «вождение» и «poi»? Куда его поместить?

3. Уверен, вам придется написать цикл для их повторения, да. Вероятно, вы можете просто выполнять let values = result.data.resu< и выполнять цикл for, а затем создавать this.concurrentsRows все, что вам нужно.

4. Это цикл, который я не могу выполнить, он должен повторять «ходьбу», «вождение» и «poi»

5. Хорошо, но почему вы не можете? Если вы можете видеть их как объект на вкладке сеть, вы можете сделать цикл по всему (или цикл в цикле .. вы поняли идею).

Ответ №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]}`);
}

Смотрите

Метки: