how to loop through nested json response with vue js

Question

I'm actually a newbie to Vue JS, so i've been having a bit of a problem looping through api responses with v-for here's my html

Get Coins Data

<div v-for="coin in coinsData">{{coinsData.data.coins.name}}</div>

my javascript:

 var app = new Vue({
        el: '#app',
        data: {
            coinsData: []
        },
        methods: {
    getCoinsData() {
      fetch("https://api.coinranking.com/v1/public/coins")
        .then(response => response.json())
        .then(data => (this.coinsData = data));
    }
  }
    })

the response I want to loop through is at https://api.coinranking.com/v1/public/coins Its quite large so I didn't paste it in here :)

Dan · Accepted Answer · 2020-11-18 11:56:17Z

2

Call the method in a lifecycle hook like created. And make sure you get the proper response property; coins is actually 3 levels deep in the response:

var app = new Vue({
  el: '#app',
  data: {
    coinsData: []
  },
  methods: {
    getCoinsData() {
      fetch("https://api.coinranking.com/v1/public/coins")
        .then(response => response.json())
        .then(json => this.coinsData = json.data.coins);
    }
  },
  created() {
    this.getCoinsData();
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="coin in coinsData">{{ coin.name }}</div>
</div>

answered Nov 18, 2020 at 11:56

Dan

63.5k18 gold badges113 silver badges122 bronze badges

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

1 Comment

Dan Over a year ago

No problem. Oh, I could have left the method untouched and changed the template to: <div v-for="coin in coinsData.data.coins">{{ coin.name }}</div> I see now you were aware of the object structure.

Collectives™ on Stack Overflow

how to loop through nested json response with vue js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related