如何从 Vue.js 中的 JSON 文件中获取数据？

Question

I have 'modified_data.json' JSON file which has this 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": "   "
        }
      ]
   ]
}

I want to get first object's account_name from each array...

Does anyone can give me a solution??

Now I'm using Vue.js to display it, I could get each data with python, but Vue.js is not familiar with me yet... Kindly help me :)

Answer 1

Well, you will have to add the code that you have written for Vue

If you are in a vue app, you can do something like this

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

and if you are writting it inside an html page. you can do it in 2 steps.

1st is to add the file link as a script

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

then in the vue script section you can assign it to the data object.

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

"ObjName" is a name of the json object in the file.

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

Answer 2

You can use a computed property that would reactively take account_name property of the first object of every array:

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

 <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>

Answer 3

I solved it! here is 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
    })
  }
})

Anyway, another question... what is the difference between "this" and "self" ? "self" is equal to "this" I think but when I just use "this", it has error but "self" works well...anyone can tell me the difference?