Display following values in vue js?

Question

{
  "basic": {
    "clanId": 3,
    "earning": 0.0
  },
  "length": 2,
  "members": [{
    "data": {
      "basic": {
        "name": " ",
        "userType": 2,
        "username": "sobinmathew"
      },
      "wallet": {
        "amount": 0.0,
        "tds": 0.0
      }
    }
  }, {
    "data": {
      "basic": {
        "name": " ",
        "userType": 2,
        "username": "joselouis"
      },
      "wallet": {
        "amount": 0.0,
        "tds": 0.0
      }
    }
  }],
  "status": true,
  "total_earnings": 0.0,
  "clan_divsions": 1,
  "checkout_total_listings": 0
}

How can I able to display members[] in my html file?

My current code is. This is my vue js code

<script>
dash = new Vue({
  el: '#dash',
  data: {
    clans: {
      basic: [],
      members: {
        data: {
          basic: [],
        },
      },
    },
  },
  mounted() {
    var self = this;
    data = {};
    $.ajax({
      url: "http://127.0.0.1:8000/alpha/get/my/clan/",
      data: data,
      type: "POST",
      dataType: 'json',
      success: function (e) {
        if (e.status == 1) {
          self.clans = e;
          console.log(self.clans);
          self.members = e.members;
        }
      },
    });
  },
})
</script>

My html code is as below. I am using v-for to display the values

<div id="dash">

 <div v-for="ibn in clans.members">{{ibn.data.members.data.basic.name}}</div>

</div>

When I try this way, I am getting error? Can anybody please help me to display the following data? How can able to display the name of members from the data

Answer 1

Assuming e looks like the JSON at the top of your question, you should really only need

<div v-for="ibn in clans.members">{{ibn.data.basic.name}}</div>

---

Your code could do with some cleanup. You should initialise your data to look as much like the fetched data as possible, eg

data: {
  clans: {
    basic: {}, // an object, not array
    members: [] // an array, not an object
  }
}

Demo ~ https://jsfiddle.net/u13j8p2h/