从外部阵列过滤对象来创建一个列表，使用jQuery AJAX和$ .grep [英] Filtering objects from external array to create a list, using jQuery AJAX and $.grep

问题描述

我不知道解释这个的最好方法......我刚学AJAX，这是一个真正的挑战我。

基本上，我要存储一个JSON文件中的项目（对象）的大数组，然后，动态生成多个列表的根据一些过滤器的;每个数组对象的属性可以作为一个过滤器。
对于这个我使用jQuery $。gr​​ep的（）功能。

问题是，我可能失去了一些东西，因为虽然JSON文件加载成功，在过滤是不是正在做。

看我第一次尝试（没有Ajax），它的工作原理就像我想：
http://jsfiddle.net/Frondor/p2hgrk8h/2/

但是，如果我试图做同样的，使用AJAX，然后点击它不工作：
http://jsfiddle.net/Frondor/6a2Lzof6/

下面是jQuery的code（带注释）：

  $（文件）。就绪（函数（）{
    $阿贾克斯（{
        网址： 'https://gist.githubusercontent.com/Frondor/422b87c6b64ab9927c9b/raw/d5ae5b4d6dd03c083549609d2b45edc7b2ed726f/gistfile1.json',
        //数据类型：JSON，
        成功：函数（项目）{            的console.log（项目）; //检查数组被加载            VAR手= $ .grep（项功能（OBJ）{
                //过滤器只项目进行手：0手：1和RF：1
                返回obj.hand＆下; ='1'和;＆放大器; obj.rf ==='1';
                //至少第一个项目应符合的，不工作
            }）;            //创建一个过滤项新数组
            VAR LISTA = $ .MAP（手，函数（项目）{
                的console.log（项目）;
                回归'＆LT;立GT;' + item.name +'＆LT; /李＆GT;';
            }）;            $（＃manoderecha UL）空（）HTML（LISTA）。
        }    }）;
}）;
 

HTML

 ＆LT; D​​IV ID =manoderecha＆GT;
    ＆LT; UL＆GT;＆LT;李＆gt;这项目不应显示＆LT; /李＆GT;＆LT; / UL＆GT;
＆LT; / DIV＆GT;
 

解决方案

这个问题是两件事情：

在你的提琴的JSON是坏了，所以被解析为文本，第二个你应该解析为JSON的结果，如果你在电话会议上鸵鸟政策，你应该在更迭做

 的console.log（项）
   VAR itemsJSON = JSON.parse（项目）
 

工作小提琴：
http://jsfiddle.net/9oL8r0dr/14/

I don't know the best way to explain this... I'm just learning AJAX and this is a real challenge for me.

Basically, I want to store a big array of items (objects) inside a json file and then, dynamically generate multiple lists depending on some filters; each array object's property works as a filter. For this I'm using jQuery $.grep() function.

The problem is that I'm might be missing something, because although the json file is successfully loaded, the "filtering" is not being done.

Look at my first try (without ajax), it works just like I want: http://jsfiddle.net/Frondor/p2hgrk8h/2/

But if I try to do the same, using AJAX, then it doesn't work: http://jsfiddle.net/Frondor/6a2Lzof6/

Here's the jQuery code (with comments):

$(document).ready(function () {
    $.ajax({
        url: 'https://gist.githubusercontent.com/Frondor/422b87c6b64ab9927c9b/raw/d5ae5b4d6dd03c083549609d2b45edc7b2ed726f/gistfile1.json',
        //dataType: 'json',
        success: function (items) {

            console.log(items); //check the array is loaded

            var hand = $.grep(items, function (obj) { 
                //filter only items with hand:0, hand:1 and rf:1
                return obj.hand <= '1' && obj.rf === '1'; 
                //at least the first item should match this, doesnt work
            });

            //create new array with filtered items
            var lista = $.map(hand, function (item) {
                console.log(item);
                return '<li>' + item.name + '</li>';
            });

            $("#manoderecha ul").empty().html(lista);
        }

    });
});

HTML:

<div id="manoderecha">
    <ul><li>This item shouldn't be displayed</li></ul>
</div>

解决方案

The problem are two things:

The json on your fiddle is broken, so is parsed as text, and the second one you should parse as json the result, if you don´t on the call, you should do on the succes

  console.log(items)
   var itemsJSON= JSON.parse(items)

working fiddle: http://jsfiddle.net/9oL8r0dr/14/

这篇关于从外部阵列过滤对象来创建一个列表，使用jQuery AJAX和$ .grep的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！