CODEWITHSUNDEEP
phpjavascripthtmljson
Lohith Korupolu
Lohith Korupolu

Reputation: 1074

JSON output not being displayed

I have a PHP file that gives me output in JSON Format. The code is below -

<?php
    include 'configure.php';
    $qr = "SELECT * FROM student_details";
    $res= mysql_query($qr);
    $i=0;
    while($row = mysql_fetch_array($res))
         {
         $stud_arr[$i]["full_name"] = $row["full_name"];
         $stud_arr[$i]["reg_no"] = $row["regno"];
         $stud_arr[$i]["address"] = $row["address"];
         $stud_arr[$i]["mark1"] = $row["mark1"];
         $stud_arr[$i]["mark2"]= $row["mark2"];
         $stud_arr[$i]["mark3"] = $row["mark3"];
    $i++;
     }
    header('Content-type: application/json'); 
    echo json_encode($stud_arr);
    ?>

This file when ran on my server, is giving me the result perfectly, i.e. all the student details and their marks as here -

[{"full_name":"Lohith","reg_no":"100","address":"street, lane","mark1":"90","mark2":"87","mark3":"88"},{"full_name":"Ranjeet","reg_no":"101","address":"dfkljg","mark1":"56","mark2":"45","mark3":"39"},{"full_name":"karthik","reg_no":"102","address":"askjldf","mark1":"85","mark2":"90","mark3":"100"}]

Now I am trying to display this on a HTML file using -

function getAllDetails()
{
var myTable = '' ;
myTable += '<table id="myTable" cellspacing=0 cellpadding=2 border=1>' ;
  myTable +=   "<tr><td><b>No</b></td><td><b>Full Name</b></td><td><b>Mark1</b></td><td><b>Mark2</b></td><td><b>Mark3</b></td></tr>";var url = "json-example2.php";
  $.getJSON(url, function(json) { $.each(json, function(v) {    
                myTable +=   "<tr><td>"+v.reg_no+"</td><td>"+v.full_name+"</td><td>"+v.mark1+
                "</td><td>"+v.mark2+
                "</td><td>"+v.mark3+
                "</td></tr>";   });

                $("#stud_tbl").html(myTable);});};

The above code is displaying a table but says "undefined" in each data cell of the table.

    No  Full Name     Mark1           Mark2           Mark3
undefined   undefined   undefined   undefined   undefined
undefined   undefined   undefined   undefined   undefined
undefined   undefined   undefined   undefined   undefined

Please help on how to debug this.

Upvotes: 4

Views: 147

Answers (4)

Michael Besteck
Michael Besteck

Reputation: 2423

You must use the second parameter of the each function.

function getAllDetails()
    {
    var myTable = '' ;
    myTable += '<table id="myTable" cellspacing=0 cellpadding=2 border=1>' ;
    myTable +=   "<tr><td><b>No</b></td><td><b>Full Name</b></td><td><b>Mark1</b></td><td><b>Mark2</b></td><td><b>Mark3</b></td></tr>";
    var url = "SCRIPTNAME.php";
    $.getJSON(url, function(json) { $.each(json, function(v, x) {
        console.log("REG NR = "+x.reg_no);
        myTable +=   "<tr><td>"+x.reg_no+"</td><td>"+x.full_name+"</td><td>"+x.mark1+
            "</td><td>"+x.mark2+
            "</td><td>"+x.mark3+
            "</td></tr>";   });

        $("#stud_tbl").html(myTable);
    });
    }

Upvotes: 0

Ankush Jain
Ankush Jain

Reputation: 1527

try the following. Here is demo at http://jsfiddle.net/H3cjC/3/

html is 

<div class="tbl">
</div>

var data='[{"full_name":"Lohith","reg_no":"100","address":"street, lane","mark1":"90","mark2":"87","mark3":"88"},{"full_name":"Ranjeet","reg_no":"101","address":"dfkljg","mark1":"56","mark2":"45","mark3":"39"},{"full_name":"karthik","reg_no":"102","address":"askjldf","mark1":"85","mark2":"90","mark3":"100"}]'
data=$.parseJSON(data);
var myTable = '' ;
myTable += '<table id="myTable" cellspacing=0 cellpadding=2 border=1>' ;
  myTable +=   "<tr><td><b>No</b></td><td><b>Full Name</b></td><td><b>Mark1</b></td><td><b>Mark2</b></td><td><b>Mark3</b></td></tr>";var url = "json-example2.php";
 $.each(data, function(i,v) {    
   myTable +=   "<tr><td>"+data[i].reg_no+"</td><td>"+data[i].full_name+"</td>   <td>"+v.mark1+
                "</td><td>"+data[i].mark2+
                "</td><td>"+data[i].mark3+
                "</td></tr>";   
 });
$('.tbl').html(myTable);

Upvotes: 0

PSR
PSR

Reputation: 40318

$.each has two parameters one is index and another is value

      $.each(json, function(index, value) {
                        myTable += "<tr><td>" + value.reg_no + "</td><td>"
                                + value.full_name + "</td><td>" + value.mark1
                                + "</td><td>" + value.mark2 + "</td><td>"
                                + value.mark3 + "</td></tr>";
                    });

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

The first parameter to jQuery.each() is the index of the value and second one the value.

Solution change $.each(json, function(v) { to $.each(json, function(i v) {

function getAllDetails() {
  var myTable = '';
    myTable += '<table id="myTable" cellspacing=0 cellpadding=2 border=1>';
    myTable += "<tr><td><b>No</b></td><td><b>Full Name</b></td><td><b>Mark1</b></td><td><b>Mark2</b></td><td><b>Mark3</b></td></tr>";
    var url = "data.json";
    $.getJSON(url, function(json) {
                $.each(json, function(i, v) {
                            myTable += "<tr><td>" + v.reg_no + "</td><td>"
                                    + v.full_name + "</td><td>" + v.mark1
                                    + "</td><td>" + v.mark2 + "</td><td>"
                                    + v.mark3 + "</td></tr>";
                        });

                $("#stud_tbl").html(myTable);
            });
};

Demo: Plunker

Upvotes: 3

Related Questions