How can i parse Json with jquery

Question

I need to parse a simple json response (from my rails app):

[
    {
        "photo":
            {
                "updated_at":"2010-10-14T19:12:35Z",
                "photo_file_size":206422,
                "created_at":"2010-10-14T19:12:01Z"
            }
      },
      {
        "photo":
            {
                "updated_at":"2010-10-16T18:19:38Z",
                "photo_file_size":83593,
                "created_at":"2010-10-14T19:14:35Z"
            }
       }
]

i am using:

$(document).ready(function()
{
    $.ajax({
     type: "GET",
     url: "http://myurl...",    
     dataType: "jsonp",
     success: function(data){
        console.log(data);          
        //...
          });

     }
    });
});

firebug console output indicate that the response is ok!

How can i parse each photo_file_size from all photo blocks using function(data)?

any help will be highly appreciated :-)

Harmen · Accepted Answer · 2010-10-27 18:59:33Z

6

jQuery will automatically parse the data as JSON, because you set the data type. In the success method you can use basic Javascript to do something with photo_file_size

$(document).ready(function(){
  $.ajax({
    type: "GET",
    url: "http://myurl...",    
    dataType: "json",
    success: function(data){
      for( var i=0; i<data.length; i++ ){
        alert( data[i].photo.photo_file_size );
      }
    }
  });
});

However, if you're using JSONP, you need to approach it completely different. JSONP has a callback function, and will be served in a <script> tag (to avoid the same origin policy, see Wiki)

<script>
    function callback( data ){
      for( var i=0; i<data.length; i++ ){
        alert( data[i].photo.photo_file_size );
      }
    }
</script>
<script src="yoururltojsonp.php?callback=callback"></script>

Also, take a look at jQuery's solution

edited Oct 27, 2010 at 18:59

answered Oct 27, 2010 at 17:53

Harmen

22.5k4 gold badges57 silver badges77 bronze badges

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

2 Comments

Lamp Over a year ago

Thanx but, if i change 'jsonp' with 'json' response fail!How data should be look in jsonp? My url looks like: localhost:3000/api/people?username=jim&callback=user ,why this isn't JSONP data?

Harmen Over a year ago

@vic, because the code you provided was a basic JSON structure I thought it was just JSON, not JSONP. I'll update my answer, JSONP is something completely different

mway · Accepted Answer · 2010-10-27 17:52:41Z

1

jQuery's JSON parser is $.parseJSON(). So, in your success function:

var json = $.parseJSON(data);

or, if you weren't using a json response type:

var json = $.parseJSON(data.responseText);

and you should be good to go.

answered Oct 27, 2010 at 17:52

mway

4,3573 gold badges28 silver badges37 bronze badges

Comments

Alejandro Bologna · Accepted Answer · 2010-10-27 17:56:27Z

1

function(data) 
{
  for(var i=0; i<data.length; i++) 
    console.log(data[i].photo.photo_file_size);
}

answered Oct 27, 2010 at 17:56

Alejandro Bologna

8236 silver badges8 bronze badges

Comments

Sandro · Accepted Answer · 2010-10-27 19:03:57Z

1

This isn't JSONP data, this should just be JSON. Then you will have access to the data as if it were a normal variable. In this case, data would be an array.

This is assuming the server is the same as the server that is requesting the JSON.

If you need JSONP data it should look similar to this:

$callback$([
    {
        "photo":
        {
            "updated_at":"2010-10-14T19:12:35Z",
            "photo_file_size":206422,
            "created_at":"2010-10-14T19:12:01Z"
        }
    },
    {
        "photo":
        {
            "updated_at":"2010-10-16T18:19:38Z",
            "photo_file_size":83593,
            "created_at":"2010-10-14T19:14:35Z"
        }
    }
]);

$callback$ is just a simple print of whatever was passed in the callback= GET variable. In essence, JSONP is really just calling a function (callback). It's placed in the DOM as a script tag, which is why it circumvents the cross-domain issue. (Maybe that's too much information :)

edited Oct 27, 2010 at 19:03

answered Oct 27, 2010 at 17:54

Sandro

4,7711 gold badge36 silver badges41 bronze badges

2 Comments

Harmen Over a year ago

+1 In my answer I didn't mention this, while it is quite important

Lamp Over a year ago

If i change 'jsonp' with 'json' response fail!How data should be look in jsonp?

Collectives™ on Stack Overflow

How can i parse Json with jquery

4 Answers 4

2 Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related