Read JSON returned by PHP in Javascript

Question

I want to select some content from the database and return it to the javascript. There are several rows returned by the database. I tried this with JSON and also get a result, if I print it out. But if I want to convert the JSON string, there is always the error message below. (at the JSON.parse) So, I assume maybe an mistake while filling the array? Thanks in advance guys!

Javascript:

$.ajax({
 url: "./select_firsttracks.php",
 type: "post",
 success: function(resultset) {
 $("#erroroutput").html(resultset);
 var arr = JSON.parse("{" + resultset + "}"); // --> "Uncaught SyntaxError: Unexpected token {" 
 },
 error: function(output) {
 $("#erroroutput").html("fatal error while fetching tracks from db: " + output);
 }
});

PHP:

$storage = array();
while($row = $result->fetch_array())
{
 $storage[] = 
 array
 (
 "id" => $row["id"],
 "trackname" => $row["trackname"],
 "artist" => $row["artist"],
 "genre" => $row["genre"],
 "url" => $row["url"],
 "musicovideo" => $row["musicovideo"]
 );
 echo json_encode($storage);
}

Output on the console:

[{"id":"1","trackname":"yes","artist":"Lady Gaga","genre":"Pop","url":"ftp:\/development","musicovideo":"1"}][{"id":"1","trackname":"yes","artist":"Lady Gaga","genre":"Pop","url":"ftp:\/development","musicovideo":"1"},{"id":"2","trackname":"no","artist":"Prinz Pi","genre":"Rap","url":"ftp:\/development","musicovideo":"1"}]

• Amadan: Your resultset already is a valid JSON; adding braces makes it bad.
• Tushar: Don't need to concat { and } in JSON.parse("{" + resultset + "}"); Code: JSON.parse(resultset); or add dataType: 'json', in ajax configurations

Answer 1

echo the json after the while

$storage = array();
while($row = $result->fetch_array())
{
 $storage[] = 
 array
 (
 "id" => $row["id"],
 "trackname" => $row["trackname"],
 "artist" => $row["artist"],
 "genre" => $row["genre"],
 "url" => $row["url"],
 "musicovideo" => $row["musicovideo"]
 );
}
echo json_encode($storage);

and change:

 var arr = JSON.parse(resultset);

Answer 2

You're adding curly braces in front and behind your received JSON, here:

var arr = JSON.parse("{" + resultset + "}");

Phps json_encode returns perfectly valid JSON by itself. Try it without adding the braces:

var arr = JSON.parse(resultset);

Answer 3

The resulting json string is not valid, you can check it with jsonlint

Modify your php code to echo outside the loop:

while($row = $result->fetch_array())
{
 $storage[] = 
 array
 (
 "id" => $row["id"],
 "trackname" => $row["trackname"],
 "artist" => $row["artist"],
 "genre" => $row["genre"],
 "url" => $row["url"],
 "musicovideo" => $row["musicovideo"]
 );
}
echo json_encode($storage);

And in javascript just use the output as a javascript object

success: function(resultset) {
 console.log(resultset)
 resultset.each(function(index,element){ console.log(index,element )})
 },