Facebook Graph API response javascript - javascript

I want to get name and picture of every friend. please tell me how can i handle this. I am getting no row and finding an error "Uncaught TypeError: Cannot set property 'innerHTML' of null"
FB.api('/me/friends','GET',{"fields":"id,name,email,picture.height(500)"},
function(response) {
console.log(response.total_count);
var result_holder = document.getElementById('result_friends');
// var friend_data = response.data.sort();//sort(sortMethod);
var results = '';
document.getElementById('friends_data').innerHTML = 'Name :::' + response.name;
for (var i = 0; i < friend_data.length; i++) {
console.log(i + results);
results += '<div><img src="https://graph.facebook.com/' + friend_data[i].id + '/picture">' + friend_data[i].name + '</div>';
}
// and display them at our holder element
result_holder.innerHTML = '<h2>Result list of your friends:</h2>' + results;});

This line is wrong: document.getElementById('friends_data').innerHTML = 'Name :::' + response.name;
There will be an array in response (response.data), and in that array there will be the friends with their names.
Remove the line and use the for loop like this:
for (var i = 0; i < response.data.length; i++) {
results += '<div><img src="https://graph.facebook.com/' + response.data[i].id + '/picture">' + response.data[i].name + '</div>';
}
Or, since you already get the picture URL in the response, try this:
for (var i = 0; i < response.data.length; i++) {
results += '<div><img src="' + response.data[i].picture.data.url + '">' + response.data[i].name + '</div>';
}
Btw, it is better to just debug with console.log(response) at the beginning of the callback, so you can see what exactly is in the response. Just saying.

Related

Array list display online one result from json

I wrote this code and it works:
function getJsonResult(retrieve) {
var result = retrieve.results;
for (var i = 0; i < result.length; i++) {
responseJson.push({ id: result[i].id, title: result[i].title });
var search = '<a id="' + result[i].id + '">' + result[i].title + '</a><br/>';
document.write(search);
}
}
When I tried to display the results in a div, I change the last line with:
$("#divId").html(search);
But it only displays the first result. How can I make the whole list appear?
That happened because you're overriding the search variable in every iteration :
var search = '<a id="' + result[i].id + '">' + result[i].title + '</a><br/>';
You need to declare the search variable outside of the loop then append the string in every iteration like :
function getJsonResult(retrieve) {
var result = retrieve.results;
var search = "";
___________^^^^
for (var i = 0; i < result.length; i++) {
responseJson.push({ id: result[i].id, title: result[i].title });
var search += '<a id="' + result[i].id + '">' + result[i].title + '</a><br/>';
___________^^
document.write(search);
}
}
Then finally you could put your variable content to the div :
$("#divId").html(search);
$('#divId').append(search);
This appends the element included in search to the div element.

Only show objects in array that contain a specific string

I was trying to make something where you can type a string, and the js only shows the objects containing this string. For example, I type Address1 and it searches the address value of each one then shows it (here: it would be Name1). Here is my code https://jsfiddle.net/76e40vqg/11/
HTML
<input>
<div id="output"></div>
JS
var data = [{"image":"http://www.w3schools.com/css/img_fjords.jpg","name":"Name1","address":"Address1","rate":"4.4"},
{"image":"http://shushi168.com/data/out/114/38247214-image.png","name":"Name2","address":"Address2","rate":"3.3"},
{"image":"http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg","name":"Name3","address":"Address3","rate":"3.3"}
];
var restoName = [], restoAddress = [], restoRate = [], restoImage= [];
for(i = 0; i < data.length; i++){
restoName.push(data[i].name);
restoAddress.push(data[i].address);
restoRate.push(data[i].rate);
restoImage.push(data[i].image);
}
for(i = 0; i < restoName.length; i++){
document.getElementById('output').innerHTML += "Image : <a href='" + restoImage[i] + "'><div class='thumb' style='background-image:" + 'url("' + restoImage[i] + '");' + "'></div></a><br>" + "Name : " + restoName[i] + "<br>" + "Address : " + restoAddress[i] + "<br>" + "Rate : " + restoRate[i] + "<br>" + i + "<br><hr>";
}
I really tried many things but nothing is working, this is why I am asking here...
Don't store the details as separate arrays. Instead, use a structure similar to the data object returned.
for(i = 0; i < data.length; i++){
if (data[i].address.indexOf(searchedAddress) !== -1) { // Get searchedAddress from user
document.getElementById("output").innerHTML += data[i].name;
}
}
Edits on your JSFiddle: https://jsfiddle.net/76e40vqg/17/
Cheers!
Here is a working solution :
var data = [{"image":"http://www.w3schools.com/css/img_fjords.jpg","name":"Name1","address":"Address1","rate":"4.4"},
{"image":"http://shushi168.com/data/out/114/38247214-image.png","name":"Name2","address":"Address2","rate":"3.3"},
{"image":"http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg","name":"Name3","address":"Address3","rate":"3.3"}
];
document.getElementById('search').onkeyup = search;
var output = document.getElementById('output');
function search(event) {
var value = event.target.value;
output.innerHTML = '';
data.forEach(function(item) {
var found = false;
Object.keys(item).forEach(function(val) {
if(item[val].indexOf(value) > -1) found = true;
});
if(found) {
// ouput your data
var div = document.createElement('div');
div.innerHTML = item.name
output.appendChild(div);
}
});
return true;
}
<input type="search" id="search" />
<div id="output"></div>

Splice array on click - javascript

I have a type of newsfeed wall like Facebook were you can create posts. I want when I click on the glyphicon in my post to remove that certain post.
The code is:
function loadPosts(){
$('#allPosts').empty();
for (var i = 0; i < aPosts.length; i++){
var postData = aPosts[i];
var comments ="";
for (var j = 0; j < postData.comments.length; j++ )
{
comments += '<p class="myComment">' + postData.comments[j].from + '<strong>says: </strong>'+ postData.comments[j].text +'</p>';
}
$('#allPosts').prepend('<div data-postId="'+i+'"class="wrapPost"><span class="glyphicon glyphicon-remove"></span>' +
postData.from +' '+'' +
'<strong>wrote :</strong>'+
'<li>' + postData.text + '</li>' + comments +
'<input type=text class=commentBox placeholder=Comment..>' +
'<button data-postId="'+i+'" class="postComment">Post</button></div>');
$('.glyphicon-remove').click(function() {
var postId = $(this).parent().attr('data-postId');
console.log(postId);
aPosts.splice(i, 1);
});
}
}
When I console log "postId" it tells me that I am at least clicking the right post, but it wont delete it from localStorage.

javascript inline code link generating chrome extension

I'm trying to make an extension for chrome that grabs data from a website and I'm having trouble making the links clickable. I CAN NOT use javascript inside the link (ex: href="javascript:myfunction(param);")
I need to create a div for each title, then create a onclick function that handles the div's innerhtml, and I can't get it to work.
here is my code so far:
document.addEventListener('DOMContentLoaded', function () {
$().ready(function () {
var url = 'http://somewebsite';
$.get(url, function (data) {
data = data.split("<tr name=\"hover\">");
var name;
var link;
var count = data.length;
count++;
for(var i = 1; i < data.length; i++){
data[i] = data[i].replace("<br>","<br />");
data[i] = data[i].replace("class=\"thread_link\"", "");
data[i] = data[i].replace("<td class=\"forum_thread_post\" align=\"center\">0</td>","");
data[i] = data[i].replace("<td class=\"forum_thread_post\">","");
data[i] = data[i].replace("</td>","");
data[i] = data[i].replace('<td class="forum_thread_post" align="center">0</td>','');
if(i != data.length-1){
data[i] = data[i].replace("<a href=\"", "");
data[i] = data[i].replace("</a>", "");
data[i] = data[i].split("\" >");
data[i][1] = data[i][1].split("<");
document.write('<div id="' + data[i][1][0] + '">' + data[i][1][0] + data[i][0] + "</div><br /><br />");
}else{
data[i] = data[i].split("</table>")[0];
data[i] = data[i].replace("<a href=\"", "");
data[i] = data[i].replace("</a>", "");
data[i] = data[i].split("\" >");
data[i][1] = data[i][1].split("<");
document.write('<div id="' + data[i][1][0] + '">' + data[i][1][0] + data[i][0] + "</div>");
}
}
//document.body.innerHTML = '';
//console.log(data);
});
});
});
document.write('</script>');
function getshow(url){
alert(url);
document.body.innerHTML = '';
$.get("http://somewebsite" + url, function (dat) {
document.write(dat);
});
}

How do I access an array value correctly within a callback function?

I am trying to access the value of IDs[i] correctly within a function inside a loop. I have tried the following.
This method logs IDs as a string I think. I try to access it with index but it comes out undefined. See the console.log inside simpleWithAttrPrice function call.
for(i=0; i<IDs.length; i++)
{
console.log("Outside of function Vendor is " + IDs[i]);//logs correctly
var optionSelectionArray = currentlySelectedAttributes(IDs[i]);
simpleWithAttrPrice(optionSelectionArray, function(data) {
//var vendor = IDs[i];
var basePrice = parseFloat(roundDollar(data));
//newPriceArray[vendor][colorSelected]=basePrice;
console.log("Vendor is " + IDs);//"5,3"
console.log("Vendor is " + IDs[i]);//undefined
$j('.details'+IDs[i]+ ' .priceBlock').empty();
$j('.details'+IDs[i]+ ' .priceBlock').append('<span>'+formatCurrency(basePrice,"$")+'</span>');
});
}
I also tried passing ID's into the callback function but it logs "success" (literally)
for(i=0; i<IDs.length; i++)
{
//var vendor = IDs[i];
var optionSelectionArray = currentlySelectedAttributes(IDs[i]);
simpleWithAttrPrice(optionSelectionArray, function(data, IDs) {
//var vendor = IDs[i];
var basePrice = parseFloat(roundDollar(data));
//newPriceArray[vendor][colorSelected]=basePrice;
console.log("Vendor is " + IDs);//logs ID's as "success" ??
$j('.details'+IDs[i]+ ' .priceBlock').empty();
$j('.details'+IDs[i]+ ' .priceBlock').append('<span>'+formatCurrency(basePrice,"$")+'</span>');
});
}
Lastly, I've also tried the following but it appends the price to the same block.
for(i=0; i<IDs.length; i++)
{
var vendor = IDs[i];
var optionSelectionArray = currentlySelectedAttributes(vendor);
simpleWithAttrPrice(optionSelectionArray, function(data) {
var basePrice = parseFloat(roundDollar(data));
//newPriceArray[vendor][colorSelected]=basePrice;
console.log("Vendor is " + vendor); //only logs this once.
$j('.details'+vendor+ ' .priceBlock').empty();//If I take this away, appends both prices to same block
$j('.details'+vendor+ ' .priceBlock').append('<span>'+formatCurrency(basePrice,"$")+'</span>');
});
}
How do I access the array IDs correctly within the callback function?
#Toby Allen Thanks! Your right about that link. For reference this works:
function sendRequest(i) {
var optionSelectionArray = currentlySelectedAttributes(IDs[i]);
simpleWithAttrPrice(optionSelectionArray, function(data) {
//var vendor = IDs[i];
var basePrice = parseFloat(roundDollar(data));
//newPriceArray[vendor][colorSelected]=basePrice;
console.log("Vendor is " + IDs);//"5,3"
console.log("Vendor is " + IDs[i]);//undefined
$j('.details'+IDs[i]+ ' .priceBlock').empty();
$j('.details'+IDs[i]+ ' .priceBlock').append('<span>'+formatCurrency(basePrice,"$")+'</span>');
});
}//end sendRequest
for(i=0; i<IDs.length; i++)
{
sendRequest(i);
}

Categories