What is the best way to showcase JSON keys in Vue.js?

Question

What is the best way to showcase JSON keys in Vue.js?

I have a JSON structure that resembles the following:

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

When accessing the data in my Vue component, I use the following code:

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

How can I access just the name of "keyIWant" - the key, not the value (42)?

UPDATE: I am able to display the relevant JSON by using

{{dataVue.relevantArray}}

However, this outputs the JSON in the format:

[ { "relevantArray": keyIwant } ]

and I am struggling to return just the relevantArray on its own. Check out the CodeSandbox example for more details:

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

javascript json vue.js

Answer 1

Answer №1

Check out this helpful code snippet: https://codesandbox.io/s/mystifying-brook-42m3x

Essentially, with the v-for directive, you can iterate through any object as key-value pairs.

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

This piece of code will display output like:

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

Answer 2

Check out this helpful code snippet: https://codesandbox.io/s/mystifying-brook-42m3x

Essentially, with the v-for directive, you can iterate through any object as key-value pairs.

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

This piece of code will display output like:

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

Answer 3

Answer №2

Although Arief's response didn't resolve the issue, I decided to tinker with it and ultimately discovered my own 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>

The above code successfully produced the desired output for me. Despite this, I will mark Arief's suggestion as the accepted answer since it ultimately led me to my solution.

If anyone has insights into why my version was necessary, I would greatly appreciate the explanation.

Many thanks to everyone who contributed!!

Answer 4

Although Arief's response didn't resolve the issue, I decided to tinker with it and ultimately discovered my own 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>

The above code successfully produced the desired output for me. Despite this, I will mark Arief's suggestion as the accepted answer since it ultimately led me to my solution.

If anyone has insights into why my version was necessary, I would greatly appreciate the explanation.

Many thanks to everyone who contributed!!

What is the best way to showcase JSON keys in Vue.js?

Answer №1

Answer №2

Similar questions

Automatically adjusting the height of an iFrame using jQuery

Tips for efficiently storing a large JSON object in a session storage?

Attempting to resolve the Bootstrap issue, currently in search of a suitable solution

How can I implement a division animation with Javascript upon clicking a hyperlink?

Creating tailored pages in Nuxt.js is key for a successful website

What is the optimal way to develop an npm module with a predefined name?

Sending form input values to JavaScript

Conceal all table rows with the exception of the row that has been clicked

Apply a see-through overlay onto the YouTube player and prevent the use of the right-click function

Once the submission is made, the website will automatically refresh

Retrieve a distinct property of an element from an array of objects fetched from an API using Vue 2

Retrieve the input field's value with Selenium, verify its accuracy, and proceed to log a message to the console

Looking to set a cursor style on a table row with JavaScript?

Empty area beneath the body in Chrome Device Mode

Creating an HTML form to collect user data and then automatically saving it to an Excel file stored in a shared Dropbox account

How to utilize a parameter value as the name of an array in Jquery

Is there a restriction on the number of strings allowed in minimist?

Encountering a frustrating internal server error 500 when attempting to insert values from JavaScript into SQL Server within Visual Studio

Ways to organize extracted JavaScript information from objects based on a nested object attribute

NodeJS instructs open(html) to execute first before any other code is executed