JSON output not being displayed - php

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.

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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