How to access external json file objects in vue.js app

Question

How to access JSON objects in the vue.js app I am new in this

import json from './json/data.json' 

the JSON file is loaded and now I have to access the objects within it

Answer 1

Just assign the import to a data property

<script>       import json from './json/data.json'       export default{           data(){               return{                   myJson: json               }           }       } </script> 

then loop through the myJson property in your template using v-for

<template>     <div>         <div v-for="data in myJson">{{data}}</div>     </div> </template> 

NOTE

If the object you want to import is static i.e does not change then assigning it to a data property would make no sense as it does not need to be reactive.

Vue converts all the properties in the data option to getters/setters for the properties to be reactive. So it would be unnecessary and overhead for vue to setup getters/setters for data which is not going to change. See Reactivity in depth.

So you can create a custom option as follows:

<script>           import MY_JSON from './json/data.json'           export default{               //custom option named myJson                  myJson: MY_JSON           }     </script> 

then loop through the custom option in your template using $options:

<template>         <div>             <div v-for="data in $options.myJson">{{data}}</div>         </div>     </template> 

Answer 2

If your file looks like this:

[     {         "firstname": "toto",         "lastname": "titi"     },     {         "firstname": "toto2",         "lastname": "titi2"     }, ] 

You can do:

import json from './json/data.json'; // .... json.forEach(x => { console.log(x.firstname, x.lastname); });