Разбор вложенного JSON с Vuejs

Question

У меня довольно сложный JSON-файл (вывод из механизма механизма поиска), который я хочу проанализировать с помощью 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..."
            }
    ]

Вот как я анализирую JSON, используя 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>

Но как мне разобрать "хиты "под" top_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>