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.

For each GA you add new table .agentTbody and then add new agent into table .agentTbody - but jquery will add it into all .agentTbody tables on the page, not just the one in current gaRow! — Radek Pech
– Radek Pech, Commented Mar 13, 2016 at 19:45

Radek Pech · Accepted Answer · 2016-03-13 19:50:47Z

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...

answered Mar 13, 2016 at 19:50

Radek Pech

3,1081 gold badge27 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jwh20 Over a year ago

Thanks! I was going over and over the $.each() loops assuming I had something wrong there. I totally missed the fact that I was appending to too many table items. It's been a long weekend trying to get this project going. And I do realize that this is a bit inefficient but this is a really small data set so performance is not really an issue. But thanks for the tips!

Collectives™ on Stack Overflow

Nested JSON and JQuery $.each()

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related