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

I am quite new to this languages and trying to make sense of what's going on. I have managed to get data from an external JSON file and create a list from it. This is the contents from the JSON file:

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

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

Now here is the fiddle with the HTML and js. http://jsfiddle.net/tusika_/ut3NZ/

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

As you can see, every ul is wrapped in a div with class "player". What I would like to achieve is to be able to sort those divs of class "player", by sorting alphabetically the name (default) or country or descending score of the players.

正如您所看到的,每个ul都包含在一个带有“播放器”类的div中。我想要实现的是能够通过按字母顺序排序玩家的名称(默认)或国家或降级得分来对“玩家”类的div进行排序。

After two days of research and finding answers to similar questions, I managed to put the data into an array, and when I use the sort method and the function in the js, i see in the console that the objects do get sorted differently, however they only sort alphabetically for the first three objects and then the last two get not sorted (in the original file I have many more players than three). Also I do not undestand how to reprint of screen that new order. (it should replace the current output each time)

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

I would appreciate a response that indicates where the error of the logic is and doesn't only provide the code but helps me understand why the code is such.

我希望得到一个响应,指示逻辑的错误在哪里,不仅提供代码,还帮助我理解为什么代码是这样的。

Thank you very much!!!

非常感谢你!!!

2 个解决方案

#1

The issue is (as you have noticed) the disconnection of the array order and the DOM order. You only use the array to create the DOM elements. They are not somehow linked so that what happens to one affect the other.

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

You will have to manually redraw the dom by either emptying the container and redrawint the element, or by re-arranging the existing DOM elements. For example you could have a function that will clear the #list element and then append the sorted nodes.

您必须通过清空容器并重新绘制元素或重新排列现有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>");
    });
}

Also you do not need to sort the array while adding each element, just sort the whole of the array once.

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

So you can use the above code like this

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

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

You can see a simple demo at http://jsfiddle.net/gaby/YhvTt/

您可以在http://jsfiddle.net/gaby/YhvTt/看到一个简单的演示

2 个解决方案

#1

更多相关文章

随机推荐