Nested JSON and JQuery $.each()

Question

I have the following 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
} 

And I'm processing it with this:

                $.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>');
                    }
                }); 

My problem is that the inner .each loop, i.e. the one that says:

$.each(this.gaAgents...

is getting run more than I think it should. It gets run 3X for the first GAs item. I know I'm missing something basic on the $.each() functionality but after trying multiple options I'm getting nowhere.

Any suggestions are appreciated.

Thanks in advance.

Answer 1

You add agents into rows where they don't belong because $('.agentTbody') search all tables, not just the new one. You need to limit the search for the table:

                            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>'
                                        );
                                    }
                                }
                            );

Also searching for the table in each run is very inefficient. You should save the reference and then use it from a variable...