Parsing MySQL JSON results in Jquery

Question

I'm attempting to parse some JSON results from a MySQL database into a simple HTML table. Currently, I can return the raw JSON string data correctly. However, when I try to parse these results into an HTML table, I am returned 'Undefined'.

JS File:

$('input#name-submit').on('click', function() {
var name = $('input#name').val();
if ($.trim(name) != '') {
$.post('ajax/name.php', {name: name}, function(data) {
 var tr;
    for (var i = 0; i < data.length; i++) {
        tr = $('<tr/>');
        tr.append("<td>" + data[i].ARTIST + "</td>");
        tr.append("<td>" + data[i].LOCATION + "</td>");
        $('table').append(tr);
        }
});
}

});

table from HTML file:

<table>
<tr>
    <th>ARTIST</th>
    <th>LOCATION</th>
</tr>
</table>

Edited:

The JSON results, being returned as 'Undefined' in my index file

{"ARTIST":"Katy Perry","LOCATION":"United States"}

About the table HTML... the first part should be enclosed in a <thead> element rather than <tr>. Then, <tbody> for the content. — JAL
– JAL, Commented Dec 22, 2013 at 3:40
Offtopic, but this might be interesting for you: handlebarsjs.com — Ties
– Ties, Commented Dec 22, 2013 at 14:55

Explosion Pills · Accepted Answer · 2013-12-22 02:40:40Z

4

jQuery is intelligent about determining the return type of ajax requests based on a lot of factors. In this case, I'm almost positive that data has already been parsed. If you remove the sentdata line and just use data instead, your code should work as you intend.

See the dataType property for ajax for jQuery

answered Dec 22, 2013 at 2:40

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

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

7 Comments

Byate Over a year ago

Ah yes I thought this line could be surplus to requirements. I've removed it, however, i'm now only being returned an 'undefined' result from the JSON in each column.

JAL Over a year ago

@Byate have you inspected the return from your Ajax request in firebug/Web Inspector/F12 tools?

Byate Over a year ago

I've inspected in Firebug and the JSON is loading as inspected. It's parsing it into the HTML table where the problem begins, resulting in 'Undefined' results

Explosion Pills Over a year ago

@Byate when does it return "'Undefined' results?"

Byate Over a year ago

This is displayed when I view my index file in my browser. When debugging the page, the page is successfully returning the JSON data but displaying it as 50 'Undefined' records where the parsed JSON data should be. Stumped!

|

Zera42 · Accepted Answer · 2013-12-22 15:55:01Z

1

An exammple is here: http://jsfiddle.net/nqRk9/2/

if your data is:

{"ARTIST":"Katy Perry","LOCATION":"United States"}

You could just do this without the for loop:

    tr = $('<tr/>');
    tr.append("<td>" + data.ARTIST + "</td>");
    tr.append("<td>" + data.LOCATION + "</td>");
    $('#single').append(tr);

But if you were to have more artists and locations here is an example of what your data could look like.

{"ARTIST":[["Katy Perry"], ["Artist 2"], ["Artist 3"]],"LOCATION":[["United States"],["Location 2"], ["Location 3"]]};

And here's how you could access the data:

for(var i = 0; i < data.ARTIST.length; ++i)
{
        tr = $('<tr/>');
        tr.append("<td>" + data.ARTIST[i] + "</td>");
        tr.append("<td>" + data.LOCATION[i] + "</td>");
        $('#multiple').append(tr);
}

I believe that your array subscript is in the wrong place, In the OP.

answered Dec 22, 2013 at 15:55

Zera42

2,6921 gold badge25 silver badges36 bronze badges

1 Comment

Byate Over a year ago

Thanks - it didn't solve the particular problem I had but this is a nice way of doing it and i've adapted it into my code. I added a variable var sentdata=JSON.parse(data) just before the for loop and and changed data to sentdata. This now parses the data as desired.

Collectives™ on Stack Overflow

Parsing MySQL JSON results in Jquery

2 Answers 2

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related