使用 Vuejs 解析嵌套的 JSON

Question

我有一个相当复杂的 JSON 文件（elasticsearch 引擎的输出），我希望使用 Vue 对其进行解析。我设法解析 JSON 并访问其中的不同值，但无法弄清楚 如何解析 JSON 中找到的数组 - 有什么建议吗？

示例 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..."
            }
    ]

这是我使用 vue 解析 JSON 的方式：

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

但是如何解析“top_hits”下的“hits”呢？？

谢谢！！

Answer 1

从计算属性开始以简化输入数据。

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>