Zugriff auf externe JSON-Dateiobjekte in der vue.js-App

73

Wie man in der vue.js App auf JSON- Objekte zugreift Ich bin neu in diesem Bereich

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

Die JSON-Datei wird geladen und jetzt muss ich auf die darin enthaltenen Objekte zugreifen

Haroon Aslam
quelle
3
Möchten Sie die Daten von JSON zu HTML-Vorlage anzeigen
Vamsi Krishna
Ja, ich möchte im HTML-Format anzeigen
Haroon Aslam
Verwenden Sie ES6? Wenn ja, funktioniert "json aus './json/data.json importieren"
BEJGAM SHIVA PRASAD
mit v-for-Direktive
Haroon Aslam
Nein, ich benutze es6 nicht, aber ich habe von JSON importiert und jetzt muss ich die JSON-Daten anzeigen
Haroon Aslam

Antworten:

119

Weisen Sie den Import einfach einer Dateneigenschaft zu

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

Durchlaufen Sie dann die myJsonEigenschaft in Ihrer Vorlage mitv-for

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

HINWEIS

Wenn das zu importierende Objekt statisch ist, sich also nicht ändert, ist die Zuweisung zu einer Dateneigenschaft nicht sinnvoll, da es nicht reaktiv sein muss.

Vue konvertiert alle Eigenschaften in der dataOption in Getter / Setter, damit die Eigenschaften reaktiv sind. Es wäre also unnötig und aufwendig, Getter / Setter für Daten einzurichten, die sich nicht ändern werden. Siehe Reaktivität im Detail .

So können Sie eine benutzerdefinierte Option wie folgt erstellen:

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

Durchlaufen Sie dann die benutzerdefinierte Option in Ihrer Vorlage mit $options:

<template>
        <div>
            <div v-for="data in $options.myJson">{{data}}</div>
        </div>
    </template>
Vamsi Krishna
quelle
@ HaroonAslam wie willst du es dann?
Vamsi Krishna
@ HaroonAslam zeigen Ihre JSON-Daten, so dass es einfacher wäre, Ihnen zu helfen
Vamsi Krishna
1
Sehr detailliert über den $optionsAnsatz, den ich created()für nicht reaktive Daten verwendet hatte - das ist besser
Kong
Was ist Root Dir?
Mathtick
12

Wenn Ihre Datei so aussieht:

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

Du kannst tun:

import json from './json/data.json';
// ....
json.forEach(x => { console.log(x.firstname, x.lastname); });
smarber
quelle
es ist in Form von mehreren Arrays
Haroon Aslam
Es zeigt die Daten, aber in Zeichenfolgenform nicht zugänglich mit Indexwert, aber ich kann sie in der Konsole mit Index
zugreifen
@HaroonAslam Sie sollten Ihre Frage dahingehend aktualisieren, wie Sie versucht haben, das json-Objekt zu verwenden.
Smarber
0

Ich habe kürzlich begonnen, an einem Projekt mit Vue JS, JSON Schema zu arbeiten. Ich versuche, über eine JSON-Schemadatei in der Vue-App auf verschachtelte JSON-Objekte zuzugreifen. Ich habe den folgenden Code ausprobiert und kann jetzt verschiedene JSON-Objekte in verschiedene Vue-Vorlagen-Tags laden. Fügen Sie im Skript-Tag den folgenden Code hinzu

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

Jetzt können Sie wie folgt auf die JsonObject1,2-Namen im Datenabschnitt des Export-Standardteils zugreifen:

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

Jetzt können Sie die Daten des Schemas schema1 gemäß Ihren Anforderungen in die Vue-Vorlage laden. Siehe folgenden Code zum Beispiel:

      <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 ist der lokale Variablenname für die @ formSchema / native Bibliothek. Ich habe die Daten verschiedener JSON-Objekte über Formulare in verschiedenen CSS-Registerkarten implementiert.

Ich hoffe diese Antwort hilft jemandem. Ich kann helfen, wenn es irgendwelche Fragen gibt.

Sivaram Annies
quelle