I have a problem with getting the reviewer's profile picture, which i need it alongside with the page reviews.
so here is my code to show the page's reviews( i only use 8 rows result)
<script type="text/javascript">
$(document).ready(function() {
$.ajaxSetup({ cache: true });
$.getScript('//connect.facebook.net/en_US/sdk.js', function(){
FB.init({
appId: '146098578760813',
version: 'v2.9' // or v2.1, v2.2, v2.3, ...
});
FB.api(
'/146098578760813',
'GET',
{"fields":"ratings",
"access_token":"EAACEdEose0cBAAHqbBtNJzh7vC0C9PnSuV9AX910AlAUTHaP8cZArkE9NXPQUZB01jFOZAhNMXXdd0yIxwgxJZAulCGoDNXzEsRB04sRHlZB7Rkh1SCuiMDIzRqnX0l4ZAQe0AtTOh2CZCRsHXk49eWTQi0K5rZCedu852wV4A7AjcbIZBHsZBL5GiUfKifitIwT0ZD"},
function(response) {
var div = document.getElementById('conReviews');
console.log(response.ratings.data[0]);
console.log(response.ratings.data[0].review_text);
var review=[];
var reviewer_name=[];
var reviewer_photo=[];
var reviewer_id=[];
for(var i=0; i<8; i++){
if(response.ratings.data[i].review_text!=null){
review[i]=response.ratings.data[i].review_text;
reviewer_name[i]=response.ratings.data[i].reviewer.name;
reviewer_id[i]=response.ratings.data[i].reviewer.id;
var c="asd";
FB.api(
'/'+response.ratings.data[i].reviewer.id+'/picture',
'GET',
{"type":"large","width":"200","height":"200"},
function(response2) {
c=response2.data.url;
}
);
reviewer_photo[i]=c;
console.log(review[i]);
console.log(reviewer_name[i]);
console.log(reviewer_photo[i]);
div.innerHTML=div.innerHTML+
' <div class="shortcode-tour-reviews__item">'+
'<div class="shortcode-tour-reviews__item__info" id="photo_'+reviewer_id[i]+'">'+
'<img alt="" class="avatar avatar-95 photo avatar-default" height="95" src="'+reviewer_photo[i]+'" srcset="'+reviewer_photo[i]+'" width="95"/>'+
'<div class="shortcode-tour-reviews__item__info__name">'+
'</div>'+
'</div>'+
'<div class="shortcode-tour-reviews__item__content">'+
'<h3 class="shortcode-tour-reviews__item__title">'+
'<a href="#/page/pages/view/page/17">'+
reviewer_name[i]+
'</a>'+
'</h3>'+
'<div class="shortcode-tour-reviews__item__description">'+
review[i]+
'</div>'+
'<div class="shortcode-tour-reviews__item__rating">'+
'</div>'+
'</div>'+
'</div>';
}
}
}
);
});
});
when i run the code, the user profile picture which is the response2.data.url value is correct. It shows the url of the reviewer's profile picture. I did console.log to make sure the result was correct.
then i want to store the value of the image url inside c variable, and then the problem appears.
The c variable doesnt change. It keeps contain "asd" value.
im trying to add the alert within the code like this
var c="asd";
FB.api(
'/'+response.ratings.data[i].reviewer.id+'/picture',
'GET',
{"type":"large","width":"200","height":"200"},
function(response2) {
c=response2.data.url;
alert(c);
}
);
reviewer_photo[i]=c;
and it shows the correct url image of the reviewers. But again, the reviewer_photo[i] keep showing asd instead of the image url (checked it in console.log)
I have tried to separate the second FB.api call outside the document.ready function and made the new function of it and then call it inside the main FB.api call, but it didnt work also.
How can i fix this? Thank you before :)
P.S : I have read the tutorial of edit the callback , but it seems hard for me to implement the callback with my case, so can someone help me to show the best solution for my case? thanks :)
