Geek Answers Handbook

JSON output not showing

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

<?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 launched on my server, gives me an excellent result, i.e. all the details of the student and their tags 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'm trying to display this in an 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 displays the 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

Help us debug this.

+4
source share
4 answers

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

Changing the solution of $.each(json, function(v) { to $.each(json, function(iv) {

 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

+3
source

$.each has two parameters: index , and the other 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>"; });
0
source

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

html

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

You must use the second parameter of 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); }); }
0
source

More articles:


All Articles