We Keep Coding

My JSON data is loading in twice using AJAX, it is only supposed to load once on click

I am using AJAX and Jquery to load a json object into my web page. It works great however 50-70% of the time it loads in the json data to my page twice, it appends the second set of data to my page, is there a good way to ensure that my data only loads once?
my initial thought was to make the json call synchronous instead of asynchronous but that doesn't sound right, is there a better way of doing it?
$('#myResource').click(function() {
$.getJSON("data/preachers.json", function(result) {
$.each(result, function(i, field) {
$("#preachers").append( function() {
var preacher = '<div class="box box1">';
preacher += '<div class="image">';
preacher += '<a href=' + '"' + (field.link) + '"' + ' target="_blank">';
preacher += '<img src= "img/resources/' + (field.image) + '" alt="' + (field.name) + '" class="resource_image">';
preacher += '</a>';
preacher += '</div>'; //class = image
preacher += '<div class="text">';
preacher += '<p><h2>' + (field.name) + '</h2>';
preacher += (field.details) + '</p>';
preacher += '</div>'; //class=text
preacher += '</div>'; //class=box
return preacher;
});
});
});
});

Try
$('#myResource').unbind('click').click(function(){
})...

try to disable a button after click
$('#myResource').click(function() {
$('#myResource').prop('disabled' , true); //<<<<<<<<<<<<<<<< here
$.getJSON("data/preachers.json", function(result) {
$.each(result, function(i, field) {
$("#preachers").append( function() {
var preacher = '<div class="box box1">';
preacher += '<div class="image">';
preacher += '<a href=' + '"' + (field.link) + '"' + ' target="_blank">';
preacher += '<img src= "img/resources/' + (field.image) + '" alt="' + (field.name) + '" class="resource_image">';
preacher += '</a>';
preacher += '</div>'; //class = image
preacher += '<div class="text">';
preacher += '<p><h2>' + (field.name) + '</h2>';
preacher += (field.details) + '</p>';
preacher += '</div>'; //class=text
preacher += '</div>'; //class=box
return preacher;
});
$('#myResource').prop('disabled' , false); //<<<<<<<<<<<<<<<<<<<<<<< here
});
});
});

with the help of some of the comments, the answer ended up being that i needed to unbind click at the beginning of the function, and leaving it unbound:
$('#myResource').click(function() {
$( "#myResource").unbind( "click" );
$.getJSON("data/preachers.json", function(result) {
$.each(result, function(i, field) {
console.log('load everything');
$("#preachers").append( function() {
var preacher = '<div class="box box1">';
preacher += '<div class="image">';
preacher += '<a href=' + '"' + (field.link) + '"' + ' target="_blank">';
preacher += '<img src= "img/resources/' + (field.image) + '" alt="' + (field.name) + '" class="resource_image">';
preacher += '</a>';
preacher += '</div>'; //class = image
preacher += '<div class="text">';
preacher += '<p><h2>' + (field.name) + '</h2>';
preacher += (field.details) + '</p>';
preacher += '</div>'; //class=text
preacher += '</div>'; //class=box
return preacher;
});
});
});
});

TypeError: a is undefined in JavaScript

I have created a JSON read function but I get error:
TypeError: a is undefined
Here is my code:
$(function() {
var json = $.getJSON("http://localhost/stratagic-json/project_json.php", function() {
console.log("success");
});
var mhtml = '';
$.each(json.slider, function(key, val) {
mhtml += '<li><div class="proj-details-wrap"> <img src="images/' + val.image + '" />';
mhtml += '<div class="proj-badge">' + val.status + '</div>';
mhtml += '<div class="proj-name">' + val.name + ' <span>' + val.location + '</span> </div>';
mhtml += '</div>';
mhtml += ' <div class="container proj-desc">' + val.description + '</div>';
mhtml += '</li>';
});
var $ul = $('<ul class="slides">').append($(mhtml)); // append DOM only one time.
$('.slider').append($ul);
})

The problem is that $.getJSON is an asynchronous method and you're treating it synchronously. json.slider is undefined because $.getJSON actually returns a promise, not the data. The data needs to be accessed via the callback or a promise. This should work:
$(function() {
$.getJSON("http://localhost/stratagic-json/project_json.php", function(json) {
var mhtml = '';
$.each(json.slider, function(key, val) {
mhtml += '<li><div class="proj-details-wrap"> <img src="images/' + val.image + '" />';
mhtml += '<div class="proj-badge">' + val.status + '</div>';
mhtml += '<div class="proj-name">' + val.name + ' <span>' + val.location + '</span> </div>';
mhtml += '</div>';
mhtml += ' <div class="container proj-desc">' + val.description + '</div>';
mhtml += '</li>';
});
var $ul = $('<ul class="slides">').append($(mhtml)); // append DOM only one time.
$('.slider').append($ul);
});
})
You could also do something like this:
$(function() {
var jqXhr = $.getJSON("http://localhost/stratagic-json/project_json.php");
jqXhr.done( function (data) {
// Do something
});
})

Variables in string Jquery structure

I'm receiving the error
missing ; before statement
This is in reference to
var westvars += ''+ (i+1) +'. '+
el.
Any idea what may be going wrong. I've tried removing the line/reconstructing the line ect. I just can't seem to figure out what part of the string is using an incorrect syntax.
var westvars = '<div class="clear">';
westvars += '<div class="col-xs-2 teamname"><span>'+ (i+1) +'. '+ el.city +' '+ el.name +'</span>';
westvars += '</div>';
westvars += '<div class="col-xs-2 winsloss"><span>'+ el.wins +'-' +el.losses +'</span>';
westvars += '</div>';
westvars += '<div class="col-xs-2 gamesback">' + el.gback +';
westvars += '</div>';
westvars += '</div>';

Should be changed this way:
var westvars = '<div class="clear">';
westvars += '<div class="col-xs-2 teamname"><span>'+(i+1)+'. '+ el.city +' '+ el.name +'</span>';
westvars += '</div>';
westvars += '<div class="col-xs-2 winsloss"><span>'+ el.wins +'-' +el.losses +'</span>';
westvars += '</div>';
westvars += '<div class="col-xs-2 gamesback">' + el.gback + ' ';
westvars += '</div>';
westvars += '</div>';

ReferenceError: display is not defined

I got this 'ReferenceError: display is not defined' where my script link are as below.
<script type="text/javascript" src="catalog/view/javascript/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery/ui/jquery-ui-1.8.16.custom.min.js"></script>
I replace them with latest version 1.11.1 and tried with
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
But still there is Reference Error. What should i change my display function(Script):
function display(view) {
if (view == 'list') {
$('.product-grid').attr('class', 'product-list');
$('.product-list > div').each(function(index, element) {
html = '<div class="left">';
var image = $(element).find('.image').html();
if (image != null) {
html += '<div class="image">' + image + '</div>';
}
html += '<div class="mask hide-phone">';
html += ' <div class="wishlist">' + $(element).find('.wishlist').html() + '</div>';
html += ' <div class="compare">' + $(element).find('.compare').html() + '</div>';
html += '</div>';
html += ' <div class="name">' + $(element).find('.name').html() + '</div>';
html += ' <div class="description">' + $(element).find('.description').html() + '</div>';
var rating = $(element).find('.rating').html();
if (rating != null) {
html += '<div class="rating">' + rating + '</div>';
}
var price = $(element).find('.price').html();
if (price != null) {
html += '<div class="price">' + price + '</div>';
}
html += ' <div class="cart">' + $(element).find('.cart').html() + '</div>';
html += ' <div class="cart-phone show-phone hide-desktop hide-tablet">' + $(element).find('.cart-phone').html() + '</div>';
html += '</div>';
$(element).html(html);
});
$('.display').html(' <div id="list_b"></div> <a id="grid_a" title="<?php echo $text_grid; ?>" onclick="display(\'grid\');"></a>');
$.totalStorage('display', 'list');
} else {
$('.product-list').attr('class', 'product-grid');
$('.product-grid > div').each(function(index, element) {
html = '';
var image = $(element).find('.image').html();
if (image != null) {
html += '<div class="image">' + image + '</div>';
}
html += '<div class="mask hide-phone">';
html += ' <div class="wishlist">' + $(element).find('.wishlist').html() + '</div>';
html += ' <div class="compare">' + $(element).find('.compare').html() + '</div>';
html += '</div>';
html += '<div class="name">' + $(element).find('.name').html() + '</div>';
html += '<div class="description">' + $(element).find('.description').html() + '</div>';
var rating = $(element).find('.rating').html();
if (rating != null) {
html += '<div class="rating">' + rating + '</div>';
}
var price = $(element).find('.price').html();
if (price != null) {
html += '<div class="price">' + price + '</div>';
}
html += '<div class="cart">' + $(element).find('.cart').html() + '</div>';
html += ' <div class="cart-phone show-phone hide-desktop hide-tablet">' + $(element).find('.cart-phone').html() + '</div>';
$(element).html(html);
});
$('.display').html(' <a id="list_a" title="<?php echo $text_list; ?>" onclick="display(\'list\');"><?php echo $text_list; ?></a> <div id="grid_b"></div>');
$.totalStorage('display', 'grid');
}
}
view = $.totalStorage('display');
if (view) {
display(view);
} else {
display('list');
}

you can see that your conactenation is creating issues:
copied from the source of your link
html += '
<div class="cart" >
' + $(element).find('.cart').html() + '</div>';
at this line your div is having a newline character. may be this is caused by something else but you can do this:
html += ' <div class="cart">' + $(element).find('.cart').html() + '</div>';
html += ' <div class="cart-phone show-phone hide-desktop hide-tablet">' + $(element).find('.cart-phone').html() + '</div>';
html += '</div>';
here you can see html+=' <div>' this line is having a space before the div so you can remove it.
html += '<div class="cart">' + $(element).find('.cart').html() + '</div>';
html += '<div class="cart-phone show-phone hide-desktop hide-tablet">' + $(element).find('.cart-phone').html() + '</div>';
html += '</div>';

Outputing deeply nested JSON to HTML with Javascript

So I can access the data I need by going to console.log(data.response[0].entities.urls);but how do I output the second array of entities into a HTML format. Is there a way of breaking up the JSON data using a for loop or something?
$(document).ready(function () {
$.getJSON('http://www.jamesam.ac/dev202/sdillon3/', function (data) {
var output = '<ul data-role="listview" data-filter="true">';
$.each(data.response, function (key, val) {
output += '<li>';
output += '<img src="' + val.user.profile_image_url + '" alt="' + val.text + '" />';
output += '<h3>' + val.user.name + '</h3>';
output += '<h4><i>' + val.user.screen_name + '</i></h4>';
output += '<p>' + val.text + '</p>';
output += '</li>';
}); // go through each post
output += '</ul>';
$('#feed').html(output);
console.log(data)
//console.log(data.response[0].entities.urls);//
});
});

Solved!
Just needed to write a good old for loop.
$(document).ready(function () {
$.getJSON('http://www.jamesam.ac/dev202/sdillon3/', function (data) {
var output = '<ul data-role="listview" data-filter="true">';
$.each(data.response, function (key, val) {
output += '<li>';
output += '<img src="' + val.user.profile_image_url + '" alt="' + val.text + '" />';
output += '<h3>' + val.user.name + '</h3>';
output += '<h4><i>' + val.user.screen_name + '</i></h4>';
output += '<p>' + val.text + '</p>';
for(var i = 0; i < val.entities.urls.length; i++)
{
output+= '<a href="' + val.entities.urls[i].url +'" </a>';
}
output += '</li>';
}); // go through each post
output += '</ul>';
$('#feed').html(output);
});
});