json - Parsing nested JSON with Vuejs
问题描述
I have a rather complex JSON file (output of elasticsearch engine) which I wish to parse using Vue. I managed to parse the JSON and access different values in it, but could not figure out how to parse an array found within the JSON - any suggestions?
Example JSON:
{
"hits": [
{
"_index": "people",
"_type": "lawyer",
"_score": 20.591383,
"_source": {
"name": "Miller J W",
"address": "Harvard Law School",
"person_id": 23615,
"keywords": [
"Human",
"Person",
"Male"
]
},
"inner_hits": {
"top_hits": {
"hits": {
"total": 7,
"max_score": 20.591383,
"hits": [
{
"_index": "contracts",
"_type": "contract",
"_id": "45386",
"_score": 20.591383,
"_source": {
"pub_year": 2013,
"keywords": [
"Contract",
"SPA contract",
"legal doc",
]
}
},
{
"_index": "contracts",
"_type": "contract",
"_id": "45387",
"_score": 19.691383,
"_source": {
"pub_year": 2012,
"keywords": [
"Contract",
"CLA contract",
"Pro bono",
]
}
}
]
}
}
}
},
{
"pesron #2 etc..."
}
]
This is how I parse the JSON using vue:
<ol>
<li v-for="person in people">
{{ person._source.name }}
{{ person._source.address }}
{{ person._source.address_person_id }}
{{ person.inner_hits.top_hits.hits.total }}
</li>
But how do I parse the "hits" under "top_hits"??
Thanks!!
解决方案
从计算属性开始以简化输入数据。
computed: {
people() {
let people = []
this.json.hits.forEach((item) => {
let hits = item.inner_hits.top_hits.hits
people.push({
_source: item._source,
hits: hits,
})
})
return people
}
}
您的模板应如下所示:
<ul>
<li v-for="person in people">
{{ person._source.name }}<br>
{{ person._source.address }}<br>
{{ person._source.address_person_id }}<br>
{{ person.hits.total }}<br>
<ul>
<li v-for="hit in person.hits.hits">
{{ hit._source.pub_year }}
[...]
</li>
</ul>
</li>
</ul>
推荐阅读
- module - omnet 如何初始化模块和模型?
- r - How to plot bar chart grouped by secondary variable in R?
- laravel - 将 Laravel 5.4 Web App 添加到移动设备主屏幕
- javascript - 更改或覆盖 JavaScript 函数
- mongodb - 如何使用多个索引将数据导入mongodb
- javascript - 在 onKeyboardShow 函数内部更改值时,Ionic 3 输入集未触发
- shell - 切割的管道输出
- python - Python:努力掩盖数据集的一部分
- javascript - 仅在一个组件中调用方法
- sql - 使用多个左连接将行连接成一个