JavaScript-переменная «null»

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)); 
 
     
 
\t }); 
 
    
 
} 
 

 
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

Вы должны вызвать 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 

Answer 2

Я бы не использовать $ за цикл. Я не уверен, что структуры данных, которые вы получаете, но вы, вероятно, потребуется вложенный цикл, чтобы получить все данные в любом случае это должно сделать трюк.

Как точка для loo p отлично подходит для объектов. Одна из причин заключается в том, что итератор является ключом к объекту. В этом примере, если вы выполните 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/