Axios return of nested JSON file-CodePudding

I am trying to return the 'title' from my JSON file but I can't seem to get the correct path. At the moment 'resultPacket' is returning info but when I try and get into the 'results - metaData' it's not returning anything.

Can someone help?

VueJS axios call section

<script>
import axios from "axios";
export default {
  data() {
    return {
      results: [],
      title: "",   
    
    };
  },
  props: {
    result: Object,
  },

mounted() {
    axios
      .get(
        "**myURL is here - I cant share**"
      )   
      .then((response) => {
        **this.results = response.data.response.resultPacket;**        
      })
      .catch((error) => {
        console.log(error);
        this.errored = true;
      })
      .finally(() => (this.loading = false));
  },
};

JSON

response": {
    "resultPacket": {      
      "querySystemRaw": null,       
      "results": [
        {
          "rank": 1,
          "score": 1000, 
          "metaData": {           
            "title": "This is the title",

CodePudding user response：

Looks like you are not fetching the nested property properly from the response you are getting from an API.

Also, As results might contain any number of objects. Hence, you can use loop to iterate from all the result objects.

Working Demo :

const data = {
    "response": {
        "resultPacket": {
            "results": [{
                "rank": 1,
                "score": 1000,
                "metaData": {
                    "title": "This is the 1st title"
                }
            }, {
                "rank": 2,
                "score": 1000,
                "metaData": {
                    "title": "This is the 2nd title"
                }
            }, {
                "rank": 3,
                "score": 1000,
                "metaData": {
                    "title": "This is the 3rd title"
                }
            }]
        }
    }
};

new Vue({
  el: '#app',
  data() {
    return {
      results: []
    }
  },
  mounted() {
    this.results = data.response.resultPacket.results;
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js"></script>

  <div id="app">
    <ul>
      <li v-for="(item, index) in results" :key="index">
        {{ item.metaData.title }}
      </li>
    </ul>
  </div>