Передача объекта в (многомерном) $ .each для функции вне закрытия

Question

Я хочу передать объект продукта из цикла $ .each (внутри функции) в функцию за пределами закрытия.

Когда я console.log произведение (объект) он дает мне:

"Uncaught ReferenceError: продукт не определен"

Вот мой код, скажите, пожалуйста, что мне не хватает:

function openMenu(url){ 

    // get feed from API 
    $.getJSON(url, function(storedata) { 
     $('#live-menu').addClass('active'); 
     $('.live-menu-content').addClass('active'); 

     // each the feed data 
     $.each(storedata, function(categoryName, productObject){ 
     // category title and open table 
     $('.live-menu-content').append('<h1 class="menu-category-title">'+categoryName+'</h1>'); 
     $('.live-menu-content').append('<table class="table table-'+categoryName+'"><tbody>'); 

     //go through products 
     $.each(productObject, function(productId, product) { j++; 
      $('.table-'+categoryName+'').append('<tr><td>'+product.name+'<br/><small>'+product.description+'</small></td><td>€'+product.price+'</td><td><a onclick="addToCart(product);" class="btn btn-primary pull-right" href="#">Add</a></td></tr>'); 
     }); 

     // close table 
     $('.live-menu-content').append('</tbody></table>'); 
     }); 

    }) 
    // on fail 
    .fail(function() { 
     alert("Error!"); 
    }); 
    return false; 
    } 

    function addToCart(product){ 
    console.log(product); 
    return false; 
    }; 

Answer 1

Я думаю, вы понимаете это, но ваш product определяется только в пределах области действия each. И этот продукт используется для визуализации элемента DOM. И вместо того, чтобы рендерить ваш действительный продукт, он отображает буквальную строку «продукт», которая не существует за пределами вашего цикла. Когда элемент DOM щелкнут, событие click находится в совершенно отдельной области. Можете ли вы передать идентификатор продукта функции? И затем найдите продукт в вашей функции обработчика? Вам также необходимо будет создать глобальный объект для ссылки на него позже:

var store; 
function openMenu(url){ 

    // get feed from API 
    $.getJSON(url, function(storedata) { 
     store = storedata; //assign to global object 
     $('#live-menu').addClass('active'); 
     $('.live-menu-content').addClass('active'); 

     // each the feed data 
     $.each(storedata, function(categoryName, productObject){ 
     // category title and open table 
     $('.live-menu-content').append('<h1 class="menu-category-title">'+categoryName+'</h1>'); 
     $('.live-menu-content').append('<table class="table table-'+categoryName+'"><tbody>'); 

     //go through products 
     $.each(productObject, function(productId, product) { j++; 
      $('.table-'+categoryName+'').append('<tr><td>'+product.name+'<br/><small>'+product.description+'</small></td><td>€'+product.price+'</td><td><a onclick="addToCart("' + productId + '");" class="btn btn-primary pull-right" href="#">Add</a></td></tr>'); 
     }); 

     // close table 
     $('.live-menu-content').append('</tbody></table>'); 
     }); 

    }) 
    // on fail 
    .fail(function() { 
     alert("Error!"); 
    }); 
    return false; 
    } 

    function addToCart(productId){ 
    var product = store.filter(function(category, catIndex){ 
     return category.filter(function(product, prodIndex){ 
      return (prodIndex == productId); 
     }); 
    }); 
    console.log(product); 
    return false; 
    };