Question 51798 in Javascript Question posted in
A very good W3school tutorial can be found here.

how to access nested object property from an array in vue js – Javascript

this is the json response i get in my dom

{ "resource": "services", "status": "success", "data": [ { "service_id": "0001", "service_name": "Buy Airtime", "service_type": "airtime" },  ] }

this is how my template

 <li v-for="service in responseObject">
          {{ service }}
        </li>

this is my script tag

<script>
import axios from "axios";
export default {
  data() {
    return {
      status: false,
      responseObject: {}
    };
  },
  async mounted() {
    try {
      let response = await axios.get("http://localhost:4000/api/blogs");
      this.responseObject = response.data;
    } catch (e) {
      console.log(e);
    }
  }
};
</script>

how can i display

service_id and service_name in my template

i’ve tried

service.data[0].service_name

but i’m not getting any response

Tags:

4

Answers


  1. 0

    Just do

    <li v-for="service in responseObject">
     {{ service.service_id }} - {{service.service_name}}
</li>

    since service represent one item of the array

    Login or Signup to reply.
  2. 0

    You can access the child "data" array by adding dot notation to your v-for statement ("responseObject.data")-

        <ul>
      <li v-for="service in  responseObject.data"    :key="service.service_id">
        {{ service.service_name }}
      </li>
    </ul>

    Codepen – https://codepen.io/bsod_/pen/wvYwBrj

    Login or Signup to reply.
  3. 0

    You can try printing response.data Confirm if the correct data has been obtained

    Login or Signup to reply.
  4. 0

    this what you are missing

    response.data.responseObject

    modify your code

     async mounted() {
    try {
      let response = await axios.get("http://localhost:4000/api/blogs");
     this.responseObject = response.data.responseObject;
    } catch (e) {
      console.log(e);
    }
  }

    then in your template

     <li
            v-for="service in  responseObject.data"
            :key="service.service_id"
          >
            {{ service.service_name }} - {{ service.service_id }}
          </li>

    you should see an output

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search