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
-
3Do you want to display the data from JSON to HTML templateVamsi Krishna– Vamsi Krishna2017-08-08 10:09:51 +00:00Commented Aug 8, 2017 at 10:09
-
yes i want to display in html formatHaroon Aslam– Haroon Aslam2017-08-08 10:13:34 +00:00Commented Aug 8, 2017 at 10:13
-
are you using ES6? if yes "import json from './json/data.json'" will workBEJGAM SHIVA PRASAD– BEJGAM SHIVA PRASAD2017-08-08 10:13:41 +00:00Commented Aug 8, 2017 at 10:13
-
using v-for directiveHaroon Aslam– Haroon Aslam2017-08-08 10:13:49 +00:00Commented 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 dataHaroon Aslam– Haroon Aslam2017-08-08 10:15:08 +00:00Commented Aug 8, 2017 at 10:15
Add a comment
|
4 Answers
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>
7 Comments
Vamsi Krishna
@HaroonAslam then how do you want it?
Vamsi Krishna
@HaroonAslam show your json data so helping you would be easier
Haroon Aslam
Kong
Great detail on the
$options approach, I'd been using created() for non-reactive data - this is better
safetyduck
What is root dir?
|
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); });
3 Comments
Haroon Aslam
it is in multiple array form
Haroon Aslam
it shows the data but in string form not accessible using index value but i can acces them in console using index
smarber
@HaroonAslam You should update your question with how you've been trying to use the json object.
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)
Comments
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.
