如何对从 API 中提取的 JSON 数组/对象进行排序？答案

【问题标题】：How to sort JSON array/object pulled from API?如何对从 API 中提取的 JSON 数组/对象进行排序？
【发布时间】：2018-03-23 18:32:56
【问题描述】：

我正在尝试通过制作一个简单的应用程序来学习 reactjs 和 Web 开发。我的应用程序会从 API 获取一些数据，对其进行排序并显示详细信息。我无法对响应 json 进行排序。 API URL 为https://min-api.cryptocompare.com/data/all/coinlist

示例 JSON 响应如下：

{
    "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
}

这是加密货币及其排名的详细信息。我想要实现的是根据“SortOrder”值对“Data”节点中的硬币详细信息进行排序。我怎样才能做到这一点？

【问题讨论】：

您的对象中没有可排序的内容。对象没有您可以轻松控制的顺序。
你尝试了什么？
您将无法对名称/键进行排序。
您可以通过重组数据使其成为对象数组来实现这一点。

标签： javascript arrays json reactjs

【解决方案1】：

您可以像这样创建列表（来自数据的数组）：

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

在 JavaScript 中对该数组使用排序函数，如下所示：

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

现在您将在 arr 变量中获得排序列表

【讨论】：

【解决方案2】：

如果你重构为一个数组对象，比如：

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"
         }];

然后根据 SortOrder 对数组进行排序：

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

您可以直接在浏览器的 JS 控制台中测试 ithis。

【讨论】：