convert string to JSON with jQuery

Question

I am getting data from the Flickr API with a middle-man file (to avoid crossdomain problems):

<?php

header('Cache-Control: no-cache, must-revalidate');
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Content-type: application/json');

die(json_encode( file_get_contents($_REQUEST['url']) ) );
?>

This file is fetched by javascript:

//Flickr
var myurl = encodeURIComponent('http://api.flickr.com/services/rest/?method=flickr.photosets.getPhotos&api_key=1408bff5f72a4b84b924d13e8562b6a2&photoset_id=77649470@N03&photoset_id=72157629903184261&format=json');
    $.getJSON( "middle.php?url=" + myurl, function(data){
        console.log(typeof data);
    });

But the console.log show that the result is an "string" and not an JSON object. Ive tried to convert it to a JSON object with:

jQuery.parseJSON(data)

but the console gave me this error:

Uncaught SyntaxError: Unexpected token j

This is the string:

jsonFlickrApi({"photoset":{"id":"72157629903184261", "primary":"7115173307", "owner":"77649470@N03", "ownername":"wedocommunication", "photo":[{"id":"7115173331", "secret":"24900ff306", "server":"5447", "farm":6, "title":"Lounge", "isprimary":"0"}, {"id":"7115173307", "secret":"3435f9a983", "server":"7256", "farm":8, "title":"Hofansicht", "isprimary":"1"}, {"id":"7115173379", "secret":"7747e50597", "server":"7278", "farm":8, "title":"Konfi", "isprimary":"0"}, {"id":"6969093048", "secret":"d4389bc0e4", "server":"7055", "farm":8, "title":"Lounge", "isprimary":"0"}, {"id":"6969093086", "secret":"8e7263005b", "server":"5152", "farm":6, "title":"Eingangsbereich", "isprimary":"0"}], "page":1, "per_page":500, "perpage":500, "pages":1, "total":"5"}, "stat":"ok"})

What could I do to convert the string into an object?

chrismarx · Accepted Answer · 2012-04-27 14:35:21Z

5

Flickr is returning the response as jsonp, that's javascript not json, and you should use jquery jsonp type request for this, see - http://api.jquery.com/jQuery.ajax/

in fact that page gives an example for the flickr api-

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
  {
    tags: "cat",
    tagmode: "any",
    format: "json"
  },
  function(data) {
    $.each(data.items, function(i,item){
      $("<img/>").attr("src", item.media.m).appendTo("#images");
      if ( i == 3 ) return false;
    });
  });

answered Apr 27, 2012 at 14:35

chrismarx

12.9k11 gold badges89 silver badges101 bronze badges

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

3 Comments

chrismarx Over a year ago

and as @ocanal mentioned in his answer, you don't need the proxy for this

chrismarx Over a year ago

it works like this - pastebin.com/n7WCJrGZ, looking at why urs doenst work

chrismarx Over a year ago

ah, I see, ok, they're missing the jsoncallback parameter, try this - jsfiddle.net/kzETz

Okan Kocyigit · Accepted Answer · 2012-04-27 14:37:10Z

2

you don't need to use proxy for avoiding crossdomain problems, just do it with JSONP request.

$.getJSON("http://api.flickr.com/services/rest/?method=flickr.photosets.getPhotos&api_key=1408bff5f72a4b84b924d13e8562b6a2&photoset_id=77649470@N03&photoset_id=72157629903184261&format=json&jsoncallback=?",function(data){
        console.log(data);
    });

DEMO

answered Apr 27, 2012 at 14:37

Okan Kocyigit

13.5k18 gold badges74 silver badges132 bronze badges

Comments

ryanve · Accepted Answer · 2012-04-27 14:35:39Z

0

The JSON starts with the object curly brace { The jsonFlickrApi( is not part of the JSON object. You could string replace data first to remove the jsonFlickrApi( part first if you only need the inner, but it seems like Flickr would have a better built-in solution.

answered Apr 27, 2012 at 14:35

ryanve

52.9k33 gold badges107 silver badges142 bronze badges

Comments

shadyyx · Accepted Answer · 2012-04-27 14:36:00Z

You would have to remove that "jsonFlickrApi(" at the begining and ")" at the end, so the 'json string' reads only {"photoset":{"id":"72157629903184261", "primary":"7115173307", "owner":"77649470@N03", "ownername":"wedocommunication", "photo":[{"id":"7115173331", "secret":"24900ff306", "server":"5447", "farm":6, "title":"Lounge", "isprimary":"0"}, {"id":"7115173307", "secret":"3435f9a983", "server":"7256", "farm":8, "title":"Hofansicht", "isprimary":"1"}, {"id":"7115173379", "secret":"7747e50597", "server":"7278", "farm":8, "title":"Konfi", "isprimary":"0"}, {"id":"6969093048", "secret":"d4389bc0e4", "server":"7055", "farm":8, "title":"Lounge", "isprimary":"0"}, {"id":"6969093086", "secret":"8e7263005b", "server":"5152", "farm":6, "title":"Eingangsbereich", "isprimary":"0"}], "page":1, "per_page":500, "perpage":500, "pages":1, "total":"5"}, "stat":"ok"}.

This then could be parsed by JS as regular JSON data.

It's returning that wrapper for a reason, it's a JSONp response.

Enrique Moreno Tent · Accepted Answer · 2012-04-27 14:50:26Z

somebody post the answer I was looking for, but for some reason they deleted the post, so I copy it here:

$.ajax({
    url: 'http://api.flickr.com/services/rest/?method=flickr.photosets.getPhotos&api_key=1408bff5f72a4b84b924d13e8562b6a2&photoset_id=77649470@N03&photoset_id=72157629903184261&format=json',
    type: 'GET',
    dataType: 'jsonp',
    jsonpCallback: 'jsonFlickrApi',
    success: function(data){
        console.log(data);
    }
});

This does perfectly the job. Thanks, whoever it was :)

Probably other work too, but this is the one I feel more comfortable. Thank you all.

Radek Skokan · Accepted Answer · 2013-02-03 09:01:43Z

0

As was already mentioned above, Flickr is sending the JSON response wrapped in to the jsonFlickrApi callback method.

To return just pure JSON data, you can use the nojsoncallback=1 request parameter.

E.g. http://api.flickr.com/services/rest/?method=flickr.photos.getSizes&api_key=_secret_app_key&photo_id=8321754843&format=json&nojsoncallback=1

answered Feb 3, 2013 at 9:01

Radek Skokan

1,3863 gold badges16 silver badges40 bronze badges

Collectives™ on Stack Overflow

convert string to JSON with jQuery

6 Answers 6

3 Comments

Comments

Comments

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

Comments

Comments

1 Comment

Comments

Comments

Related