Create HTML table using jQuery and JSON array (Rows Error undefined)

Question

enter image description here I'm trying to populate the data in the html table with jquery and all columns get undefined error

Html:

<table id="example" class="table table-striped" style="width:100%">
        <thead>
            <tr>
                <th>1</th>
                <th>2</th>
                <th>3</th>
                <th>4</th>
                <th>5</th>
                <th>6</th>
                <th>7</th>
              
            </tr>
        </thead>
        <tbody>
        </tbody>
 </table>

with the following instruction jquery

<script>
                $(document).ready(function () {
  
                    // FETCHING DATA FROM JSON FILE
                    $.getJSON("http://localhost:8089/projectw/ServletJSON", function (data) {
                        var e= "";
  
                        // ITERATING THROUGH OBJECTS
                        $.each(data, function (key, value) {
  
                            //CONSTRUCTION OF ROWS HAVING
                            // DATA FROM JSON OBJECT
                            e += '<tr>'; 
                            e += '<td>' + value.ag + '</td>';
                            e += '<td>' + value.pa + '</td>';
                            e += '<td>' + value.ex + '</td>';
                            e += '<td>' +  value.em + '</td>';             
                            e += '<td>' +  value.at + '</td>';                
                            e += '<td>' + value.ct + '</td>';
                            e += '<td>' +  value.num_ex + '</td>';
                            e += '</tr>';
                        });
                          
                        //INSERTING ROWS INTO TABLE 
                        $('#example').append(e);
                    });
                });
            </script>

json example in servlet:

{
  "JsonTest": [
    {
      "ag": "RAX",
      "pa": "pa 1",
      "ex": "RXTT",
      "em": "ME",
      "at": 1,
      "ct": 0,
      "num_ex": "1"
    },
    {
      "ag": "TOM",
      "pa": "pa 2",
      "ex": "TOCC",
      "em": "MB",
      "at": 0,
      "ct": 0,
      "num_ex": "2"
    }
  ]
}

Observation If I order to display the json text (

     var req = new XMLHttpRequest();
     req.open('GET', 'http://localhost:8089/projectw/ServletJSON', true);
     req.send();
     req.onload = function(){
     var json=JSON.parse(req.responseText);
     document.getElementsByClassName('message(class of table example)')[0].innerHTML = JSON.stringify(json)

), I get success but to populate the table no. how could i adjust this? thank you all !

Expected lines to be filled with json values, no errors in console.

Answer 1

If you add a simple console.log() to your code to show what key and value are inside your loop, the problem is immediately obvious:

$.each(data, function (key, value) {
    console.log('key is', key, 'value is', value);
    // ... your code ...
});

The console shows:

key is JsonTest value is [ { "ag": "RAX", "pa": "pa 1", .... etc

And looking at your JSON object it is obvious - you have just 1 top level key, JsonTest , all your real data is nested under that. You want to be iterating over data.JsonTest , not data . Here's a simplified working example with that error fixed:

 let data = { "JsonTest": [ { "ag": "RAX", "pa": "pa 1", "ex": "RXTT", "em": "ME", "at": 1, "ct": 0, "num_ex": "1" }, { "ag": "TOM", "pa": "pa 2", "ex": "TOCC", "em": "MB", "at": 0, "ct": 0, "num_ex": "2" } ] }; $(document).ready(function () { populateTable(data); function populateTable(data) { var e= ""; let jsontest = data.JsonTest; // ITERATING THROUGH OBJECTS $.each(jsontest, function (key, value) { console.log('key is', key, 'value is', value); //CONSTRUCTION OF ROWS HAVING // DATA FROM JSON OBJECT e += '<tr>'; e += '<td>' + value.ag + '</td>'; e += '<td>' + value.pa + '</td>'; e += '<td>' + value.ex + '</td>'; e += '<td>' + value.em + '</td>'; e += '<td>' + value.at + '</td>'; e += '<td>' + value.ct + '</td>'; e += '<td>' + value.num_ex + '</td>'; e += '</tr>'; }); //INSERTING ROWS INTO TABLE $('#example').append(e); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="example"> <thead> <tr> <th>1</th> <th>2</th> <th>3</th> <th>4</th> <th>5</th> <th>6</th> <th>7</th> </tr> </thead> <tbody> </tbody> </table>

You really need to learn to do basic debugging - using your console is the first step in writing Javascript.

Note under SO guidelines I think this question should be considered a typo, and it is not likely to be useful to future visitors. I have voted to close as a typo.

Answer 2

Thank you, I changed the information and got the correct result:

$(document).ready(function() {
  // FETCHING DATA FROM JSON URL
  $.getJSON("http://localhost:8089/projectw/ServletJSON", function (data) {
    var e= "";
    let jsonTest= data.jsonTest; 
  });
});

I believe it can help other dev because the forum contains more questions with JSON files and the few with the use of URL!