Failing to display json array in html table

Question

I am using a php script to produce a json array. The json array is retrieved by a jquery ajax script which then tries to read it and embed it in an html table. However, I'm stuck since it keeps producing 'undefined' data in the table. I want to display the information of the json array in my table after the ajax returns successfully. Please help...

The JSON Array format

[{"fullname":"Frank Robsinga","gender":"Male","email":"n\/a","phone":"n\/a","status":"1"}]

The javascript

<script>
$("#lookup").click(function() {

var key = $("#search").val();

$.ajax({
    type : 'POST',
    url : 'scripts/search-user-script.php',
    data : {
        key : key
    },
    success : function(obj) {

        $("#usersdata").html("");
        for (var i = 0; i < obj.length; i++) {
            var tr = "<tr>";
            var td0 = "<td>" + (i + 1) + "</td>";
            var td1 = "<td>" + obj[i]["fullname"] + "</td>";
            var td2 = "<td>" + obj[i]["gender"] + "</td>";
            var td3 = "<td>" + obj[i]["email"] + "</td>";
            var td4 = "<td>" + obj[i]["phone"] + "</td>";
            var td5 = "<td>" + obj[i]["status"] + "</td></tr>";
            $("#usersdata").append(tr + td0 + td1 + td2 + td3 + td4 + td5);

        }

    }
});
// .ajax
});
</script>

A screenshot of the results

@Mohammad obj[i]["status"] will return undefined it is missing . and it has [""] in obj[i].status — guradio
– guradio, Commented May 10, 2016 at 11:10

R3tep · Accepted Answer · 2016-05-10 11:20:40Z

3

Your ajax call return a String. You need to parse it into an Object before use it.

Try obj = JSON.parse(obj) before your for loop.

Like :

function(obj) {
  obj = JSON.parse(obj); // Add this line
  $("#usersdata").html("");
  for (var i = 0; i < obj.length; i++) {
    var tr = "<tr>";
    var td0 = "<td>" + (i + 1) + "</td>";
    var td1 = "<td>" + obj[i]["fullname"] + "</td>";
    var td2 = "<td>" + obj[i]["gender"] + "</td>";
    var td3 = "<td>" + obj[i]["email"] + "</td>";
    var td4 = "<td>" + obj[i]["phone"] + "</td>";
    var td5 = "<td>" + obj[i]["status"] + "</td></tr>";
    $("#usersdata").append(tr + td0 + td1 + td2 + td3 + td4 + td5);

  }

}

edited May 10, 2016 at 11:20

answered May 10, 2016 at 11:07

R3tep

12.9k10 gold badges52 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

guradio · Accepted Answer · 2016-05-10 11:20:22Z

2

var obj = [{
  "fullname": "Frank Robsinga",
  "gender": "Male",
  "email": "n\/a",
  "phone": "n\/a",
  "status": "1"
}]

for (var i = 0; i < obj.length; i++) {
  console.log(obj[i].fullname)
  console.log(obj[i].gender)
  console.log(obj[i].email)
  console.log(obj[i].phone)
  console.log(obj[i].status)
}

<table id='usersdata'></table>

you have to . also remove [""] like obj[i].status

you ajax should look like :

$.ajax({
    type : 'POST',
    url : 'scripts/search-user-script.php',
    dataType:'json',
    data : {
        key : key
    },
    success : function(obj) {

        $("#usersdata").html("");
        for (var i = 0; i < obj.length; i++) {
            var tr = "<tr>";
            var td0 = "<td>" + (i + 1) + "</td>";
            var td1 = "<td>" + obj[i].fullname + "</td>";
            var td2 = "<td>" + obj[i].gender + "</td>";
            var td3 = "<td>" + obj[i].email + "</td>";
            var td4 = "<td>" + obj[i].phone + "</td>";
            var td5 = "<td>" + obj[i].status + "</td></tr>";
            $("#usersdata").append(tr + td0 + td1 + td2 + td3 + td4 + td5);

        }

    }
});

edited May 10, 2016 at 11:20

answered May 10, 2016 at 11:03

guradio

15.6k4 gold badges39 silver badges64 bronze badges

3 Comments

Aine Evans Over a year ago

Displays this message in the console. "Uncaught TypeError: Cannot read property 'length' of undefined"

guradio Over a year ago

you have to add dataType:'json', in your ajax @BlakeTucker like type : 'POST', url : 'scripts/search-user-script.php', dataType:'json',

Aine Evans Over a year ago

@guardio: I added the dataType: 'json' and it worked. It now returns values. Thanks alot.

BOBIN JOSEPH · Accepted Answer · 2016-05-10 11:12:19Z

0

Try the following code, Make sure that your json properties have values. it should not contain NULL Values.

          
var obj = [{"fullname": "Fname Lname",
  "gender": "M"},{"fullname": "Name2 name",
  "gender": "F"}]


for (var i = 0; i < obj.length; i++) {
  
  
            var tr = "<tr>";
            var td0 = "<td>" + (i + 1) + "</td>";
            var td1 = "<td>" + obj[i].fullname + "</td>";
            var td2 = "<td>" + obj[i].gender + "</td>";
 
            $("#usersdata").append(tr + td0 + td1 + td2 );

        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<table id="usersdata" > </table>

edited May 10, 2016 at 11:12

answered May 10, 2016 at 11:03

BOBIN JOSEPH

1,04210 silver badges27 bronze badges

7 Comments

BOBIN JOSEPH Over a year ago

Then yo can try the above method !

Mohammad Over a year ago

obj must be string, not object.

BOBIN JOSEPH Over a year ago

He mentioned JSON Array

Mohammad Over a year ago

You must convert JSON to object instead of using object.

Aine Evans Over a year ago

I think so. Because obj.length returns 92 (which is the total of the characters in the array including the braces and parentheses)

|

Shashank · Accepted Answer · 2016-05-10 11:15:02Z

-1

I tried your code and was able to see the correct output. I guess, you must be having some errors, see the console to check it.

Please find the demo.

Refer to the code below:

HTML:

<table id="dataTable">

</table>

JS:

$(function() {
  var data = [{
    "fullname": "Frank Robsinga",
    "gender": "Male",
    "email": "[email protected]",
    "phone": "3243434343",
    "status": "1"
  }, {
    "fullname": "Lorem ipsum",
    "gender": "Male",
    "email": "[email protected]",
    "phone": "3445656565",
    "status": "2"
  }, {
    "fullname": "ex eam dictas",
    "gender": "Female",
    "email": "[email protected]",
    "phone": "87878676",
    "status": "1"
  }];

  for (i = 0; i < data.length; i++) {
    var tr = "<tr>";
    var td0 = "<td>" + (i + 1) + "</td>";
    var td1 = "<td>" + data[i]["fullname"] + "</td>";
    var td2 = "<td>" + data[i]["gender"] + "</td>";
    var td3 = "<td>" + data[i]["email"] + "</td>";
    var td4 = "<td>" + data[i]["phone"] + "</td>";
    var td5 = "<td>" + data[i]["status"] + "</td></tr>";
    $("#dataTable").append(tr + td0 + td1 + td2 + td3 + td4 + td5);

  }
});

CSS:

table {
  border-collapse: collapse;
}

table,
td {
  border: 1px solid;
}

answered May 10, 2016 at 11:15

Shashank

2,1002 gold badges21 silver badges40 bronze badges

2 Comments

Mohammad Over a year ago

You need to convert JSON data to object instead of using object.

Shashank Over a year ago

@R3tep, then what is the need of down-voting here? The url of the ajax call is relative though.

Collectives™ on Stack Overflow

Failing to display json array in html table

4 Answers 4

Comments

3 Comments

7 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related