CODEWITHSUNDEEP
javascriptarraysjsonreactjs
gladprog
gladprog

Reputation: 126

How to sort JSON array/object pulled from API?

I am trying to learn reactjs and web development by making a simple app. What my app will do is get some data from an API, sort it and display the details. I am having trouble sorting the response json. The API URL is https://min-api.cryptocompare.com/data/all/coinlist

A sample JSON response is as follows:

{
    "Response": "Success",
    "Message": "Coin list succesfully returned!",
    "BaseImageUrl": "https://www.cryptocompare.com",
    "BaseLinkUrl": "https://www.cryptocompare.com",
    "Data": {
        "LTC": {
            "Id": "3808",
            "Url": "/coins/ltc/overview",
            "ImageUrl": "/media/19782/ltc.png",
            "Name": "LTC",
            "CoinName": "Litecoin",
            "FullName": "Litecoin (LTC)",
            "Algorithm": "Scrypt",
            "ProofType": "PoW",
            "SortOrder": "2"
        },
     "XEC": {
        "Id": "206539",
        "Url": "/coins/xec/overview",
        "ImageUrl": "/media/1383961/xec.png",
        "Name": "XEC",
        "Symbol": "XEC",
        "CoinName": "Eternal Coin",
        "FullName": "Eternal Coin (XEC)",
        "Algorithm": "N/A",
        "ProofType": "N/A",
        "FullyPremined": "0",
        "TotalCoinSupply": "200000000",
        "PreMinedValue": "N/A",
        "TotalCoinsFreeFloat": "N/A",
        "SortOrder": "1486",
        "Sponsored": false
    },
     "ONT": {
        "Id": "808414",
        "Url": "/coins/ont/overview",
        "ImageUrl": "/media/30001663/ont.jpg",
        "Name": "ONT",
        "Symbol": "ONT",
        "CoinName": "Ontology",
        "FullName": "Ontology (ONT)",
        "Algorithm": "N/A",
        "ProofType": "N/A",
        "FullyPremined": "0",
        "TotalCoinSupply": "1000000000",
        "PreMinedValue": "N/A",
        "TotalCoinsFreeFloat": "N/A",
        "SortOrder": "2446",
        "Sponsored": false
    }
        ...
    },
    "Type": 100
}

This is details of cryptocurrencies and their ranking. What I am trying to achieve is to sort the coin details in the "Data" node according to the "SortOrder" value. How can I achieve this?

Upvotes: 0

Views: 4476

Answers (2)

G_89
G_89

Reputation: 101

If you restructure to an array object, like: 

myArr = [{"Id": "3808",
            "Url": "/coins/ltc/overview",
            "ImageUrl": "/media/19782/ltc.png",
            "Name": "LTC",
            "SortOrder": "2444"
         },
         {"Id": "206539",
        "Url": "/coins/xec/overview",
        "ImageUrl": "/media/1383961/xec.png",
        "Name": "XEC",
        "SortOrder": "4"
         },
         {"Id": "808414",
        "Url": "/coins/ont/overview",
        "ImageUrl": "/media/30001663/ont.jpg",
        "Name": "ONT",
         "SortOrder": "1400"
         }];

And then doing a sort on the array based on SortOrder as : 

myarr.sort(function (a, b) {
    return parseInt(a.SortOrder) - parseInt(b.SortOrder)
});

You can test ithis directly in your browser's JS console.

Upvotes: 0

Jitendra Pal - JP
Jitendra Pal - JP

Reputation: 242

You can create list (array from Data) like this:

var data = apiResponse.Data; // assign your data here
var arr = [];
for(let key in data){
  data[key]["key"] = key;
  arr.push(data[key]);
}

use sort function in JavaScript on this array as follows:

arr.sort(function(a,b) { return parseInt(a.SortOrder)-parseInt(b.SortOrder)});

Now you will get your sorted list in arr variable

Upvotes: 2

Related Questions