Navigating data in a Json array object

Question

Navigating data in a Json array object

Can someone assist me in retrieving data from a JSON array file stored at the following link?

  Html
  <div>
    <div v-for="data in myJson.id " >{{ data }}</div>
  </div>
      js
    import json from '.././json/data.json'
      export default {
    components: {
      MainLayout,
    },
  data: function(){
        return {
          myJson:json
        }
      },
  method:{
    getjson:function(){
      this.json = JSON.parse(myJson);
    }
  }
  }

I need to retrieve specific data only by using the unique ID, but I'm having trouble with the current syntax.

Click to https://i.sstatic.net/8TX6B.png access the JSON file

javascript arrays json vue.js vuejs2

Answer 1

Answer №1

It appears that there is no need to use JSON.parse. The functionality works fine without it. Simply place your JSON file in the same directory as your component and give this a try:

import data from './data.json'

export default {
  created () {
    for (const item of data[0]['file']) {
      console.log(`
        Name: ${item.name}
        Type: ${item.type}
        Size: ${item.filesize}
        Dimensions: ${item.dimension[0].width}x${item.dimension[0].height}
      `)
    }
  }
}

Upon loading the page, you will find information from your JSON file displaying in the console.

Answer 2

It appears that there is no need to use JSON.parse. The functionality works fine without it. Simply place your JSON file in the same directory as your component and give this a try:

import data from './data.json'

export default {
  created () {
    for (const item of data[0]['file']) {
      console.log(`
        Name: ${item.name}
        Type: ${item.type}
        Size: ${item.filesize}
        Dimensions: ${item.dimension[0].width}x${item.dimension[0].height}
      `)
    }
  }
}

Upon loading the page, you will find information from your JSON file displaying in the console.

Answer 3

Answer №2

    <script>
  import MainLayout from '../layouts/Main.vue'
  import json from '.././json/data.json'

  export default {
    components: {
      MainLayout,
    },
  data: function(){
    return {
     myJson: json[0].file
    }
  },
  method:{

    }
  }
</script>   

 html
  <div v-for="data in myJson">
    {{ data.name }}
    {{ data.filesize}}
    {{ data.dimension[0].width}}x{{data.dimension[0].height}}
  </div>

As I applied the code above, I customized and utilized it to suit my specific requirements, and it functioned correctly.

Answer 4

    <script>
  import MainLayout from '../layouts/Main.vue'
  import json from '.././json/data.json'

  export default {
    components: {
      MainLayout,
    },
  data: function(){
    return {
     myJson: json[0].file
    }
  },
  method:{

    }
  }
</script>   

 html
  <div v-for="data in myJson">
    {{ data.name }}
    {{ data.filesize}}
    {{ data.dimension[0].width}}x{{data.dimension[0].height}}
  </div>

As I applied the code above, I customized and utilized it to suit my specific requirements, and it functioned correctly.

Navigating data in a Json array object

Answer №1

Answer №2

Similar questions

Guide to using AJAX to send a select tag value to a PHP script on the current page

"Building a dynamic form with ReactJS, Redux Form, and Material UI - Implementing an

Grab the source attribute of the <img> tag (identified by class) across numerous HTML pages

Node.js readline: SyntaxError: Unexpected token =>

Combining two sets of data into one powerful tool: ngx-charts for Angular 2

Is there a way to arrange an array based on the product or quotient of two values?

Resulting JSON output retrieved from the database

Is it possible to incorporate a new method into a JSON object?

Unable to retrieve the /socket.io/socket.io.js file in the client-side application

Ways to turn off emojis in froala editor

What is the reason behind CURLOPT_POSTFIELDS not supporting json_encode()?

Managing promises with mongoose - Best practices

I am attempting to retrieve the information entered into the textbox, search for it within my database, and display the results beneath the textbox for reference

Swap out a term in a sentence with an interactive span element in real-time

When attempting to compile at runtime without an instance, the act of creating a function constructor can lead to an

What could be the reason behind the improper display of JavaScript for ID overlay2?

Tips for implementing fetch in a GET request and displaying the outcomes on the screen

Do developers typically define all flux action types within a constants object as a common programming practice?

Encountering issues with Vue SVGs post updating vue-cli and vue-svg-loader

Navigating a path and executing unique functions based on varying URLs: A guide