Jquery Ajax call to JSON not returning any data

Question

I Have the following code below, I am trying to get the nested value of capital, city etc from the json file and create individual table for capital , city etc.

I tried the following code but I am not getting any results.

HTML

<table id="table">
    <thead>
        <tr>
            <th>Head 1</th>
            <th>Head 1</th>
            <th>Head 1</th>
            <th>Head 1</th>
            <th>Head 1</th>
        </tr>
    </thead>
    <tbody id="tablebody"></tbody>
</table>

JS

<script language="javascript">
window.getContent = function(URL) {       
    //////////////
    var jsonData =URL;
    console.log(" jsonData  " + jsonData ); 
    $.ajax({
        url: jsonData ,
        type: "get",
        dataType: "json",
        //jsonp:"jsoncallback",
        success: function(data, textStatus, jqXHR) {

        $('#records_table > tbody').empty(); 
        var trHTML = '';
       console.log("data " +data);
        $.each(data.capital, function (i, item) {
            console.log(" i " + i + " item+ "+item);
            console.log(" i " + i + " item+ value"+item.capital);
              console.log(" i " + i + " item+ value"+this.metricShortName);
            console.log(" i " + i + " item+ value"+item.value);

            /***************************/
             $.each(item.capital, function (k, v) {
                console.log("======================");
                console.log(" i " + k + " V " +v);            
                console.log(" i " + k + " item+ value"+v.value);
                console.log(" i " + k + " item+ value"+v.name);


              /**
                trHTML += '<tr>' +
                    '<td>' + item.name + '</td>' +
                    '<td>' + item.value + '</td>' +
                    '<td>' + item.description + '</td>' +
                    '<td>' + item.targetValue + '</td>' +

                    '</tr>';

                **/

                /***********************************/

            });


            /**************************/

        });

        $('#table > tbody').append(trHTML);


    },
        error: function(jqXHR, textStatus, errorThrown) {
            console.log('FAILED to get  JSON from AJAX call' + jqXHR + textStatus + errorThrown);

        }
    });       


         //////////////////
   }


//table cell selection
$(document).ready(function(){

  var url ="metric.json";
    console.log(url);
   getContent(url);

});

</script>

madalinivascu · Accepted Answer · 2016-11-15 05:59:02Z

1

its data.capital.List, the List property is a array

     $.each(data.capital.List, function (i, item) {
     trHTML += '<tr>' +
               '<td>' + item.name + '</td>' +
               '<td>' + item.value + '</td>' +
               '<td>' + item.description + '</td>' +
               '<td>' + item.targetValue + '</td>' +
               '</tr>';
     });

answered Nov 15, 2016 at 5:59

madalinivascu

32.4k4 gold badges41 silver badges59 bronze badges

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

Collectives™ on Stack Overflow

Jquery Ajax call to JSON not returning any data

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related