5
votes

comment obtenir des données à partir d'un fichier JSON dans Vue.js?

J'ai le fichier JSON 'modified_data.json' qui a cette structure.

{
"data": [
    [
        {
           "account_id": "  "
           "account_name": "   "
        },
        {
           "account_id": "  "
           "account_name": "   "
        },          
        {
           "account_id": "  "
           "account_name": "   "
        },          
        {
           "account_id": "  "
           "account_name": "   "
        }
     ],
     [
        {
           "account_id": "  "
           "account_name": "   "
        },
        {
           "account_id": "  "
           "account_name": "   "
        },
        {
           "account_id": "  "
           "account_name": "   "
        }
     ],
     [
        {
           "account_id": "  "
           "account_name": "   "
        },
        {
           "account_id": "  "
           "account_name": "   "
        },
        {
           "account_id": "  "
           "account_name": "   "
        }
      ]
   ]
}

Je veux obtenir le nom de compte du premier objet de chaque tableau ...

Quelqu'un peut me donner une solution ??

Maintenant que j'utilise Vue.js pour l'afficher, je pourrais obtenir chaque donnée avec python, mais Vue.js ne me connaît pas encore ... Veuillez m'aider :)

javascript json vue.js

1 commentaires

Salut Yohan, bienvenue sur StackOverflow! Pouvez-vous commencer par ajouter ce que vous avez essayé? Je veux obtenir le nom de compte du premier objet de chaque tableau ressemble plus à une question Javascript.

3 Réponses :

3
votes

Eh bien, vous devrez ajouter le code que vous avez écrit pour Vue

Si vous êtes dans une application vue, vous pouvez faire quelque chose comme ça

ObjName :
{
"data": [
    [
        {
           "account_id": "  "
           "account_name": "   "
        }

et si vous l'écrivez dans une page html. vous pouvez le faire en 2 étapes.

La première consiste à ajouter le lien de fichier en tant que script

var ele = new Vue({
     el : "#YourElement", 
    data : ObjName
});

puis dans la section script vue, vous pouvez l'assigner à l'objet de données.

<script src="../file.json"></script>

"ObjName" est un nom de l'objet json dans le fichier.

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

1 commentaires

Merci pour la réponse :) mais je n'ai pas ObjName pour mon objet json..Je veux obtenir "account_name" du premier objet de chaque tableau. Y a-t-il une solution pour cela?

2
votes

Vous pouvez utiliser une propriété calculée qui prendrait de manière réactive account_name propriété du premier objet de chaque tableau:

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <ul>
    <li v-for="name in firstAccountNames">
      {{ name }}
    </li>
  </ul>
</div>
const data = {
  "data": [
    [
      {
        "account_id": "11",
        "account_name": "name11"
      },
      {
        "account_id": "12",
        "account_name": "name12"
      },
      {
        "account_id": "13",
        "account_name": "name13"
      },
      {
        "account_id": "14",
        "account_name": "name14"
      }
    ],
    [
      {
        "account_id": "21",
        "account_name": "name21"
      },
      {
        "account_id": "22",
        "account_name": "name22"
      },
      {
        "account_id": "23",
        "account_name": "name23"
      }
    ],
    [
      {
        "account_id": "31",
        "account_name": "name31"
      },
      {
        "account_id": "32",
        "account_name": "name32"
      },
      {
        "account_id": "33",
        "account_name": "name33"
      }
    ]
  ]
}


new Vue({
  el: '#demo',
  data() {
    return {
      data: data.data
    }
  },
  computed: {
    firstAccountNames() {
      return this.data.map(dataSet => dataSet[0].account_name)
    }
  }
})

3 commentaires

Merci beaucoup @antoku !! Je suis si heureux de l'avoir !!

encore une question. Si je mets mes données json dans le script, cela fonctionne .. Mais quand j'essaye de lire le fichier json (même contenu), la console dit toujours un message d'erreur. Firefox: SyntaxError: JSON.parse: caractère inattendu à la ligne 1 colonne 1 des données JSON Chrome: Uncaught SyntaxError: jeton inattendu m dans JSON à la position 0 à JSON.parse () Que dois-je faire pour charger le fichier json avec succès ?

@YohanChoi Probablement votre outil de création d'application Web (webpack je suppose), convertit automatiquement JSON en un objet JavaScript. Essayez de supprimer l'analyse manuelle ( JSON.parse ) et utilisez simplement les données importées comme un objet JavaScript.

1
votes

Je l'ai résolu! voici le code!

var app = new Vue({
el: '#app',
data: {
    datas: []
},

computed: {
    getAccountNames() {
        return this.datas.map(dataSet => dataSet[0].account_name)
    }
},

mounted() {
    var self = this
    $.getJSON("modified_data.json", function(json_data) {
        self.datas = json_data.data
    })
  }
})

Bref, une autre question ... quelle est la différence entre «ceci» et «soi»? "self" est égal à "this" je pense mais quand j'utilise simplement "this", il y a une erreur mais "self" fonctionne bien ... n'importe qui peut me dire la différence?

1 commentaires

Concernant ceci et self - le contexte de "this" change dans le rappel de $ .getJSON, et donc "self" est juste une variable nommée personnalisée pour capturer la référence de "this" à utiliser plus tard, avant qu'elle ne soit remplacée dans le rappel le contexte.