尝试将JSON对象解析为HTML表

Question

I am using a jquery method to load JSON objects from the database. Then, I would want to display the record row by row in a HTML table. As can be seen in my JS file, I have tried to use a for and for each loop to loop through the data records but none of them are working apparently. My table seems to not display anything on the table or even error on result/ console log. However, there are data in my network log.

The json record in the network log is:

data: [
      0:{
        "id": "1",
        "name": "John",
        "type": "Client"
      },
      1:{
        "id": "2",
        "name": "Damen",
        "type": "Agent"
      },
      2:{
        "id": "3",
        "name": "Aiden",
        "type": "Admin"
      }
    ]

The HTML page is:

<table id="report" class="table table-bordered table-striped table-hover js-basic-example dataTable">
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Type</th>           
            </tr>
        </thead>
        <tbody>         
        </tbody>
</table>
<script>
    app.viewReport();      
</script>

My JS page is:

viewReport : function() {
               $.ajax({
                url: "/FIS/back-api/client/transaction/view",
                dataType: "json",
                method : 'GET',
                success : function(data){
                 for (var i = 0; i < data.length; i++) {
                    tr = $('<tr/>');
                    tr.append("<td>" + data[i].id+ "</td>");
                    tr.append("<td>" + data[i].name+ "</td>");
                    tr.append("<td>" + data[i].type+ "</td>");  
                    $('#report tbody').append(tr);
                }               
                }           
                /*$.each(data,function(i,item){
                            $('#report tr.odd').remove();
                            $("#report tbody").append(
                                "<tr>"
                                    +"<td>"+item.id+"</td>"
                                    +"<td>"+item.name+"</td>"
                                    +"<td>"+item.type+"</td>"                                                       
                                +"</tr>" )
                            })  
                }*/
    })
    }, 

Answer 1

John , your JSON is invalid , this is the closest valid JSON i prepared from sample you shared above :

[
  {
    "id": "1",
    "name": "John",
    "type": "Client"
  },
  {
    "id": "2",
    "name": "Damen",
    "type": "Agent"
  },
  {
    "id": "3",
    "name": "Aiden",
    "type": "Admin"
  }
]

Notice that for an array of objects 0 : {} format is invalid, so when you query it in a loop you're not receiving any result.

Incorrect :

   0:{
        "id": "1",
        "name": "John",
        "type": "Client"
      }

Correct :

    {
        "id": "1",
        "name": "John",
        "type": "Client"
      }

How to validate your JSON

Following sites will help you verify your json :

jsonlint

jsoneditoronline

Answer

Re-generate your JSON and then proceed as indicated in other answers.

Also , i would advice against parsing the result as string ! In my humble opinion, the proper way to do this is to return a valid json from Backend/server

Answer 2

try to append it like this

 for (var i = 0; i < data.length; i++) {
    var htm = '';
    htm += '<tr>';
    htm += "<td>" + data[i].id.toString() + "</td>";
    htm += "<td>" + data[i].name.toString() + "</td>";
    htm += "<td>" + data[i].type.toString() + "</td>";  
    htm += '</tr>';
    $('#report tbody').append(htm);
 } 

Answer 3

Process your JSON data correctly like Winnie said in another answer of this question. Then you have not defined table row correctly.

for (i = 0; i < data.length; i++) {
    $('#report tbody').append(
        $('<tr>').append(
            $('<td>').text(data[i].id),
            $('<td>').text(data[i].name),
            $('<td>').text(data[i].type)
        )
    );
}

Answer 4

Your data array is having keys, which is incorrect json format, If its an array it should look like:

[
    {
        "id": "1",
        "name": "John",
        "type": "Client"
    },
    {
        "id": "2",
        "name": "Damen",
        "type": "Agent"
    },
    {
        "id": "3",
        "name": "Aiden",
        "type": "Admin"
    }
]

Answer 5

 var data = [{ "id": "1", "name": "John", "type": "Client" }, { "id": "2", "name": "Damen", "type": "Agent" }, { "id": "3", "name": "Aiden", "type": "Admin" } ]; for (var i = 0; i < data.length; i++) { var body = document.getElementById("tableBody"); var row = body.insertRow(); for (var item in data[i]) { var cell = row.insertCell(); cell.innerHTML = data[i][item]; } } 

 <html> <body> <table> <thead> <tr> <th>Id</th> <th>Name</th> <th>Type</th> </tr> </thead> <tbody id="tableBody"> </tbody> </table> </body> </html>