Question

I have a json_encode in my php script which seems to fail the Jquery side of things if the json_encode is called inside a while loop.

When i view the result in a browser window other than the page i need the result in i can see that it does actually does work.

For example:

while ($row = mysql_fetch_array($result)) {     
    $id = $row['id'];
    $title = $row['title'];
    $content = $row['content'];

    $data = array("id" => $id,
    "title" => $title,
    "success" => true
    );
echo json_encode($data); // Inside the While Loop

}

and the output in the browser is:

{"id":"15","title":"Advanced Booking Examples","success":true}
{"id":"14","title":"Advanced Booking Fields","success":true}
{"id":"11","title":"Add New Driver","success":true}
{"id":"10","title":"Registering a Driver \/ Add New Vehicle","success":true}
{"id":"8","title":"Dispatch Controls","success":true}
{"id":"7","title":"Troubleshooting Driver Device Checklist","success":true}
{"id":"6","title":"Requirements Checklist","success":true}

In the jQuery response this is actually blank but if I leave the echo json_encode($data); just outside the while loop the jQuery picks up the response, however only 1 record – being the last record in the loop.

I need the jQuery to pick up all results from the loop.

Here’s the JS

$.ajax({ // Send it off for prcessing
        type: "POST",
        dataType: 'json',
        url: "includes/auto_suggest.php",
        data: {
            q: inputString
        },
        success: function (result) {
            if (result.success) {             
                var id = result.id;
                var title = result.title;                    
                $('#auto_id').append("<input type='text' class='hideid' id='hideid_" + id + "' value='" + id + "'/>");              
        $('#auto_title').prepend("<p>" + title + "</p>");
            }
        }
    });

Any ideas?

Thanks in advance

Answer 1

JSON needs to all be on one array or object. You need to append each row to an array, then json_encode that.

$data = array();
while ($row = mysql_fetch_array($result)) {     
    $id = $row['id'];
    $title = $row['title'];
    $content = $row['content'];

    $data[] = array(
      "id" => $id,
      "title" => $title,
      "success" => true
    );
}
echo json_encode($data);

Then in JavaScript, you will have an array of objects, that you can loop through.

$.ajax({ // Send it off for prcessing
    type: "POST",
    dataType: 'json',
    url: "includes/auto_suggest.php",
    data: {
        q: inputString
    },
    success: function (result) {
        $.each(result, function(){
          if (this.success) {
            var id = this.id;
            var title = this.title;
            $('#auto_id').append("<input type='text' class='hideid' id='hideid_" + id + "' value='" + id + "'/>");
            $('#auto_title').prepend("<p>" + title + "</p>");
         }
        });
    }
});