在（多維）$ .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; 
    };