We Keep Coding

Instagram Graph API pull, works but runs slow would like advice

I have written some code to pull image from instagram using the instagram graph api. Everything works fine but the performance is slow.
I am using JavaScript but had the same issue but worse with PHP. I am fairly new and inexperienced with this and any advice would be great.
Below is the code:
$.getJSON(instagram_url_1, function(data) {
instagram_array_1 = data['data'];
instagram_next = data['paging'];
instagram_next = instagram_next['next'];
for (var image_count = 0; image_count < 25; image_count++) {
image_data = instagram_array_1[image_count];
image_data = image_data['id'];
image_link = 'https://graph.facebook.com/' + image_data + '?fields=media_url&access_token=' + access_token;
image_array[image_count] = image_link;
};
$.getJSON(instagram_next, function(data) {
instagram_array_2 = data['data'];
for (image_count = 0; image_count < 25; image_count++) {
image_data = instagram_array_2[image_count];
image_data = image_data['id'];
image_link = 'https://graph.facebook.com/' + image_data + '?fields=media_url&access_token=' + access_token;
image_array[image_count + 25] = image_link;
};
console.log(image_array);
for (var image_count = 0; image_count < 40; image_count++) {
image_link_array = image_array[image_count];
$.getJSON(image_link_array, function(data) {
image_link = data['media_url'];
image_html = '<img class="instagram-images" src=' + image_link + ' />';
$('#instagram-body').append(image_html);
});
};
});
});
The website can take a little time to load, not ages but enough that I would like to try and streamline it to improve UX. Thanks in advance!

Don´t use this code on every page load, cache results server side to avoid API limits.
Don´t hardcode Access Tokens on the client, they are always meant to be kept secret. Only use them on the server.
You are doing an API call for every single image, of course that´s super-slow. Better: /instagram-id/media?fields=media_url - just ONE call.
Reference:
https://developers.facebook.com/docs/instagram-api/reference/user/media
https://developers.facebook.com/docs/instagram-api/reference/media

nested javascript queries in parse

I have the code below. Basically I have 3 nested parse queries. One is getting a number of "followers" and for each follower I am getting a number of "ideas" and for each idea I would like to get that idea creator's name (a user in the user table).
The first two nested queries work but then when i try to get the name of the user (the creator of the idea), that last nested query DOES NOT execute in order. That query is skipped, and then it is executed later in the code. Why is this happening please?
var iMax = 20;
var jMax = 10;
var IdeaList = new Array();
var IdeaListCounter = 0;
var myuser = Parse.User.current();
var Followers = new Parse.Query("Followers");
Followers.equalTo("Source_User",{__type: "Pointer",className: "_User",objectId: myuser.id});
Followers.find({
success: function(results) {
for (var i = 0; i < results.length; i++) {
var object = results[i];
var Ideas = new Parse.Query("Ideas");
Ideas.equalTo("objectId_User", {__type: "Pointer",className: "_User",objectId: object.get('Destination_User').id});
Ideas.find({
success: function(results2) {
for (i=0;i<iMax;i++) {
IdeaList[i]=new Array();
for (j=0;j<jMax;j++) {
IdeaList[i][j]=0;
}
}
for (var j = 0; j < results2.length; j++) {
var object2 = results2[j];
var ideausername2 = "";
IdeaListCounter++;
var ideausername = new Parse.Query("User");
ideausername.equalTo("objectId",object2.get('objectId_User').id);
ideausername.first({
success: function(ideausernameresult) {
ideausername2 = ideausernameresult.get("name");
}
});
IdeaList[IdeaListCounter,0] = object2.get('objectId_User').id + " " + ideausername2; //sourceuser
IdeaList[IdeaListCounter,1] = object2.get('IdeaText'); //text
IdeaList[IdeaListCounter,2] = object2.get('IdeaImage'); //image
IdeaList[IdeaListCounter,3] = object2.get('IdeaLikes'); //likes
IdeaList[IdeaListCounter,4] = object2.get('IdeaReport'); //reports

Your nested query is asynchronous.
Check out the answer at the following for guidance:
Nested queries using javascript in cloud code (Parse.com)

Cannot store a value in local storage

I have fetched a list of items from web service, now i want to store the item_name on which I have clicked. I cannot store that item name, if its "bread butter" , it stores only "bread".
What shall i do now?
<script>
var sub_catidall = [];
var sub_catnameall = [];
function selected_index(sub_cat_name_all) {
alert("selected sub category" + sub_cat_name_all);
//window.localStorage.setItem("current_sub_id_all",sub_cat_id_all);
window.localStorage.setItem("DishName", sub_cat_name_all);
window.open("MenuDetails.html", "_self");
}
function jsondata(data) {
var parsedata = JSON.parse(JSON.stringify(data));
var sub_category = parsedata["Item List"];
for (var i = 0; i < sub_category.length; i++) {
var sub_menuall = sub_category[i];
sub_catidall = sub_menuall['menuItemId'];
sub_catnameall = sub_menuall['menuItemName'];
//alert(sub_catnameall);
var id = document.createElement("table");
if ((i % 2) == 0) {
id.innerHTML += '<br><td><strong><font face="DEVROYE">' + sub_menuall['menuItemName'] + '</td></strong>';
document.getElementById("block_left").appendChild(id);
} else {
id.innerHTML += '<br><tr><td><strong><font face="DEVROYE">' + sub_menuall['menuItemName'] + '</td></strong>';
document.getElementById("block_right").appendChild(id);
}
}
}
jsonp("http://remoteaddress/hotelTab/menuitem.php?callback=jsondata&mCatId=" + window.localStorage.getItem('current_id') + "&menuCategoryId=" + window.localStorage.getItem('current_sub_id'));
</script>

DOM Storage Guide
Example
var string = 'Bread Butter';
localStorage.setItem("DishName", string);
alert(localStorage.getItem('DishName'));
On jsFiddle

I use Amplifyjs store library to access local storage.
It's simple to use/understand, works really well and it's cross browser (mobile browser as well)
Hope this Helps

How to get specific property from Google Spreadsheet JSON feed

I am reading JSON from a Google Spreadsheet and need help getting to the text within entry.content.$t. The text is a column named "description" in the spreadsheet. The feed for the spreadsheet is (removed)
So far, my script is
function listChapters(root) {
var feed = root.feed;
var entries = feed.entry || [];
var html = ['<ul>'];
for (var i = 0; i < entries.length; ++i) {
var chlist = entries[i];
var title = (chlist.title.type == 'html') ? chlist.title.$t : escape(chlist.title.$t);
var chapters = chlist.content.$t;
html.push('<li>', chapters, '</li>');
}
html.push('</ul>');
document.getElementById("chapterlist").innerHTML = html.join("");
}
The question is - How do I read "description" from $t to place in the var chapters?

The text within chlist.content.$t is almost, but not quite, properly formatted JSON. Since it's not properly formatted, you cannot use JSON.parse() to create an object that you could then get a description property from.
Here's a brute-force approach that will extract the description, used in place of the original html.push('<li>', chapters, '</li>');:
// Get the text between 'description: ' and 'Chapter website:'
var descStart = chapters.indexOf('description:')+13; //+length of 'description: '
var descEnd = chapters.indexOf('Chapter website:');
var description = chapters.substring(descStart,descEnd);
html.push('<li>', description, '</li>');
Tested with this, checking results in debugger:
function test() {
var url = '---URL---';
var result = UrlFetchApp.fetch(url);
var text = result.getContentText();
var bodytext = Xml.parse(text,true).html.body.getText();
var root = JSON.parse(bodytext);
listChapters(root);
}

YouTube API Video Feed Description

Alright, I have been looking off and on for almost a year now (spent all of March trying to do this), and I simply CAN NOT find the code to make this work.
Here's my problem:
I have a code that retrieves my most recent upload for the player on my website (http://weapwn.com). This code only gives me the video, though.
I need code to get the description - not from any one video ID, but from the variable video ID - but all I have is this:
<script type="text/javascript">
function showMyVideos2(data) {
var feed = data.feed;
var entries = feed.entry || [];
var html = ['<ul>'];
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var content = entry.content.$t;
html.push('<i>', content, '</i>');
}
html.push('</ul>');
document.getElementById('featdesc').innerHTML = html.join('');
}
</script>
Now - replacing "content" does nothing, unless I use "title" (which only retrieves the video title). I must know how to get this damn elusive code to work, because the parameters that Youtube lists are not working!
Am I going about this entirely the wrong way? Or is there simply an error to fix in my code?

Try this:
function showMyVideos2(data) {
var feed = data.feed;
var entries = feed.entry || [];
var html = ['<ul>'];
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var title = entry.title.$t;
var description = entry.media$group.media$description.$t.replace(/\n/g, '<br/>');
var content = entry.content.$t;
html.push('<i>', content, '</i>','<i>', title, '</i>','<i>', description, '</i>');
}
html.push('</ul>');
document.getElementById('featdesc').innerHTML = html.join('');
}
Hope it helps...