We Keep Coding

Javascript .getJSON .each only works some of the time

I am running into an interesting issue that I cannot figure out. I am dynamically loading some data into an html <select></select>.
What I am discovering is that as I refresh the page, sometimes the data loads, but more often than not, there is nothing there. Is the page loading too quickly or the file not getting processed every time the page reloads?
I have tried multiple browsers and the experience is the same.
Here is my html:
<select id="group-select-user-access" class="blue-text">
<option value="" disabled selected>Select a Google Group</option>
</select>
Here is my javascript:
<script type="text/javascript">
var group_list = "json/google_group_list.json";
$.getJSON(group_list, function(json) {
$.each(json, function(key) {
var email_stripped = json[key].substring(0, json[key].lastIndexOf("#"));
$('select[id=group-select-user-access]').append('<option value="' + email_stripped + '">' + json[key] + '</option>');
});
});
</script>
The .json file is simple and in this format:
["email1#test.com", "email2#test.com", "email3#test.com", ...]
I am relatively new when it comes to JS / jQuery so any help is appreciated.
What direction should I head next for troubleshooting?

Probably an issue with the DOM not being fully loaded when you try to modify it
Try either moving your script tag to the very end of your document, or wrap your js code with $(document).ready
$(document).ready(function() {
var group_list = "json/google_group_list.json";
$.getJSON(group_list, function(json) {
$.each(json, function(key) {
var email_stripped = json[key].substring(0, json[key].lastIndexOf("#"));
$('select[id=group-select-user-access]').append('<option value="' + email_stripped + '">' + json[key] + '</option>');
});
});
})
That way your code will wait until the entire document is loaded before trying to append things to it

Dynamically add array contents as new elements - JQuery

edit: Problem solved! I was modifying the page before it was loaded so the script didn't actually do anything. I fixed it now and it works. Thanks for the help, I'll have to chalk this one up to being new to jQuery and it's weirdness.
Long story short I'm trying to make a webpage that dynamically takes Article titles, thumbnail images, descriptions, and links to them, and creates a nicely formatted list on the page. I'm trying to accomplish this in jQuery and HTML5.
Here is the sample data that I'll be using to dynamically populate the page. For now formatting isn't important as I can do that later after it works at all.
<script>
var newsTitles = ["If It Ain't Broke, Fix It Anyways"];
var newsPics = ["images/thumbnail_small.png"];
var newsDescs = ["August 14th 2015<br/><b>If It Ain't Broke</b><br/>Author: Gill Yurick<br/><br/> Sometimes, a solution isn't the only one. So how do we justify changes to systems that don't need to be fixed or changed? I explore various systems from other successful card games and how their approaches to issues (be they successes or failures in the eyes of the deisgners) can help us create EC."];
var newsLinks = ["it_aint_broke-gill_popson.html"];
var newsIndex = 0;
var newsMax = 1;
The section of code where I'm trying to use the contents of the arrays above to dynamically fill elements.
<td style="height:500px;width:480px;background-color:#FFF7D7;padding:20px" colspan=2 id="article">
<h1>Articles</h1>
<!-- the column for each news peice add an element with the thumbnail, the title and teh desc -->
<script>
for(i = 0; i < newsMax; i++) {
$("#articleList").append("<h3 href="" newsLinks[i] + "">" + newsTitles[i] + "</h3>", "<img src=""newsPics[i] + "">","<p>" + newsDesc[i] + "</p>", ); $("div").append("hello");
}
</script>
<div id="articleList">
HELLO
</div>
</td>
Here is what it ends up looking like, I can post more info if needed as I am aware this may not be clear enough to fully explain my problem but I am unable to determine that. Thank you in advance.

try this
for(i = 0; i < newsMax; i++) {
$("#articleList").append("<h3 href=""+ newsLinks[i] + "">" + newsTitles[i] + "</h3>, <img src=""+newsPics[i] + "">, <p>" + newsDescs[i] + "</p>" ); $("div").append("hello");
}
Concatation issue + typo for newsDescs

The following string is invalid html and is missing a +
"<h3 href="" newsLinks[i] + "">"
You need to use proper quotes for html attributes, not &quote;
Try
"<h3 href='" + newsLinks[i] + "'>"
OR
"<h3 href=\"" + newsLinks[i] + "\">" // `\` used to escape same type quote
Personally I prefer opening/closing html strings with single quotes but either will work
Note tht you should be getting a syntax error thrown in dev tools console which would have helped you locate problems

for(i = 0; i < newsMax; i++) {
$("#articleList").append("<h3 href='" + newsLinks[i] + "'>" + newsTitles[i] + "</h3>");
$("#articleList").append("<img src='" + newsPics[i] + "'>","<p>" + newsDesc[i] + "</p>" );
}

How to add last.fm now playing into my site using Api

Hi guys i been trying to figure out for a long time but i suck at this, i found this code on google and i added it adn changed what i need but still doesnt work i really need this for my site: http://www.balkan-party.cf/
I found code here: http://www.samkitson.co.uk/using-json-to-access-last-fm-recently-played-tracks/
My last.fm username i need in js: alicajdin AND
Api key: 24f6b03517ad9984de417be5d10e150b
This is what i did:
$(document).ready(function() {
$.getJSON("http://ws.audioscrobbler.com/2.0/?method=user.getRecentTracks&user=alicajdin&api_key=24f6b03517ad9984de417be5d10e150b&limit=2&format=json&callback=?", function(data) {
var html = ''; // we declare the variable that we'll be using to store our information
var counter = 1; // we declare a counter variable to use with the if statement in order to limit the result to 1
$.each(data.recenttracks.track, function(i, item) {
if(counter == 1) {
html += 'Currently listening to: <span>' + item.name + ' - ' + item.artist['#text'] + '</span>';
} // close the if statement
counter++ // add 1 to the counter variable each time the each loop runs
}); // close each loop
$('.listening-to h5').append(html); // print the information to the document - here I look for the h5 tag inside the div with a class of 'listening-to' and use the jQuery append method to insert the information we've stored in the html variable inside the h5 tag.
}); // close JSON call
});
I created that file and i tried to add on head section, footer section but it wont show recent tracks.
And yea i have scroblr installed on google crome

below </script> add the following code:
<div class="listening-to"></div>
then remove "h5" on
"$('.listening-to h5').append(html);"
so your code like this:
<script type="text/javascript">
$(document).ready(function() {
$.getJSON("http://ws.audioscrobbler.com/2.0/?method=user.getRecentTracks&user=YOUR_USERNAME&api_key=YOUR_API_KEY&limit=2&format=json&callback=?", function(data) {
var html = '';
var counter = 1;
$.each(data.recenttracks.track, function(i, item) {
if(counter == 1) {
html += 'Currently listening to: <span>' + item.name + ' - ' + item.artist['#text'] + '</span>';
}
counter++
});
$('.listening-to').append(html);
});
});
</script>
<div class="listening-to"></div>
Hope you can help. Sorry, my English is very Bad (Google Translate)

Youtube tracking JQuery plugin jQuery.tubeplayer.js

thanks for having a look at my question,
I am trying to set up custom events (Analytics tracking) using the jQuery.tubeplayer.js plugin at http://www.tikku.com/jquery-youtube-tubeplayer-plugin#tubeplayer_tutorial_3
I can get the plugin working and attach events to onPlayerPlaying, onPlayerPaused,onPlayerEnded etc but cannot extract the data I want to pass to the event. I want to extract the URL of the video and the time of the video when the event is triggered. This data can be extracted from the video using the showData(jQuery('#youtube-player-container').tubeplayer('data')); function in the example, I cant seem to get this data into my event.
My code is as follows:
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type='text/javascript' src='js/jQuery.tubeplayer.js'></script>
</head>
<body>
<div id='youtube-player-container'> </div>
<a onClick="showData(jQuery('#youtube-player-container').tubeplayer('data'));" href="javascript:void(0);">Click here to see data</a>
<div class="EventListener">The is the initial event listener text</div>
<a onClick="showVideoURL(jQuery('#youtube-player-container').tubeplayer('data'));">Click to see the URL of the video</a><br/>
<span class="VideoURL"></span><br/>
<div class="Bufferstatus">The is Buffertext</div>
<a onClick="showTime(jQuery('#youtube-player-container').tubeplayer('data'));">Click to see the time of the video</a><br/>
<span class="currentTime"></span><br/>
<script>VideoID="i3AqF9e8WV4"</script>
<script src="js/jQuery.tubeplayer.settings.js"></script>
with the script tubeplayer settings at
var url=location.href;
jQuery.tubeplayer.defaults.afterReady = function(){
//jQuery("#player").tubeplayer("cue", " ");
};
initPlayer();
function showData(data){
var html = "bytesLoaded : " + data.bytesLoaded;
html += " / bytesTotal : " + data.bytesTotal + "\n";
html += "currentTime : " + data.currentTime;
html += " / duration : " + data.duration + "\n";
html += "startBytes : " + data.startBytes + "\n";
html += "state : " + data.state + "\n";
html += "quality : " + data.availableQualityLevels.join(",") + "\n";
html += "url : " + data.videoURL + "\n";
html += "videoID : " + data.videoID;
alert(html);
}
function showTime(data){
$('.currentTime').text('The time when clicked was:' + data.currentTime);
}
function showVideoURL(data){
$('.VideoURL').text('The video URL is:' + data.videoURL);
}
showData(jQuery('#youtube-player-container').tubeplayer('data'));
function initPlayer(){
jQuery("#youtube-player-container").tubeplayer({
initialVideo: VideoID,
width: 600,
height: 450,
onPlayerPlaying: function(){$('.EventListener').text('The video is played at' + data.currentTime);},
onPlayerPaused: function(){$('.EventListener').text('The video is paused at' + data.currentTime);},
onPlayerEnded: function(){$('.EventListener').text('The video ended');},
onPlayerBuffering: function(){$('.Bufferstatus').text('The video is buffering');},
modestbranding: false,
showControls: 1,
onQualityChange: function(quality){$('.qualityCheck').text('The quality of the video is: ' +quality);}
});
};
The specific data is would like is the video URL, the time at which the event took place if possible. The data shows in the pop up when the tags are clicked.
Any help is greatly appreciated.
Thanks,
Simon

You should invoke $("#youtube-player-container").tubeplayer("data") every time you want to get information from the player. This is to ensure that you get the most up to date information.
The code inside of the onPlayerX events doesn't make any sense:
$('.EventListener').text('The video is played at' + data.currentTime);
since the 'data' object doesn't refer to anything.
Instead of using 'data.currentTime', use:
$("#youtube-player-container").tubeplayer("data").currentTime
and that should take care of your issue.
Alternatively, since you have setup the 'showTime' and 'showVideoURL' functions that take a data object, you can pass the .tubeplayer("data") object into those methods, like:
showTime( $("#youtube-player-container").tubeplayer("data") )
similarly to how showData is being used before initPlayer is defined.
Does that help?

How can I display multiple (but seperate) JSON requests on the same page

I have a web page where I want to display hotel reviews from the yelp.com API for a number of hotels.
I have managed to do this for one hotel, and it works perfectly displaying the data under that specific hotel's details on the page. However, how can I now multiply this process so that I have separate reviews for each hotel?
My web page can be seen at http://dev.bhx-birmingham-airport.co.uk/pages/hotels.php to get an idea of what I'm trying to do.
The source code I am using so far looks like:
<script>
function showData(data) {
$.each(data.businesses, function(i,business){
// extra loop
$.each(business.reviews, function(i,review){
var content = '<p>Review - ' + review.text_excerpt + ' Read more...</p>';
content += 'Rating - <img src="' + business.rating_img_url + '" />';
content += '<p>Date Added - ' + review.date + '</p>';
$(content).appendTo('#hilton');
});
});
}
$(document).ready(function(){
// note the use of the "callback" parameter
writeScriptTag( "http://api.yelp.com/business_review_search?"+
"term=hilton%20metropole"+
"&location=B26%203QJ"+
"&ywsid=[...]"+
"&callback=showData"); // <- callback
});
function writeScriptTag(path) {
var fileref = document.createElement('script');
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", path);
document.body.appendChild(fileref);
}
</script>

Your question is somewhat unclear.
I assume that you want to send multiple requests to Yelp and have them processed by different callback functions.
You can do that by making a buildCallback method that takes information about the request to generate a callback for and returns a function.
You can then use an invocation of that function as the callback parameter, like this: callback=buildCallback('something') It will return a script that looks like this:
buildCallback('something')({"message: ... })
This code calls the buildCallback method, then calls the function that the buildCallback method returns.
For example:
(Assuming that each hotel has a <div class="HotelReviews" id="giveThisToYelp">)
function buildCallback(hotelName) {
return function(data) {
$.each(data.businesses, function(i,business){
// extra loop
$.each(business.reviews, function(i,review){
var content = '<p>Review - ' + review.text_excerpt + ' Read more...</p>';
content += 'Rating - <img src="' + business.rating_img_url + '" />';
content += '<p>Date Added - ' + review.date + '</p>';
$(content).appendTo('#' + hotelName);
});
});
};
}
$(function() {
$('.HotelReviews').each(function() {
$.getScript("http://api.yelp.com/business_review_search?"+
"term=" + this.id +
"&location=B26%203QJ"+
"&ywsid=[...]"+
"&callback=buildCallback(" + this.id + ")"
);
});
});

Instead of inserting a script tag on the page with the request url and a callback function name, You should make multiple requests to Yelp services manually.
A simple example in JQuery:
function LoadReviews() {
for (var i = 0; i < myhotels.length; i++) {
$.getJSON("http://api.yelp.com/business_review_search?" + myhotels[i], null, showData);
}
}
Where the myhotels array contains the search parameters for each of your hotels.