el_pup_le
el_pup_le

Reputation: 12179

Traverse JSON data with jQuery

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);
}

Upvotes: 0

Views: 667

Answers (6)

Nick
Nick

Reputation: 1869

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

Upvotes: 0

Ihor Kaharlichenko
Ihor Kaharlichenko

Reputation: 6260

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",
  ...

Upvotes: 1

Szymon Wygnański
Szymon Wygnański

Reputation: 11064

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

Upvotes: 3

Demiro-FE-Architect
Demiro-FE-Architect

Reputation: 3740

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!

Upvotes: 2

beefsack
beefsack

Reputation: 438

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.

Upvotes: 3

Kakawait
Kakawait

Reputation: 4029

Do you return a JSON header with your PHP ?

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

Else try

result = JSON.decode(result);

before your "each" loop

Upvotes: 1

Related Questions