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

Looks right to me. What kinda of issues are you running into? Any errors? — Kevin
– Kevin, Commented Jul 31, 2011 at 8:54
You mean something like this? stackoverflow.com/questions/515684/how-to-use-json-with-jquery — Quasdunk
– Quasdunk, Commented Jul 31, 2011 at 8:55

beefsack · Accepted Answer · 2011-07-31 08:57:01Z

3

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.

answered Jul 31, 2011 at 8:57

beefsack

4381 gold badge5 silver badges10 bronze badges

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

1 Comment

el_pup_le Over a year ago

Ooohhh thank you, I had the dataType: 'json' commented out for some reason and I even omitted that part from my question O.O

Szymon Wygnański · Accepted Answer · 2011-07-31 08:57:57Z

3

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

answered Jul 31, 2011 at 8:57

Szymon Wygnański

11.2k7 gold badges33 silver badges46 bronze badges

Comments

Demiro-FE-Architect · Accepted Answer · 2011-07-31 08:57:44Z

2

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!

answered Jul 31, 2011 at 8:57

Demiro-FE-Architect

3,74114 gold badges56 silver badges90 bronze badges

Comments

Kakawait · Accepted Answer · 2011-07-31 08:56:57Z

1

Do you return a JSON header with your PHP ?

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

Else try

result = JSON.decode(result);

before your "each" loop

answered Jul 31, 2011 at 8:56

Kakawait

4,0396 gold badges35 silver badges62 bronze badges

Comments

Ihor Kaharlichenko · Accepted Answer · 2011-07-31 09:01:44Z

1

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

answered Jul 31, 2011 at 9:01

Ihor Kaharlichenko

6,3581 gold badge29 silver badges33 bronze badges

Comments

Nick · Accepted Answer · 2011-07-31 09:24:03Z

0

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

answered Jul 31, 2011 at 9:24

Nick

1,8693 gold badges24 silver badges33 bronze badges

Collectives™ on Stack Overflow

Traverse JSON data with jQuery

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related