Question

第30行我面临$ .each（data.menu，function（）的问题。控制台告诉我“数据为空”。有人可以解释发生了什么吗？谢谢

function getFoodMenuData () {
    
    var url = 'http://localhost:8888/Tom_Carp_Final_Project/Chorizios/foodMenu.json';
    
    $.getJSON(url, function (data) {
        
        window.localStorage.setItem('choriziosMenu333', JSON.stringify(data));
        
	});
    
}

function showFoodMenuData () {
    
    var data = JSON.parse(window.localStorage.getItem('choriziosMenu333'));
    
    var images = "";
        
    $.each(data.menu, function () {
 
       images += '<li class="list-group-item"><img style="width: 100%;" src= "' + this.url + '"></li>';
       images += '<li class="list-group-item">' + this.description + '</li>';
     
    });
        
    $('#foodMenu').append(images); 
     
}
    showFoodMenuData();

Answer 1

我不会将$用于循环。我不确定您收到的数据的结构，但您可能需要一个嵌套循环来获取所有数据，这应该可以解决这个问题。

作为一个点，for循环对于对象非常有用。一个原因是迭代器是对象中的关键。在此示例中，如果您在第二个循环中使用console.log（ii），您将看到名称或URL。

HTML

<ul></ul>

的Javascript

var menu = {
    item1 : {
        name : "Food1",
        url  : "https://s-media-cache-ak0.pinimg.com/736x/79/82/de/7982dec0cc2537665a5395ac18c2accb.jpg" 
    },
    item2 : {
        name : "Food2",
        url  : "http://i.huffpost.com/gen/1040796/images/o-CANADIAN-FOODS-facebook.jpg"
    }
};

$( document ).ready( function () {
    for ( var i in menu ) {
        for ( var ii in menu[ i ] ) {
            var elem = ii === "name" ? "<p>" + menu[ i ][ ii ] + "</p>" : "<img src="  + menu[ i ][ ii ] + " height='100px'/>"
            $( "ul" ).append( "<li>" + elem + "</li>" ); 
        }
    }
});

https://jsfiddle.net/dh3ozpxk/

Answer 2

您必须致电getFoodMenuData()，然后在异步$.getJSON的回调中，致电showFoodMenuData()。

function getFoodMenuData() {
  var url = 'http://localhost:8888/Tom_Carp_Final_Project/Chorizios/foodMenu.json';
  $.getJSON(url, function(data) {
    window.localStorage.setItem('choriziosMenu333', JSON.stringify(data));
    showFoodMenuData(); // <--- call this inside the callback
  });
}

function showFoodMenuData() {
  var data = JSON.parse(window.localStorage.getItem('choriziosMenu333'));
  var images = "";
  $.each(data.menu, function() {
    images += '<li class="list-group-item"><img style="width: 100%;" src= "' + this.url + '"></li>';
    images += '<li class="list-group-item">' + this.description + '</li>';
  });
  $('#foodMenu').append(images);
}

getFoodMenuData(); // <--- call this first

JavaScript变量为“null”

2 个答案: