Display JSON result in Table Format

Question

 $.ajax({
     type: 'GET',
     url: 'die_issue_result.php',
     data: {
         vals: die_no
     },
     dataType: "json", //to parse string into JSON object,
     success: function (data) {
         if (data) {
             var len = data.length;
             var txt = "";
             if (len > 0) {
                 for (var i = 0; i < len; i++) {
                     if (data[i].die_no && data[i].status && data[i].location) {
txt += "<tr><td>"+data[i].die_no+"</td><td>"+data[i].status+"</td><td>"+data[i].location+"</td></tr>";
                     }
                 }
                 if (txt != "") {
                     $("#table").append(txt).removeClass("hidden");
                 }
             }
         }
     }

Controller page

$die_no = array();
$status = array();
$location = array();
while ($row = mysql_fetch_array($query)) {
    $die_no[] = $row["die_no"]; // or smth like $row["video_title"] for title
    $status[] = $row["status"];
    $location[] = $row["location"];

}
$res = array($die_no, $status, $location);
echo json_encode($res);

HTML page

<p>
    <table id="table" class="hidden">
        <tr>
            <th>die_no</th>
            <th>Status</th>
            <th>Location</th>
        </tr>

I would like to display result in HTML table format, so I have passed my result in array format to Json but the results are not displayed in HTML page. I could see the response by using chrome Inspect element under network option . Please help me to display the retrieved results in HTML tabular format.

Answer 1

If you add console.log(data) in your succes response,you can see how the object is structured.

To access the desired json value you should try data['die_no'][i],data['status'][i],data['location'][i].

You can insert the response like this:

<table id="tbl">
</table>

Javascript:

 $.ajax({
 type: 'GET',
 url: 'die_issue_result.php',
 data: {
     vals: die_no
 },
 dataType: "json", //to parse string into JSON object,
success: function (data) {
         if (data) {
         var len = data.length;
             if (len > 0) {
                 for (var i = 0; i < len; i++) {                         
                  $('$tbl').append("<tr><td>"+data['die_no'][i]+"</td><td>"+data['status'][i]+"</td><td>"+data['location'][i]+"</td></tr>");                         
                 }                     
             }
         }
}
}); //you missed this in your question

Answer 2

You have syntax error: use

txt += <tr><td>

instead of

txt += tr><td>

after if condition

Answer 3

Use this

$.ajax({
            type: 'GET',
            url: 'die_issue_result.php',
            data: {
                vals: die_no
            },
            dataType: "json", //to parse string into JSON object,
            success: function (data) {

                if (data) {
                    var len = data.length;
                    var txt = "";
                    if (len > 0) {
                        for (var i = 0; i < len; i++) {
                            if (data[0][i] || data[1][i] || data[2][i]) {
                                txt += "<tr><td>" + data[0][i] + "</td><td>" + data[1][i]  + "</td><td>" + data[2][i]  + "</td></tr>";
                            }
                        }
                        if (txt != "") {
                            $("#table").append(txt).removeClass("hidden");
                        }
                    }
                }
            }
        });

Actually your php code is not returning key value pair. So in your js you cannot use data.die_no etc Use this like just I did:

data[0][i]