Question

我有具有此结构的'modified_data.json'JSON文件。

{
"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": "   "
        }
      ]
   ]
}

我想从每个数组中获取第一个对象的account_name ...

有人可以给我解决方案吗？

现在我正在使用Vue.js来显示它，我可以使用python获取每个数据，但是Vue.js还不熟悉我...请帮助我：）

Answer 1

好吧，您将必须添加为Vue编写的代码

如果您使用的是Vue应用，则可以执行以下操作

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

，如果您将其写在html页面中。您可以分两步完成。

第一个方法是将文件链接添加为脚本

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

然后在vue脚本部分中，可以将其分配给数据对象。

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

“ ObjName”是文件中json对象的名称。

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

Answer 2

您可以使用一个computed property来具有每个数组第一个对象的account_name属性：

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

我解决了！这是代码！

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

无论如何，另一个问题... “ this”和“ self”有什么区别？我认为“ self”等于“ this”，但是当我只使用“ this”时，它有错误，但是“ self”效果很好...有人可以告诉我区别吗？

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

3 个答案: