在（多维）$ .each函数中传递一个对象

Question

我想将一个产品对象从$ .each（函数内）循环传递给闭包外的函数。

当我CONSOLE.LOG产品（对象），它给了我：

“未捕获的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元素。而不是呈现您的实际产品，而是呈现文字字符串“product”，该字符串不存在于循环范围之外。当单击DOM元素时，单击事件处于完全独立的范围内。你可以把产品的id传递给函数吗？然后在处理函数中查找产品？您还需要创建一个全局的store对象以供日后参考：

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; 
    };