Good afternoon my friends:
I have the following JSON data that is returned from a WCF RESTful Service.
JSON Data:
{"Cities":["LUSAKA","HARARE"],"Countries":["ZAMBIA","ZIMBABWE"]}
As illustrated, the data contains a list of Countries and Cities.
I am attempting to populate an HTML Table with this data.
HTML Table
<table id="location" border='1'>
<tr>
<th>Countries</th>
<th>Cities</th>
</tr>
</table>
JQuery:
(The below code works, however, it relies on the index of either the Countries or the Cities and i cannot access the data from the item variable in the function:
var trHTML = '';
$.each(data.Countries, function (i, item) {
trHTML += '<tr><td>' + data.Countries[i] + '</td><td>' + data.Cities[i] + '</td></tr>';
});
$('#location').append(trHTML);
Finally, I also tried the below code but this does not work:
$.each(data.d.results,function(d,results){
$("#location tbody").append(
"<tr>"
+"<td>"+results.Countries+"</td>"
+"<td>"+results.Cities+"</td>"
+"</tr>" )
})
Here is the complete working code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>WCF Client</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<table id="location" border='1'>
<tr>
<th>Countries</th>
<th>Cities</th>
</tr>
</table>
<script>
var service = 'http://localhost/DistributedDataSystem/Service.svc/';
$(document).ready(function(){
jQuery.support.cors = true;
$.ajax(
{
type: "GET",
url: service + '/GetAllCountries/',
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
cache: false,
success: function (data) {
var trHTML = '';
$.each(data.Countries, function (i, item) {
trHTML += '<tr><td>' + data.Countries[i] + '</td><td>' + data.Cities[i] + '</td></tr>';
});
$('#location').append(trHTML);
},
error: function (msg) {
alert(msg.responseText);
}
});
})
</script>
</body>
</html>
Is there is better more robust way to do this? For example: I am not certain as to why I am unable to access the data using the item variable in the loop function above.