JSON output not being displayed

Question

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.

possible duplicate of How to return the response from an AJAX call? — Bergi
– Bergi, Commented Apr 22, 2013 at 10:52

Arun P Johny · Accepted Answer · 2013-04-22 10:36:21Z

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

PSR · Accepted Answer · 2013-04-22 10:38:04Z

0

$.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>";
                    });

answered Apr 22, 2013 at 10:38

PSR

40.4k43 gold badges115 silver badges154 bronze badges

Comments

Ankush Jain · Accepted Answer · 2013-04-22 10:47:25Z

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

Michael Besteck · Accepted Answer · 2013-04-22 10:54:16Z

0

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

answered Apr 22, 2013 at 10:54

Michael Besteck

2,41918 silver badges11 bronze badges

Collectives™ on Stack Overflow

JSON output not being displayed

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related