how do I access nested json data with vuejs>

Question

I would like to create a table and populate it with data using vue.js and v-for but I don`t know how to access the nested JSON file.

If I simply call {{items}} the data is presented but there is no way i manage to filter it

here is my code:

    <template>
  <div id="app">
      <thead>
  
      </thead>
      <tbody>
<table>
      <thead>
        <tr>
          <th>id</th>
          <th>press</th>
          <th>date</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in items" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.results.downloadable.document_en }}</td>
          <td>{{ item.}}</td>
 
        </tr>
      </tbody>

    </table>
  
      </tbody>

 
  </div>

</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      items:[]
    }
  },


  created() {
    axios.get(`https://zbeta2.mykuwaitnet.net/backend/en/api/v2/media-center/press-release/?page_size=61&type=5`)


    .then(response => {
     
      this.items = response.data
    })
    
  }
}

</script>

Check your response, it's all in front of your eyes. It's response.data.results that is an array. — Estus Flask
– Estus Flask, Commented Oct 19, 2021 at 8:37

Frnak · Accepted Answer · 2021-10-19 10:01:02Z

2

Based on the result of your endpoint you should change your assignment of items to

.then(response => {
  this.items = response.data.results
})

And your loop to

<tr v-for="item in items" :key="item.id">
  <td>{{ item.id }}</td>
  <!-- as downloadable is an array, see update below etc. -->
</tr>

But be aware - if you assign the data.results directly you will lose the so called "paginator" information that also contains the link to load more.

So another option would be to assign

this.items = response.data

HOWEVER, be aware that you should then define items in your data as null or empty object (not array, as this would be false)

And then change your loop to something like this (it's now looping in item.results)

<tbody v-if="items && items.results">
 <tr v-for="item in items.results" :key="item.id">
  <td>{{ item.id }}</td>
  <!-- as downloadable is an array - see Update below etc. -->
 </tr>
</tbody>

This approach would allow you to show the total count via items.count for example

UPDATE:

Actually downloadable is an array! I can only assume what you actually want to achieve to here. I've created a jsfiddle to showcase it: https://jsfiddle.net/v73xe4m5/1/

The main thing you probably want to do is filter the entry to only show entries where downloadable contains a document_en.

      <tr v-for="item in items.results" :key="item.id">
        <td>{{ item.id }}</td>
        <td>
          <div class="downloads">
          <span
            v-for="downloadable in item.downloadable.filter(d => !!d.document_en)"
            :key="downloadable.id"
           >{{ downloadable.document_en.file }}</span>
           </div>
        </td>
      </tr>

I'm not familiar with that endpoint / api - so I don't know if it might return more than one relevant document per item.

As you can see I used a second v-for loop inside the <td> in order to go through all downloadable entries. Before doing so, they are filtered, so only entries that actually have a document_en value are shown. You can adapt this as you want.

Hope that helps!

edited Oct 19, 2021 at 10:01

answered Oct 19, 2021 at 8:48

Frnak

6,8626 gold badges38 silver badges74 bronze badges

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

6 Comments

Balazs Kelemen Over a year ago

thanks a lot Frnak, not it is crystal clear, except the item.downloadable.document_en does not appear, I checked and there is no type, do I need to do another v-for nested inside?

Frnak Over a year ago

Oh sorry - I missed that one. It depends on what you want to achieve. For a first draft you should try item.downloadable.document_en.file. Because document_en is an object itself, you need to specify which part of it you want to display. Typically you would probably want a link in your case like <a href="{{item.downloadable.document_en.file}}" target="_blank">Download</a>

Balazs Kelemen Over a year ago

wow, you went way ahead, I just would like to simply have a table with the id and the link for the artivels (document_en) but when do the above code even the id disappears and i got an empyt table.. i am sorry for yout trouble but this drives me mad for hours now

Frnak Over a year ago

You're right! I found a big mistake - give me a few minutes, I'll update my answer above

Frnak Over a year ago

Added the update!

|

Akash NO · Accepted Answer · 2021-10-19 08:52:16Z

1

this is the correct form to get the array from the json and save to this.items

 this.items = response.data.results

I encourage you to always console.log(response) after api call , and access data according to the structure of the api results

answered Oct 19, 2021 at 8:52

Akash NO

3264 silver badges12 bronze badges

1 Comment

Frnak Over a year ago

You should also mention the changes required in the template / html. Also I'd encourage to actually use debugger instead of console.log.

Collectives™ on Stack Overflow

how do I access nested json data with vuejs>

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related