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

Issues with Cordova and JQuery ajax functionality not operating as expected

Issues with HTTPS in Puppeteer and VUE JS

Custom Component in React Bootstrap with Overflowing Column

Guide on embedding PHP/MYSQL array into an independent JavaScript document

Scrolling with animation

Verifying user login on NodeJS through connection from an IIS-hosted website

Stop images from flipping while CSS animation is in progress

Using Angular and nativeElement.style: how to alter cursor appearance when clicked and pressed (down state)

ACE.js enhances website security through Content Security Policy

Retrieve the component from a JSON dataset

The username index is not defined in the file path C:xampphtdocsAppX1signin.php on line 6

Unable to be implemented using inline-block styling

Challenges with saving a segment of an AJAX GET response (in JSON) as a string variable

Import information from a SqlServer Database into a jQuery Full Calendar utilizing the capabilities of Codeigniter3

The functionality of Bootstrap popover is not functioning properly

Encountering syntax errors in GraphQL

Send data in JSON format from an AngularJS client to an Express server

Attempting to display JSON data retrieved from a decoded base64 string in Python

Is it practical to use JSON.parse for processing large datasets exceeding 50 megabytes in size?

Extracting web search result URLs using Puppeteer