Iterating through nested objects with v-for?

Question

I have issues iterating through the following json file with v-for and accessing the "AVG(ratings.rating_int)" property.

--json begin--

ratings {

    "R1":[
            {"AVG(ratings.rating_int)":"5.3333"}
         ],

    "R2":[
            {"AVG(ratings.rating_int)":"5.3333"}
         ],

    "F1":[
            {"AVG(ratings.rating_int)":null}
         ],

    "R3":[
            {"AVG(ratings.rating_int)":"5.3333"}
         ],

    "F2":[
            {"AVG(ratings.rating_int)":null}
         ]
        }

--json end--

The vue-js code i'm using is as follows:

                        <div v-for="(criteria, index) in ratings">
                            {{criteria}} - {{index}}
                            <div v-for="(rating, index) in criteria">
                                <p>{{rating}}</p>
                                <p>{{index}} - {{rating}}</p>
                            </div>
                        </div>

My current output is:

--output beginn--

[ { "AVG(ratings.rating_int)": "5.3333" } ] - R1

{ "AVG(ratings.rating_int)": "5.3333" }

0 - { "AVG(ratings.rating_int)": "5.3333" }

[ { "AVG(ratings.rating_int)": "5.3333" } ] - R2

{ "AVG(ratings.rating_int)": "5.3333" }

0 - { "AVG(ratings.rating_int)": "5.3333" }

[ { "AVG(ratings.rating_int)": null } ] - F1

{ "AVG(ratings.rating_int)": null }

0 - { "AVG(ratings.rating_int)": null }

[ { "AVG(ratings.rating_int)": "5.3333" } ] - R3

{ "AVG(ratings.rating_int)": "5.3333" }

0 - { "AVG(ratings.rating_int)": "5.3333" }

[ { "AVG(ratings.rating_int)": null } ] - F2

{ "AVG(ratings.rating_int)": null }

0 - { "AVG(ratings.rating_int)": null }

--output end --

Now in the second for loop i would like to access the "AVG(ratings.rating_int)" property with: {{rating.AVG(ratings.rating_int)}} but when i do try that, it stops showing anything. Well, ideally i would like to do all of it in one loop but I'm not sure if thats possible.

Answer 1

Try to do it using bracket notation. {{rating["AVG(ratings.rating_int)"]}}