Json Array object access

Question

I want some help in getting data form json array file is in the 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 want to access only the data with some specific id and i cannot access it using the syntax i am using

edit Json file

There's no such a thing as "json array". You either have a JSON datastring or JS array. What the syntax you've tried looks like? — Teemu
– Teemu, Commented Aug 9, 2017 at 12:18
You are just parsing your json response, where are you trying to access? — Thalaivar
– Thalaivar, Commented Aug 9, 2017 at 12:19
You don't have an id property on this json, therefore can't access it. Do you want to check for the name property? — Antony
– Antony, Commented Aug 9, 2017 at 12:35

Badacadabra · Accepted Answer · 2017-08-09 13:11:31Z

1

Apparently, you do not even need JSON.parse. It seems to work without it... Put your JSON file in the same directory as your component and try this:

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}
      `)
    }
  }
}

You should see information from your JSON file in your console when the page loads.

answered Aug 9, 2017 at 13:11

Badacadabra

8,5357 gold badges33 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Haroon Aslam · Accepted Answer · 2017-08-09 13:33:31Z

0

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

using the above code i utilized and used to implemented according to my needs and it worked

answered Aug 9, 2017 at 13:33

Haroon Aslam

1,6534 gold badges13 silver badges20 bronze badges

Collectives™ on Stack Overflow

Json Array object access

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related