[javascript] JQuery function not working as intended

[localzuk]

So, I have a function which when called adds a table within a new row of an existing table, complete with results returned in JSON format by a restful API.

 

Code:

 

$(".transactionViewButton").each(function(){
var $this = $(this);
$this.on("click", function(){
	if($(this).closest("tr").next("tr").attr('id') != "itemsRow"){
		var rowAdd = "Item IDItem NameCostFSM AmountEnd Cost";
		
		$.getJSON("transactionItem.json", function(data){
			$.each(data, function (key, val){
				rowAdd += "" + val.ID + "" + val.Name + "" + val.Cost + "" + val.FSM+ "" + val.EndCost + "";
			});
		});
		rowAdd += "";
		$(this).closest("tr").after(rowAdd);
	} else {
		$(this).closest("tr").next("tr").remove();
	}
});
});

 

And the JSON test data:

 

[{
   "ID": "123",
   "Name": "Food Item 1",
   "Cost": "0.50",
   "FSM": "0.00",
   "EndCost": "0.50"
 },{
   "ID": "124",
   "Name": "Food Item 2",
   "Cost": "0.50",
   "FSM": "0.00",
   "EndCost": "0.50"
 },{
   "ID": "125",
   "Name": "Food Item 3",
   "Cost": "0.50",
   "FSM": "0.00",
   "EndCost": "0.50"
}]

 

The function works as much as it adds the new table, with heading row and with the closing row. It also will remove the new row if triggered a second time.

 

The problem is in the $.each part. I know its receiving the JSON data as inserting an alert before the rowAdd += results in a response for each record. It just isn't adding the actual table row in to the rowAdd string for each record. Its like its just plain skipping that line. Also, there's no javascript errors either. So, what am I missing?

Edited June 10, 2015 by localzuk

[localzuk]

Got an answer over here - javascript - JQuery, JSON and $.each - string not concatenating - Stack Overflow