how do I access nested json data with vuejs>-CodePudding

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>

CodePudding user response：

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!

CodePudding user response：

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