Dynamic html table with complex JSON
I have an aspx page that calls an ajax method to return a JSON object containing arrays of countries.
I want to loop through the data and create
- COUNTRY
From what I can see my code looks good, but I am not getting any results written to my div.
I've installed a Fiddle with data and would appreciate some help.
http://jsfiddle.net/L3s6c0yx/1/
and here is the JS code
var tdata = "{"d": "[{\"Countries\":[\"Cyprus: 3\",\"Panama: 3\"]},{\"Countries\":[\"Malaysia: 1\",\"Malaysia: 2\"]},{\"Countries\":[\"Tanzania: 3\"]}]"}";
$.ajax({
type: "POST",
url: "",
data: tdata,
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (result) {
tdata = jQuery.parseJSON(result.d);
var response = '',
indicator = '';
for (var i = 0; i < tdata.length; i++) {
response += '<div class="item">' +
'<table style="height: 300px;">' +
'<tbody>' +
'<tr>' +
'<td><label>Countries</label></td>' +
'<td><ul>' + $.each(tdata[i]['Countries'], function (value) {
response += '<li>' + value + '</li>';
});
response += '</ul></td></tr>' +
'</div>';
}
$('#countries').append(response);
}
});
+3
source to share
1 answer
get this inside a for loop:
for (var i = 0; i < tdata.length; i++) {
response += '<div class="item">' +
'<table class="table table-user-information" style="height: 300px;">' +
'<tbody>' +
'<tr>' +
'<td><label>Countries</label></td>' +
'<td><ul>';
$.each(tdata[i]['Countries'], function (index, value) {
response += '<li>' + value + '</li>';
});
response += '</ul></td></tr>' + '</div>';
}
http://jsfiddle.net/L3s6c0yx/6/
You added the $ .each function to your string that returns arrays. Hope this is what you were looking for.
+1
source to share