How to display JSON keys in Vue.js?

Question

I have some JSON which looks like this:

    {
    "data": [
        {
            "name": "someName",
            "link": "http://somelink.com",
            ],
            "relevantArray": [
                {
                    "keyIWant": 42
                }
            ],
            ...
     }

and I get the data like this:

<li v-for="(dataVue, index) in dataList.feat" :key="index">
          {{ dataVue.someName }}
          {{ dataVue.link}}
          {{ dataVue.??? }}
</li>

what do I write to return keyIWant - the name of the key, not the value (42)??

EDIT: I can output the JSON by writing

{{dataVue.relevantArray}}

But this returns the JSON like this:

[ { "relevantArray": keyIwant } ]

and I just can't get the relevantArray to return by itself. CodeSandbox:

https://codesandbox.io/s/festive-wu-41kyz?file=/src/App.vue

Have you considered searching for the answer before posting? Have you checked what your index variable holds? — pishpish
– pishpish, Commented May 8, 2020 at 14:46
Uh, how do I input that in Vue.js? {{ Object.keys(featData.prerequisite[0])[0] }} is invalid assuming you mean keys = key, but this breaks Vue.js — Nivyan
– Nivyan, Commented May 8, 2020 at 14:50

Arief Darmawan · Accepted Answer · 2020-05-08 15:55:10Z

5

Try this https://codesandbox.io/s/mystifying-brook-42m3x

Basically you can iterate any object as key-value using v-for

<li v-for="(vueData, index) in vueData.data" :key="index">
  {{ vueData.someName }}
  {{ vueData.link }}
   <span
     v-for="(r,ri) in vueData.relevantArray[0]"
     :key="ri"
     >{{ ri }} ==> {{ r }}
   </span>
</li>

will give you something like this

someName http://somelink.com keyIWant ==> 42

answered May 8, 2020 at 15:55

Arief Darmawan

3291 silver badge2 bronze badges

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

1 Comment

Nivyan Over a year ago

That's almost perfect(!!!!), but in case I got multiple in relevantArray, do I need to wrap it around an additonal v-for?

Nivyan · Accepted Answer · 2020-05-08 16:39:08Z

0

Arief' answer didn't solve the problem for some reason, but I played around with it and found the following solution:

<span
     v-for="(r,ri) in vueData.relevantArray[0]" :key="ri">
      {{ ri }} ==> {{ r }}
         <span v-for="(arrayData, index) in r" :key="index">
            {{index}}
         </span>
   </span>

This makes the output I wanted, doing the above solutions outputted the array in my case. I'll mark Arief' solution as the answer, as it lead me to my solution.

If anyone want to tell me why I had to do my version, I'd be very grateful.

Thanks everyone!!

answered May 8, 2020 at 16:39

Nivyan

12915 bronze badges

Collectives™ on Stack Overflow

How to display JSON keys in Vue.js?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related