嵌套的JSON和JQuery $ .each()

时间:2016-03-13 19:31:37

标签: javascript jquery json

我有以下JSON:

{"GAs":
	[
		{"gaAgents":
		[
			{"agentId":2,"agentName":"Chacko Taco"},
			{"agentId":10,"agentName":"Carl Jones"}
		],
		"gaId":11,
		"gaName":"Lisa Smith"},
		{"gaAgents":
			[
				{"agentId":0,"agentName":"null null"}
			],
			"gaId":12,
			"gaName":"General Agent"}
		],
		"gaCount":2
} 

我正在处理它:

                $.getJSON('GAServlet',
                {                    
                },
                function(response){
                    if(response.gaCount > 0){
                        $.each(response.GAs,
                            function(index, value){
                                $('.gaTbody').append(
                                        '<tr class="gaRow">' + 
                                            '<td>' + this.gaName + '</td>' + 
                                            '<td><table><tbody class="agentTbody"></tbody></table></td>' + 
                                        '</tr>');
                                
                                $.each(this.gaAgents,
                                    function(idx, v){
                                        if(v.agentName !== 'null null'){
                                            $('.agentTbody').append(
                                                    '<tr><td>' + this.agentName + '</td></tr>'
                                            );
                                        }
                                    }
                                );
                        
                                // Add a select to add an unattached agent to this GA
                                $('.agentTbody').append(
                                        '<tr><td><select disabled>' + '</select></td></tr>'
                                );
                            }
                        );
                
                        $( "tr:even" ).css( "background-color", "#bbbbff" );
                                
                    } else {
                        $('.gaTbody').append('<tr class="gaRow"><td colspan="2" style="text-align: center;"><em>No GAs Found</em></td></tr>');
                    }
                }); 

我的问题是内部的.each循环,即那个说:

的循环

$。每个(this.gaAgents ...

比我想象的还要多跑。它为第一个GAs项目运行3X。我知道我在$ .each()功能上遗漏了一些基本内容,但在尝试了多个选项后,我无处可去。

任何建议都表示赞赏。

提前致谢。

1 个答案:

答案 0 :(得分:1)

您可以将代理添加到他们不属于的行中,因为$('.agentTbody')会搜索所有表格,而不仅仅是新表格。您需要限制对表的搜索:

                            var currentRow = $('<tr class="gaRow">' + 
                                        '<td>' + this.gaName + '</td>' + 
                                        '<td><table><tbody class="agentTbody"></tbody></table></td>' + 
                                    '</tr>');
                            $('.gaTbody').append(currentRow);

                            $.each(this.gaAgents,
                                function(idx, v){
                                    if(v.agentName !== 'null null'){
                                        //search table ONLY in current row!!!
                                        $('.agentTbody', currentRow).append(
                                                '<tr><td>' + this.agentName + '</td></tr>'
                                        );
                                    }
                                }
                            );

在每次运行中搜索表也是非常低效的。您应该保存引用,然后从变量...

中使用它