Question

我对这些语言很陌生，并试图了解正在发生的事情。我已设法从外部JSON文件中获取数据并从中创建列表。这是JSON文件中的内容：

{
    "player": [
        {
            "name": "John",
            "country": "USA",
            "score": 102400
        },
        {
            "name": "Mary",
            "country": "Australia",
            "score": 80001
        },
        {
            "name": "Jane",
            "country": "England",
            "score": 103900
        }
    ]
}

现在这里是HTML和js的小提琴。 http://jsfiddle.net/tusika_/ut3NZ/

正如你所看到的，每个ul都被包含在一个div中，而＃34; player＆＃34;。我想要实现的是通过按字母顺序排序玩家的名字（默认）或国家或降级得分来排序班级＆＃34;玩家＆＃34;的div。

经过两天的研究并找到类似问题的答案后，我设法将数据放入数组中，当我在js中使用sort方法和函数时，我在控制台中看到对象确实已经排序不同的是，它们只按字母顺序排序前三个对象，然后最后两个没有排序（在原始文件中我有多于三个的玩家）。另外我不知道如何转载新订单的屏幕。（它应该每次都替换当前的输出）

我希望得到一个回复，指出逻辑错误的位置，并且不仅仅提供代码，但有助于我理解为什么代码是这样的。

非常感谢!!!

Answer 1

问题是（，因为您注意到）数组顺序和DOM顺序的断开连接。您只能使用数组来创建DOM元素。它们不是以某种方式联系在一起的，因此一个人会发生什么影响另一个。

您必须通过清空容器并重新绘制元素或重新排列现有DOM元素来手动重绘dom。例如，您可以使用一个清除#list元素的函数，然后附加已排序的节点。

function displayData(array) {
    var list = $("#list").empty();
    $.each(array, function () {
       list.append("<div class='player'><ul><li>" + this['name'] + "</li><li>" + this['country'] + "</li><li>" + this['score'] + "</li></ul></div>");
    });
}

此外，您不需要在添加每个元素时对数组进行排序，只需对整个数组进行一次排序。

所以你可以使用上面这样的代码

var sorted = data.player.sort(byCountry);
displayData(sorted);

您可以在http://jsfiddle.net/gaby/YhvTt/

看到一个简单的演示

Answer 2

当您执行array.push(key, value);时，您同时按下数组中的键和值（位置i和i + 1）。

OH，顺便说一句，您可以这样做：data.player.sort(compare);

使用jQuery导出JSON（外部文件）导入数据的度假输出

2 个答案: