将（多维）$.each 中的对象传递给闭包之外的函数

Question

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

当我控制台记录产品（对象）时，它给了我：

“未捕获的引用错误：未定义产品”

这是我的代码，请告诉我我缺少什么：

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 元素时，点击事件在一个完全独立的范围内。您可以将产品的 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;
  };