如何从多个数组中提取来构建列表？

Question

所以我有这个工作函数，它从另一个数据中提取数据来构建一个列表。但是，我需要的数据跨越多个数组，因此这些项目返回“未定义”。

现在我只从位于 http://api.example.com/items?key=123456789 的产品数组中提取（这有 .productName 和 .itemCode ）

.description 和 .price 是另一个数组的一部分 http://api.example.com/itemCode?key=123456789

有没有办法将所有这些与 jquery 结合起来构建一个动态列表？

function foodQuery(){

    var foodURL = "http://api.example.com/items?key=123456789";

    $.ajax({
        url: foodURL,
        type: 'GET',
        contentType: "text/plain",
        dataType: 'json',
        success: function(json) {

            $.each(json.products, function(index, product) { 

                // build product block
                var htmlString = '<div class="product large-3 columns">';
                //open imgwrap
                htmlString += '<div class="imgwrap">';
                //get img src
                htmlString += ' <img class="item_img" src="http://api.example.com/assets/images/' + product.itemCode + '@2x.jpg" />';
                // close imgwrap
                htmlString += '</div>';
                // open textwrap
                htmlString += '<div class="textwrap">';
                // get productName
                htmlString += '<h1 class="product_headline">' + product.productName + '</h1>' ;
                // get itemCode
                htmlString += '<h4 class="item_id" >#' + product.itemCode + '</h4>';
                // get description
                htmlString += '<p class="product_desc">' + product.description + '</p>';
                // open price
                htmlString += '<div class="price">';
                // get price & close div
                htmlString += '<span class="dollar"><span class="usd">$</span>' + product.price + '</span> <span class="product_desc">per weight</span></div>'
                // close divs
                htmlString += '</div>';

                //console.log(htmlString);
                $('.listing').append( $(htmlString) );

           }); //end each

        }, // end success
        error: function(e) {
           console.log(e.message);

           $('.listing').append( '<h1 class="errmsg" >Sorry, there was an unkown error.</h1>' );
        } // end error
    }); // end ajax request
}

Answer 1

尝试为每个 $.ajax() 请求创建包含 URL 的数组，使用 $.when() 并将 this 设置为 $ ，.apply() 调用 foodQuery 并将 urls 数组中的每个 URL 作为每个 @ 的参数987654329@请求

var urls = ["http://api.example.com/items?key=123456789"
           , " http://api.example.com/?key=123456789"];

function foodQuery(url) {

    var foodURL = url;
    return $.ajax(settings);

}

$.when.apply($, $.map(urls, function(url, index) {
  return foodQuery(url)
}));