JavaScript variable is "null"

JavaScript variable is "null"

本文关键字：quot null variable is JavaScript      更新时间：2023-09-26

第30行，我面临$.each(data. data.)的问题。菜单，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();

您必须调用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

我不会在循环中使用$。我不确定你正在接收的数据的结构，但是你可能需要一个嵌套的循环来获取所有的数据，这应该是可行的。

作为一点，for in循环对对象非常有效。一个原因是迭代器是对象中的键。在本例中，如果在第二个循环中执行console.log(ii)，您将看到name或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/

相关文章：