Looping over JSON (Adding HTML)

Question

I am trying to loop over a JSON output from PHP and assign a list item to each index.

Im having two separate issues.

The encode is adding weird slashes and quotes when they are not needed.
I get a type error (not valid argument) when parsing the JSON string even when set from a test php array.

PHP

$data= json_encode($stmt->fetchAll(PDO::FETCH_ASSOC));
echo json_encode($data);

JSON

"[
    {\"id\":\"1\",\"user_id\":\"1\",\"message\":\"MSG 1\"},
    {\"id\":\"2\",\"user_id\":\"1\",\"message\":\"MSG 2\"},
    {\"id\":\"3\",\"user_id\":\"1\",\"message\":\"MSG 3 \"},
]"

jQuery

  $.ajax({ url: 'chat.php',
    dataType: 'json',
    type: 'post',
    error: function(statusCode, errorThrown) {
                updateError(statusCode, errorThrown);
            },
    success: function(data){

         $.each(data, function() {
                $.each(this, function(k, v) {
                    $('<li data-msgid="'+data.id+'">' + data.user_id + '::' + data.message + '</li>').appendTo('#chat_area');
                 });
            });

        }

});

Im using ajax call rather than json as I will eventually be passing data in this same function. Any help is much appreciated.

The backslashes are needed to escape the double quotes since JSON uses double quotes to contain strings. You can replace them if you need but it sounds to me that this is how the string is being inserted into your database — Purefan
– Purefan, Commented May 15, 2014 at 19:03
The strings do not contain the quotes in the database. Other json calls are outputting properly, however, they are single indexes in the output. — Ray
– Ray, Commented May 15, 2014 at 19:05

jeroen · Accepted Answer · 2014-05-15 19:05:52Z

2

You are encoding twice:

$data= json_encode($stmt->fetchAll(PDO::FETCH_ASSOC));
echo json_encode($data);

Remove the first one and only encode the final data:

$data = $stmt->fetchAll(PDO::FETCH_ASSOC);
...
echo json_encode($data);

answered May 15, 2014 at 19:05

jeroen

91.8k22 gold badges118 silver badges132 bronze badges

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

5 Comments

Ray Over a year ago

that fixed the slash issue, however now its returning undefined on the printed list element. Its getting the current results, just not printing them correctly.

jeroen Over a year ago

@Ray Check your variables in the inner loop, at the very least data.id would not exist as it would be data[0].id, data[1].id, etc. You probably want the v value instead. Do a console.log() of the variables in the inner loop and then use what you need.

jeroen Over a year ago

@Ray By the way, you probably only want one .each() loop: The outer loop using the syntax of the inner loop you have now to access the variables directly.

Ray Over a year ago

@jereon if I remove the first loop I only have access to the first element and not able to use the v var since there is more than one "key" in my array. This is for a chat room so there will be multiple items in the array coming it a time. The PHP uses long polling (comet) but still might return more than one item. How would i make this work.

jeroen Over a year ago

@Ray It would seem you only need one loop $.each(data, function(k, v) { and then you could access v.id, etc.

Collectives™ on Stack Overflow

Looping over JSON (Adding HTML)

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related