$. getJSON not working as it should to get image Graph API

Asked

Viewed 97 times

1

I have this following code where return comments from a post on facebook.

function pegaFoto(id){
    var url2 = 'https://graph.facebook.com/v2.8/' + from[id] + '/picture?fields=url';
    $.getJSON(url2, function(res2){
    for (var key2 in res2.data) {
        foto[id] = res2.data[key2].url;
        console.log(res2.data[key2].url);
    }
});

}

function refreshCounts() {
    var url = 'https://graph.facebook.com/v2.8/********_*********/comments?fields=from{id}, message&access_token=' + access_token;
    $.getJSON(url, function(res){
        for (var key in res.data) {
            comentario[key] = res.data[key].message;
            from[key] = res.data[key].from.id;
            pegaFoto(key);
            console.log(comentario[key]);     
            console.log(foto[key]);
        }
    });

}

What’s weird is that the second function works perfectly and the top function doesn’t work. url2 variable is being set correctly but $.getJSON does not perform and I have no idea why

  • If you catch the url and play in the browser, returns the data?

  • return yes friend

  • from[id] wouldn’t just be id? Where is the from?

  • no, that’s correct. id is actually the index of the array that contains the ids of people who commented. Only thing not working is the get.JSON that doesn’t run, because url2 is set normally when I check

  • Dude, I did a test using the facebook of the mark: https://graph.facebook.com/v2.8/4/picture?fields=url. The return is not a JSON, it is an image. You’ll have to use $.ajax and treat that image. Or pass some argument in the url that converts the return to JSON.

  • hadn’t realized it. Because in Graph api explorer returns json, that tense lost hours because of this "confusion"

  • Yeah, I’m reading the documentation to see if I can find anything..

  • What’s the tip then? I’m not very experienced with ajax, I program by hobby and I’m used to the face API but for this I did not expect, I need to return the image url

  • I got it bro, thanks to this balcony of appearing the photo and not the data, I simply had to include at the end of the url the parameter redirect=false and gave right thanks

  • Good :) another way is to invoke their api in javascript. But if it’s worked out better yet.

  • @Marcielfonseca Answer your question with this solution, so when someone looks maybe your solution is useful.

  • @Lucascosta I accepted your reply, thank you

Show 7 more comments

1 answer

1


The problem is that when directly calling the Graph api URL the return is an image, not a JSON. You will have to use the api facebook to make the call and have the return in JSON format. Something like:

window.fbAsyncInit = function() {
    FB.init({
        appId: 'your-app-id',
        xfbml: true,
        version: 'v2.8'
    });
    FB.AppEvents.logPageView();
};

(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {
        return;
    }
    js = d.createElement(s);
    js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

function pegar() {
    FB.api(
        '/4/picture',
        'GET', {},
        function(response) {
            console.log(response); // irá exibir o mesmo retorno da graph explorer
        }
    );

The return will look like this (taken from Graph explorer):

{
  "data": {
    "is_silhouette": false,
    "url": "https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xat1/v/t1.0-1/p50x50/12208495_10102454385528521_4749095086285673716_n.jpg?oh=1a5f0703065fe96c49224e520644fff9&oe=58C3A170&__gda__=1489734487_29708b5f264ecdf1dac103a35df9e726"
  }
}

To initialize the api see this documentation: https://developers.facebook.com/docs/javascript/reference/FB.init/v2.8

If you have more questions you have Quickstart here.

Edited

You can get the return as JSON by ajax including at the end of the URL redirect=false. The URL would be:

https://graph.facebook.com/v2.8/4/picture?redirect=false

Browser other questions tagged

You are not signed in. Login or sign up in order to post.