vuejs nested json rendering

Question

I am having to work with a json which looks like so:

 book_json={ "id": 2, "book": "Rockford mountain", "related_json": { "choice0": " The Good Friday Book", "choice1": "DRiven by Inspiration", "choice2": "Do good, be good", "choice3": "Autobiography Obama", "choice4": "None", "select0": "choice0", "select1": "None" } }

In my template, when I render:

{{book_json.book} or {{book_json.id}} # all good

However, what I would like to display is:

{{book_json.related_json.{{book_json.related_json.select0}} }}
// result: `The Good Friday Book`

i.e I would like to pick choice0 which arises from {{book_json.related_json.select0}}

I have spent a few hours trying and googleing around, but could not find a way to do this..

Any tips to solve this issue would be much appreciated..

Hmmm you are trying to get it as choose0 while it is choice0 in your json. — Mindastic
– Mindastic, Commented Dec 28, 2019 at 21:27
@Mindastic: no, it is not the case. I have now clarified it by changing the json key to make it clearer (I have called it select0 now) — John M
– John M, Commented Dec 28, 2019 at 21:29
Also, you shouldn't be doing {{book_json.related_json.{{book_json.related_json.select0}} }} but doing {{book_json.related_json[book_json.related_json.select0]}} instead. — Mindastic
– Mindastic, Commented Dec 28, 2019 at 21:32
@Mindastic: Hmm.. {{book_json.related_json[book_json.related_json.select0]}} seems interesting to try - I have a small problem however - my backend if Django, so I have custom VueJs delimiters set to [[ ]] How do I do the inner square brackets as you have mentioned? [[book_json.related_json[book_json.related_json.select0]]] - I tried it and it didnt work :( — John M
– John M, Commented Dec 28, 2019 at 21:37
If book_json is a javascript variable and you want to use it with Vue, then you should call it inside square brackets, not curly braces. [[book_json.related_json[book_json.related_json.select0]]]. — Mindastic
– Mindastic, Commented Dec 28, 2019 at 21:40

Mindastic · Accepted Answer · 2019-12-28 22:08:15Z

1

Try with:

[[ book_json.related_json[book_json.related_json.select0] ]]

answered Dec 28, 2019 at 22:08

Mindastic

4,1413 gold badges21 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

vuejs nested json rendering

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related