CODEWITHSUNDEEP
sortingvue.jsaxios
szewah
szewah

Reputation: 147

Sort() not working

I'm having an issue with the sort() in ranking data from coinmarketcap api. With an ajax api call, sort works in returning an array with the right ranking. With an axios api call, seen below, it doesn't.

Here is my code using axios and vue.js: 

let coinMarket = 'https://api.coinmarketcap.com/v2/ticker/?limit=10'
let updateInterval = 60 * 1000;

let newApp = new Vue({
  el: '#coinApp',
  data: {
    // data within an array
    results: []
},
  methods: {
    getCoins: function() {
        axios
            .get(coinMarket)
            .then((resp) => {
              this.results = formatCoins(resp);
            });
    },

    getColor: (num) => {
        return num > 0 ? "color:green;" : "color:red;";
    },
},
    created: function() {
        this.getCoins();
    }
})
setInterval(() => {
        newApp.getCoins();
    },
    updateInterval
);
function formatCoins(res) {
    var coinDataArray = []
    Object.keys(res.data).forEach(function(key) {
        coinDataArray.push(res.data[key])
    })
    coinDataArray.sort(function(a,b) {
        return a.rank > b.rank
    })
    console.log(coinDataArray)
}

Where am I going wrong?

Upvotes: 3

Views: 379

Answers (1)

Sphinx
Sphinx

Reputation: 10729

If you look into the data responded by https://api.coinmarketcap.com/v2/ticker/?limit=10, you will find the data you need is under res.data.data, not res.data.

So within the function=formatCoins, replace res.data with res.data.data, then works.

Vue.config.productionTip = false
let coinMarket = 'https://api.coinmarketcap.com/v2/ticker/?limit=10'
let updateInterval = 60 * 1000;

function formatCoins(res) {
    var coinDataArray = []
    Object.keys(res.data.data).forEach(function(key) {
      
        coinDataArray.push(res.data.data[key])
    })
    coinDataArray.sort(function(a,b) {
        return a.rank - b.rank
    })

    return coinDataArray
}

let newApp = new Vue({
  el: '#coinApp',
  data: {
    // data within an array
    results: []
  },
  methods: {
    getCoins: function() {
        axios
            .get(coinMarket)
            .then((resp) => {
              this.results = formatCoins(resp);
            });
    },

    getColor: (num) => {
        return num > 0 ? "color:green;" : "color:red;";
    },
  },
  created: function() {
      this.getCoins();
  }
})
setInterval(() => {
        newApp.getCoins();
    },
    updateInterval
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="coinApp">
    <div v-for="(record, index) in results" :key="index">
      {{index}} - {{record.name}}: {{record.rank}}
    </div>
</div>

Upvotes: 2

Related Questions