【问题标题】:Sorting a JQuery list, populated from a JSon array对从 JSON 数组填充的 JQuery 列表进行排序
【发布时间】:2011-06-30 14:37:18
【问题描述】:

我尝试了许多不同的方法,但似乎无法解决这个问题。 我有一个填充我的 JQuery 列表的 JSON 数组。列表显示正确,但我似乎无法过滤它。

我希望能够按名称或价格进行过滤。我尝试了 JQuery .Filter 方法和许多其他方法,但都失败了。我也想把它作为一个链接。 (用户点击按名称排序,排序...)

这是我目前所拥有的,我确信它会起作用。

非常感谢任何帮助,谢谢!

.js 文件:



// Json array var productList = {"products": [ {"description": "Product 1", "price": "3.25"}, {"description": "Product 4", "price": "9.97"}, {"description": "Product 3", "price": "4.21"}, {"description": "Product 2", "price": "5.24"}, {"description": "Product 5", "price": "8.52"} ] };

function loadList() {

var list = $("#productList").listview();

// load array into list

$(productList.products).each(function(index) {
    $(list).append('<li id="listitem">' + this.description + "  " +
            "    :     " + this.price + '</li>');

     // sort by price 
     $(productList.products).filter(function ()
     { return parseFloat(this.price) < 11;})

});

$(list).listview("refresh"); }

【问题讨论】:

    标签: jquery arrays json mobile sorting


    【解决方案1】:

    排序怎么样:

    var prods = productList.products.sort(function(a, b) {return parseInt(a.price) < parseInt(b.price);});
    $.each(prods, function() {
        list.append("<li>" + this.description + " : " + this.price + "</li>");
    });
    

    要按描述排序,您可以改用这个:

    var prods = productList.products.sort(function(a, b) {return a.description < b.description;});
    

    如果您只想过滤,您可以替换:

    var prods = productList.products.filter(function(item) {return parseInt(item.price) < 5;});
    

    【讨论】:

    • 成功了!非常感谢您的帮助,非常感谢。
    • @JFFF - 如果我之前注意到你说“这是我的作业”,我就不会这么直率了 :) 你应该用“家庭作业”和人来标记这些问题将帮助您学习,而不仅仅是脱口而出。
    • Drats,我正要发帖 jsfiddle.net/morrison/CFnry 它不使用 jQuery,所以它应该更快,虽然很可能可以忽略不计。
    • 你给了我答案而不是告诉我,并不意味着我不会学习。我不会只是坐在那里把你的回答当作我自己的工作。您的回答使我朝着正确的方向前进,所以现在我可以继续工作并尝试将过滤器附加到链接或其他东西上。再次感谢!
    【解决方案2】:

    这种过滤通常最好在服务器端完成。您是否尝试在数据库或应用程序级别应用过滤?

    【讨论】:

    • 不,我真的不能这样做。这是我的一项任务,我需要使用按钮或链接动态过滤列表。但首先我得想办法让过滤器真正发挥作用……
    【解决方案3】:

    为了这种目的,出现了很多 json 路径(类似 xpath)工具。查看http://goessner.net/articles/JsonPath/

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-11-28
      • 1970-01-01
      相关资源
      最近更新 更多