Parse JSON in jQuery error

Question

This follows on from a previous question of mine but has been refocused to address a specific jQuery issue.

I am currently trying to parse JSON results from a PHP / MySQL search into a simple HTML table. However, no data is returned into my table when using the search. I am getting a response from the Ajax request as when I debug my search page in Firebug my request is returned in this correct JSON string:

[{"ARTIST":"Coldplay","TRACKTITLE":"Fix You","PLAYLIST":"Rock"},{"ARTIST":"Katy Perry","TRACKTITLE":"Roar","PLAYLIST":"Pop"}]

Where in my jQuery file can I parse the JSON to append each string of {} data into a row of an HTML table (with ARTIST, TRACKTITLE and PLAYLIST as my column headers). I'm unclear as to where i'm going wrong and why my JSON string is not being converted into my HTML table correctly, so any pointers in the correct way to parse this data would be helpful.

jQuery file

$.post('ajax/name.php', {name: name}, function(data) {

var sentData=JSON.parse(data)

for(var i = 0; i < sentData.ARTIST.length; ++i)
var tr = $('<tr/>');
tr.append("<td>" + sentData.ARTIST + "</td>");
tr.append("<td>" + sentData.TRACKTITLE + "</td>");
tr.append("<td>" + sentData.PLAYLIST + "</td>");
$('#multiple').append(tr);
});

HTML extract

<table class="table hovered" id="multiple">
  <thead>
        <tr>
          <th class="text-left">Artist</th>
          <th class="text-left">Track Title</th>
          <th class="text-left">Playlist</th>
        </tr>
  </thead>
 </table>

Update

I added header('Content-Type: application/json'); into my PHP file and now Firebug is displaying a JSON tab, which is good news. However I still can't parse that JSON into the HTML table..

console.debug(data); // what does this show in firebug? is it really JSON? — Alberto Gaona, Dec 24 '13 at 16:12
It displays as `[Object {ARTIST="Coldplay", TRACKTITLE="Fix You", ...}]` which appears to be a JSON string — Byate, Dec 24 '13 at 17:01

Satpal · Answer 1 · 2013-12-24T14:23:29.333

0

Your data is valid JSON and is an array, so use index to fetch data. So you don't need JSON.parse

$.post('ajax/name.php', {
    name: name
}, function (data) {
    for (var i = 0; i < data.length; ++i)
        var tr = $('<tr/>');
    tr.append("<td>" + data[i].ARTIST + "</td>");
    tr.append("<td>" + data[i].TRACKTITLE + "</td>");
    tr.append("<td>" + data[i].PLAYLIST + "</td>");
    $('#multiple').append(tr);
});

edited Dec 24 '13 at 14:23

answered Dec 24 '13 at 14:16

Satpal

132,252
13
159
168

Thanks, have incorporated that now, however oddly this still produces the same result - a successful ajax response but no data in the table – Byate Dec 24 '13 at 14:25
Thanks - alas still no luck! – Byate Dec 24 '13 at 14:31

score 0 · Accepted Answer · answered Dec 25 '13 at 23:27

0

Not sure anyone's interested or if it's of any use but but I've solved the problem anyway - was a fairly simple problem.

There were some missing parentheses {} after the for line and ending after the $('#multiple').append(tr); line.

answered Dec 25 '13 at 23:27

Byate

123
1
2
16

Parse JSON in jQuery error

2 Answers2