CODEWITHSUNDEEP
jqueryhtmljsonajax
Asynchronous
Asynchronous

Reputation: 3977

Populate HTML table with JQuery AJAX using JSON formatted data: How to access data from variable in loop?

I have the following JSON data that is returned from a WCF RESTful Service.

{"Cities":["LUSAKA","HARARE"],"Countries":["ZAMBIA","ZIMBABWE"]}

I am attempting to populate the following HTML Table with this data.

<table id="location" border='1'>
    <tr>
        <th>Countries</th>
         <th>Cities</th>
    </tr>
</table>

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 anonymous 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);

However if I attempt to access the data like this it does not work:

$.each(data.d.results,function(d, item){ 

    $("#location tbody").append(
                "<tr>"
                  +"<td>"+item.Countries+"</td>"
                  +"<td>"+item.Cities+"</td>"
                +"</tr>" )
            })

How do I access the data using the item variable in the loop function above?

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>

Upvotes: 3

Views: 9895

Answers (1)

devinallenaz
devinallenaz

Reputation: 430

Since you have 2 separate arrays Countries and Cities, there's no unified collection of items that each has a Countries and a Cities property.

Also in your modified code you are trying to use each on data.d.results which I would expect to be undefined based on the sample data you provided. Overall, you could probably improve your code by appending individual rows, but there's no useful item that has both values you need.

If you have control of the JSON data you could restructure it as follows:

[{City:"LUSAKA",Country:"ZAMBIA"},{City:"HARARE", Country: "ZIMBABWE"}]

Then access it like this:

$.each(data,function(i,item){
    $("#location tbody").append(
        "<tr>"
            +"<td>"+item.Country+"</td>"
            +"<td>"+item.City+"</td>"
        +"</tr>" )
    })

Upvotes: 6

Related Questions