Traverse JSON data with jQuery

Question

I can't figure out how to get a bunch of MySQL rows into a JSON data structure and iterate each of the row fields in java script.

Here is my query in codeigniter

function get_search_results() {

    //$this->db->like('title', $searchText);
    //$this->db->orderby('title');
    $query = $this->db->get('movies');

    if($query->num_rows() > 0) {

        foreach($query->result() as $movie) {

            $movies[] = $movie->title;                

        }

    }

    return $movies;

}

Encode array for json

$rows= $this->movie_model->get_search_results();
echo json_encode($rows);

My jQuery AJAX request,

 $.ajax({
      type: "GET",
      url: "publishlinks/search_movies",
      data: searchString,
      ...

This is how I've been trying to traverse rows in the java script. It is iterating over every character: 1 t 2 h 3 e 4 g ... 7 e I need this: 1 the game 2 lost 3 you

   success: 
      function(result) {                                
        $.each(result, function(key, val) {
        alert(key + ' ' + val);
      })

//alert(result);
}

Answer 1

It looks like it is treating the result as a string instead of parsed JSON, hence iterating over it as if it was a string. This could mean that it isn't returning a clean JSON encoded string in the response, so I'd check the response to make sure it is valid JSON. jQuery is supposed to intelligently guess the content type and parse accordingly.

You could also try the dataType: "json" option on the ajax request to force it to be parsed as JSON instead of letting jQuery guess.

Answer 2

Use the dataType property of $.ajax $.ajax documentation

dataType

"The type of data that you're expecting back from the server."

Use firebug to find the type of the response variable. In your case the response is string but it should be Array (or Object?)

If you don't want jQuery to automatically eval the json then live it as it is and in the success function add the following:

var parsed = $.parseJson(response);

Here is the documentation of the parseJson method: parseJson

Answer 3

I think you problem is you don't fetch actual json but simple string response....

use $.getJSON or specify dataType as json in your jquery ajax request!

Answer 4

Do you return a JSON header with your PHP ?

header('Content-type: application/json');

Else try

result = JSON.decode(result);

before your "each" loop

Answer 5

Be sure to return proper content-type from your server side. For JSON that would be application/json.

$rows = $this->movie_model->get_search_results();
header('Content-type: application/json');
echo json_encode($rows);

Also add dataType: "json" to your jQuery request, just as beefsack said:

$.ajax({
  type: "GET",
  url: "publishlinks/search_movies",
  data: searchString,
  dataType: "json",
  ...

Answer 6

dataType: "json",
success:function(data){
var obj=$.parseJSON(data);
data=obj.data;
$.each(data,function(){
   //json data
})
}