Facebook data import leads to "Value below was evaluated just now"

Question

I am trying to display user's profile image on the sidebar after he logs in using his FB account. Apparently, the data is loaded from Facebook but after the initialization of the page. Therefore, the image is not displayed as I would like. All I get is the empty thumbnail.

In console I get: Value below was evaluated just now

Beneath I can see all data needed that are properly loaded but not displayed. In .html section "script" I use:

function getFBData () {
    FB.api('/me', function (response) {
        fbinfo = new Array();

        var im = document.getElementById("profileImage").setAttribute("src", "http://graph.facebook.com/" + response.id + "/picture?type=normal?callback=?");
    });
   public var id = response.id;
    public var first_name = response.first_name;
    public var last_name = response.last_name;
    var email = response.email;

}

In component.ts file I implemented console.log(this.userDetails);

Have a quick look at [this](https://stackoverflow.com/questions/2104949/how-to-reload-refresh-an-elementimage-in-jquery). Despite using jQ, the DOM might not be registering a change. — Daniel Park, Sep 13 '17 at 11:18
see my answer. although, when using angular (or better react), you usually do not use directly set attributes, you bind stuff in your views. — andyrandy, Sep 13 '17 at 11:21

score 0 · Answer 1 · answered Sep 13 '17 at 11:14

FB.api is asynchronous, you can only access the response in the callback function:

function getFBData () {
    FB.api('/me', (response) => {
        document.getElementById("profileImage").setAttribute("src", "http://graph.facebook.com/" + response.id + "/picture?type=normal");
        const id = response.id,
            first_name = response.first_name,
            last_name = response.last_name,
            email = response.email;
    });
}

Also, updated the code with arrow functions and const (because it is 2017). :)

Facebook data import leads to "Value below was evaluated just now"

1 Answers1