What is the best way to access nested JSON data in Vue.js code demonstrated here?

Question

What is the best way to access nested JSON data in Vue.js code demonstrated here?

How can I properly access the nested JSON data for stage.name provided in the example below?

As shown in the template, my attempt to retrieve the stage name is not working.

Using vue.js

created() {
    url="http://{{ api_endpoint }}"
    fetch(url)
        .then(response => response.json())
        .then(body => {
            for(i=0; i<body.length; i++){
                this.job_execs.push({
                    'name': JSON.stringify(body[i].job.name),
                    'build_id': JSON.stringify(body[i].build_num),
                    'env': JSON.stringify(body[i].job.env),
                })
            }
    })



template: `
      <li v-for="item in this.job_execs">
        [[ item.build_num ]]
        <li v-if="stage in item.job">
          [[ stage.name ]]
        </li>
      </li>
      </ul>

An example API response:

[
    {
        "build_num": 12,
        "job": {
            "name": "test-job",
            "env": "DEV",
            "tool": {
                "env": "DEV",
            },
            "product": {
                "name": "vuejs"
            },
            "platform": {
                "name": "none"
            },
            "stage": [
                {
                    "name": "stage1"
                },
                {
                    "name": "stage2"
                },
                {
                    "name": "stage3"
                },
            ]
        },
]

I think I may need to create a new list in the created hook and start pushing the stage names into it. However, I am concerned about ending up with two separate lists. I'm uncertain about the best approach to take in this scenario.

javascript json vue.js

Answer 1

Answer №1

If you wish to generate an <li> element for each stage, the code would look like this:

<li v-for="stage in item.job.stage">
  [[ stage.name ]]
</li>

Remember to use v-for, not v-if.

Think of v-for as a template equivalent of the following JavaScript snippet:

item.job.stage.forEach(stage => {
    // ...
})

If you only need the first stage, you can simplify it like so:

<li>
  [[ item.job.stage[0].name ]]
</li>

If you want to create a second list based on certain conditions, consider using a computed property instead of the created hook. This will help organize your data and simplify your template.

Update:

The complete structure would be:

<ul>
  <li v-for="item in job_execs">
    [[ item.build_num ]]
    <ul>
      <li v-for="stage in item.job.stage">
        [[ stage.name ]]
      </li>
    </ul>
  </li>
</ul>

Avoid unnecessary JSON.stringify operations in your JavaScript code.

fetch(url)
    .then(response => response.json())
    .then(body => {
        this.job_execs = body
    })

You can also rename keys like build_num to

build_id</code easily using methods like <code>map

:

fetch(url)
    .then(response => response.json())
    .then(body => {
        this.job_execs = body.map(item => {
            return {
                build_id: item.build_num,
                job: item.job
            }
        })
    })

Only perform these transformations if necessary, otherwise keep it simple with this.job_execs = body.

Answer 2

If you wish to generate an <li> element for each stage, the code would look like this:

<li v-for="stage in item.job.stage">
  [[ stage.name ]]
</li>

Remember to use v-for, not v-if.

Think of v-for as a template equivalent of the following JavaScript snippet:

item.job.stage.forEach(stage => {
    // ...
})

If you only need the first stage, you can simplify it like so:

<li>
  [[ item.job.stage[0].name ]]
</li>

If you want to create a second list based on certain conditions, consider using a computed property instead of the created hook. This will help organize your data and simplify your template.

Update:

The complete structure would be:

<ul>
  <li v-for="item in job_execs">
    [[ item.build_num ]]
    <ul>
      <li v-for="stage in item.job.stage">
        [[ stage.name ]]
      </li>
    </ul>
  </li>
</ul>

Avoid unnecessary JSON.stringify operations in your JavaScript code.

fetch(url)
    .then(response => response.json())
    .then(body => {
        this.job_execs = body
    })

You can also rename keys like build_num to

build_id</code easily using methods like <code>map

:

fetch(url)
    .then(response => response.json())
    .then(body => {
        this.job_execs = body.map(item => {
            return {
                build_id: item.build_num,
                job: item.job
            }
        })
    })

Only perform these transformations if necessary, otherwise keep it simple with this.job_execs = body.

What is the best way to access nested JSON data in Vue.js code demonstrated here?

Answer №1

Similar questions

Creating a CSS animation to slide a div outside of its container is

Needing to utilize the provide() function individually for every service in RC4

Ensure accurate detection of invalid values for SVG Elements in React using jest testing framework

Navigating the world of cryptocurrency can be daunting, but with the right tools

The two divs are positioned on top of one another, with the link in the bottom div being unclickable

Understanding the getJSON MethodExplaining how

javascript mysql and php clash when it comes to loading

Attempting to place the search bar within the navigation bar

Having trouble with jQuery UI draggable when using jQueryUI version 1.12.1?

Convert integer data to JSON format using PHPMyadmin

In the realm of JavaScript and TypeScript, the task at hand is to locate '*' , '**' and '`' within a string and substitute them with <strong></strong> and <code></code>

Decoding JSON into Java using the Klout API

Event fails to emit when used in conjunction with router-link

Lamenting the Perils of Losing AngularJS Rootscope Data upon Refresh

How to Use Jquery to Retrieve the Selected Option Value and Append a Parameter

Text input fields within a grid do not adjust to different screen sizes when placed within a tab

Generating variables dynamically within a React Native component

The MDL layout spacer is pushing the content to the following line

An Effective Solution for Resolving the 'Use JsonReader.setLenient(true) to Accept Invalid JSON at Line 1 Column 1 Path $' Issue in Android Studio

What is causing Vue to not update a list when using props?