javascript - How to access external json file objects in vue.js app - Stack Overflow

admin管理员组

文章数量:1134246

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

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

• javascript
• vue.js
• vuejs2

Share Improve this question Follow edited Jun 1, 2021 at 13:10 Darin Kolev 3,4111313 gold badges3333 silver badges4747 bronze badges asked Aug 8, 2017 at 10:03 Haroon AslamHaroon Aslam 1,65344 gold badges1212 silver badges2020 bronze badges 5

• 3 Do you want to display the data from JSON to HTML template – Vamsi Krishna Commented Aug 8, 2017 at 10:09
• yes i want to display in html format – Haroon Aslam Commented Aug 8, 2017 at 10:13
• are you using ES6? if yes "import json from './json/data.json'" will work – BEJGAM SHIVA PRASAD Commented Aug 8, 2017 at 10:13
• using v-for directive – Haroon Aslam Commented Aug 8, 2017 at 10:13
• no i am not using es6 but i have imported by json and now i have to show the json data – Haroon Aslam Commented Aug 8, 2017 at 10:15

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 199

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>

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

Typescript projects (I have typescript in SFC vue components), need to set resolveJsonModule compiler option to true.

In tsconfig.json:

{
  "compilerOptions": {
    ...
    "resolveJsonModule": true,
    ...
  },
  ...
}

Happy coding :)

(Source https://www.typescriptlang.org/docs/handbook/compiler-options.html)

I have recently started working on a project using Vue JS, JSON Schema. I am trying to access nested JSON Objects from a JSON Schema file in the Vue app. I tried the below code and now I can load different JSON objects inside different Vue template tags. In the script tag add the below code

import  {JsonObject1name, JsonObject2name} from 'your Json file path';

Now you can access JsonObject1,2 names in data section of export default part as below:

data: () => ({ 
  
  schema: JsonObject1name,
  schema1: JsonObject2name,   
  
  model: {} 
}),

Now you can load the schema, schema1 data inside Vue template according to your requirement. See below code for example :

      <SchemaForm id="unique name representing your Json object1" class="form"  v-model="model" :schema="schema" :components="components">
      </SchemaForm>  

      <SchemaForm id="unique name representing your Json object2" class="form" v-model="model" :schema="schema1" :components="components">
      </SchemaForm>

SchemaForm is the local variable name for @formSchema/native library. I have implemented the data of different JSON objects through forms in different CSS tabs.

I hope this answer helps someone. I can help if there are any questions.

本文标签： javascriptHow to access external json file objects in vuejs appStack Overflow