Creating a visual representation of the information stored in my JSON data file using a Quasar table

Question

Creating a visual representation of the information stored in my JSON data file using a Quasar table

As a VueJS student, I'm struggling to display the distances from my JSON file in a table. What is the best way to retrieve and show all the distance data for "5" and "10" by both walking and driving?

Should I use this code:

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

? And how should I define i and j?

Here is a snippet of my VueJS(Quasar) file:

<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>

This is a sample of my JSON data:

[
  {
    "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",
            }
          ],
        },
      }
    }
  }
]

javascript vue.js quasar-framework quasar

Answer 1

Answer №1

i and j are commonly used as iterators in a for loop. Here is a basic example:

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

You can nest a for loop inside another for loop for more complex scenarios.

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]);
  }
}

Additionally, objects can be iterated over using for...in. See this example:

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

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

For more information, refer to the following resources:

Answer 2

i and j are commonly used as iterators in a for loop. Here is a basic example:

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

You can nest a for loop inside another for loop for more complex scenarios.

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]);
  }
}

Additionally, objects can be iterated over using for...in. See this example:

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

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

For more information, refer to the following resources:

Creating a visual representation of the information stored in my JSON data file using a Quasar table

Answer №1

Similar questions

Switch the selected option in JQuery UI dropdown using a clickable button

Tips for extracting unique values from two arrays and returning them in a new array using JavaScript

Error encountered while attempting to validate and add new entries

It appears that the JavaScript global dynamic variable is undefined as it changes from function to function, suggesting it might be

The Mystery of Socket.io Random Disconnects (version 1.0.6)

There seems to be an issue with d3js bar charts as they are not displaying on the screen and there

Utilize React's debounce feature in conjunction with updating state using

To retrieve data from an AJAX response, you will receive an array in the form of a string

What could be the reason for the malfunctioning of the "subscribe" button?

Guide to utilizing exact matching functionality in ExpressJs router

The reflow feature in Highcharts does not properly update the width of the container for High

Troubleshooting 'Warning: Prop `id` did not match` in react-select

Why isn't P5.JS's .display() working like it should?

"Use jQuery to target the first child element within a parent element that has a specific class

What could be the reason behind having two distinct variations of Vue?

There are no Vue.js updates reflected in Heroku when using Laravel

Using HTML and JavaScript to implement a dragging functionality on a canvas element

Navigating through external JSON data in a Node.js and Express application, and rendering the data using Jade

Exploring the functionality of URLs in Node.js

"Learn the steps to toggle a sub menu using an onclick event and how to hide it using another