Parsing nested JSON with Vuejs

Question

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

Answer 1

Start with computed property to simplify input data.

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

Your template should looks like:

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