CODEWITHSUNDEEP
javascriptjqueryhtmljson
John Wick
John Wick

Reputation: 19

Trying to parse JSON objects to HTML table

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>" )
                            })  
                }*/
    })
    },

Upvotes: 0

Views: 1775

Answers (5)

TalESid
TalESid

Reputation: 2514

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>

Upvotes: 0

Ankit
Ankit

Reputation: 6133

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

Upvotes: 2

Hunter
Hunter

Reputation: 469

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

Upvotes: 0

Nafiul Islam
Nafiul Islam

Reputation: 1220

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

Upvotes: 0

JosephC
JosephC

Reputation: 166

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"
    }
]

Upvotes: 0

Related Questions