[Vuejs]-How to display JSON keys in Vue.js?

by

3👍

✅

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
👤Arief Darmawan

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

👤Nivyan

Leave a comment