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

Shouldn't it simply be {{ibn.data.basic.name}}?

Phil
– Phil

2018-01-15 06:06:01 +00:00
Commented Jan 15, 2018 at 6:06 — Phil
– Phil, Commented Jan 15, 2018 at 6:06
Also, what error are you getting?

Phil
– Phil

2018-01-15 06:06:16 +00:00
Commented Jan 15, 2018 at 6:06 — Phil
– Phil, Commented Jan 15, 2018 at 6:06
sir, its a loop

med
– med

2018-01-15 06:07:08 +00:00
Commented Jan 15, 2018 at 6:07 — med
– med, Commented Jan 15, 2018 at 6:07
members [] is an array

med
– med

2018-01-15 06:07:50 +00:00
Commented Jan 15, 2018 at 6:07 — med
– med, Commented Jan 15, 2018 at 6:07

Phil · Accepted Answer · 2018-01-15 06:19:27Z

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/

edited Jan 15, 2018 at 6:19

answered Jan 15, 2018 at 6:08

Phil

166k25 gold badges265 silver badges269 bronze badges

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

Collectives™ on Stack Overflow

Display following values in vue js?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related