загрузки изображений из JSon файла с JQuery

Question

Так что я JSon файл, который в настоящее время загружает текст и изображения по отдельности довольно хорошо, это всего лишь простой пример того, что я сделал, чтобы проверить, если он будет работать:

outputc+="<li>" 
    outputc+=this.name+" "+this.price+"</li>"; 
    $('#featured').append(outputc); 
    $("<img/>").attr('src',this.images).appendTo('#featured'); 

Используя приведенный выше код работает отлично, однако мне нужно для обоих из них, чтобы быть обернут со списком, так что я сделал некоторый поиск, и я нашел это:

$(document).ready(function(){ 

//loading json file 

var url = "shoppingItems.json"; 

$.getJSON(url,function(json){ 


    $.each(json.shoppingItem,function() 
    { 
     var output ='<li><img src= "'+this.images+'" alt ="'+this.name+'"></li>'; 
    }); 

    $('.items').append(output); 
}); 
}); 

выше JQuery не вернуть хоть что-то, там ничего плохого в моем json-файле, поскольку он был проверен, и код работает, если я симулятор это предупреждает об этом. Это потенциально что-то, что я должен делать неправильно с моим выходным скриптом, который я не вижу.

Мой JSON файл можно найти здесь: Json file not loading or showing alerts

Answer 1

Поскольку вы объявляете его внутри функции обратного вызова, как var output, переменная output является локальной для этой функции обратного вызова и исчезает, как только цикл завершается. Даже если это не так, использование оператора = означало бы, что вы перезаписывали предыдущее значение с каждой итерацией.

Попробуйте это:

var output = ""; // initialize it outside the loop 
$.each(json.shoppingItem,function() 
{ 
    output += '<li><img src= "'+this.images+'" alt ="'+this.name+'"></li>'; 
}); 
$('.items').append(output); 

http://jsfiddle.net/mblase75/zB5fv/