How to acces 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

User · Answer

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.

User · Answer

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   gt    console log x firstname  x lastname

User · Answer

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

User · Answer

Just assign the import to  a data property    lt script gt        import json from    json data json        export default            data                  return                    myJson  json                                      lt  script gt    then loop through the myJson property in your template using v-for   lt template gt       lt div gt           lt div v-for  data in myJson  gt   data   lt  div gt       lt  div gt   lt  template gt    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    lt script gt            import MY JSON from    json data json            export default                  custom option named myJson                  myJson  MY JSON                  lt  script gt    then loop through the custom option in your template using  options    lt template gt           lt div gt               lt div v-for  data in  options myJson  gt   data   lt  div gt           lt  div gt       lt  template gt

[javascript] How to acces external json file objects in vue.js app

Examples related to javascript

Examples related to vue.js

Examples related to vuejs2