javascript - 从未知数量的多个数组创建一个列表

Question

我的目标是列出产品的所有成分。不幸的是，有多个成分数组，每个数组内有多种成分。阵列的数量会因产品而异，因此我需要以某种方式捕获所有成分。到目前为止我已经:

查找所有成分数组并分别列出

$(function() {
    var params = {
        // Request parameters
        // "gtin": "{string}",
       // "tpnb": "{string}",
       // "tpnc": "{string}",
       // "catid": "{string}",

        // "gtin": "05052004435789",
            "tpnc": "285363525",
    };

    $.ajax({
        url: "https://dev.tescolabs.com/product/?" + $.param(params),
        beforeSend: function(xhrObj){
            // Request headers
            xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key","key");
        },
        type: "GET",
        // Request body
        data: "{body}",

    })
        .done(function(data) {
            // alert("success");
            // alert(data);
            console.log(data);

var ingredientArrays = data.products[0].ingredients;
var l = ingredientArrays.length;
for (i = 0; i < l; i++){
   var allIngredients = ingredientArrays[i];
    console.log(allIngredients);
}

        })
        .fail(function() {
            alert("error");
        });
});

列出单个已定义成分数组的成分，在本例中为数组 2。

var list = data.products[0].ingredients[2];
var ingredient = list.split(/[:;,.]+/);
for (list = 0; list < ingredient.length; ++list) {
    console.log(ingredient[list]);
}

到目前为止一切顺利，但我希望合并此功能，以便我可以找到所有数组中的所有成分并创建一个列表。

如果我这样做 console.log(data); 我得到:

{
  "products": [{
    "gtin": "05054402006097",
    "tpnb": "073706172",
    "tpnc": "285363525",
    "description": "Tesco Stonebaked Thin Double Pepperoni Pizza 330G",
    "brand": "TESCO",
    "qtyContents": {
      "quantity": 330.0,
      "totalQuantity": 330.0,
      "quantityUom": "g",
      "netContents": "330g e"
    },
    "productCharacteristics": {
      "isFood": true,
      "isDrink": false,
      "healthScore": 48,
      "isHazardous": false,
      "storageType": "Frozen"
    },
    "ingredients": [
      "<strong>Wheat</strong> Flour",
      "Tomato Purée",
      "Mozzarella Cheese (<strong>Milk</strong>) (16%), Pepperoni (10%), Water, Mini Pepperoni (3.5%), Yeast, Dextrose, Rapeseed Oil, Salt, Sugar, Dried Garlic, Dried Herbs, Spice. Pepperoni contains: Pork, Pork Fat, Salt, Dextrose, Spices, Spice Extracts, Antioxidants (Extracts of Rosemary, Sodium Ascorbate), Preservative (Sodium Nitrite). Mini Pepperoni contains: Pork, Pork Fat, Salt, Dextrose, Spices, Spice Extracts, Sugar, Antioxidants (Sodium Erythorbate, Extracts of Rosemary), Preservative (Sodium Nitrite)."
    ],

更新

为了澄清，我可以在控制台日志中返回结果，如下所示:

tesco.js:70 
["<strong>Wheat</strong> Flour"]
0
:
"<strong>Wheat</strong> Flour"
length
:
1
__proto__
:
Array(0)
tesco.js:70 
["Tomato Purée"]
0
:
"Tomato Purée"
length
:
1
__proto__
:
Array(0)
tesco.js:70 
(35) ["Mozzarella Cheese (<strong>Milk</strong>) (16%)", " Pepperoni (10%)", " Water", " Mini Pepperoni (3", "5%)", " Yeast", " Dextrose", " Rapeseed Oil", " Salt", " Sugar", " Dried Garlic", " Dried Herbs", " Spice", " Pepperoni contains", " Pork", " Pork Fat", " Salt", " Dextrose", " Spices", " Spice Extracts", " Antioxidants (Extracts of Rosemary", " Sodium Ascorbate)", " Preservative (Sodium Nitrite)", " Mini Pepperoni contains", " Pork", " Pork Fat", " Salt", " Dextrose", " Spices", " Spice Extracts", " Sugar", " Antioxidants (Sodium Erythorbate", " Extracts of Rosemary)", " Preservative (Sodium Nitrite)", ""]
0
:
"Mozzarella Cheese (<strong>Milk</strong>) (16%)"
1
:
" Pepperoni (10%)"
2
:
" Water"
3
:
" Mini Pepperoni (3"
4
:
"5%)"
5
:
" Yeast"
6
:
" Dextrose"
7
:
" Rapeseed Oil"
8
:
" Salt"
/// and so on\

使用此代码:

    var ingredientArrays = data.products[0].ingredients;
    var l = ingredientArrays.length;
    for (i = 0; i < l; i++){
       var allIngredients = ingredientArrays[i];
        var ingredient = allIngredients.split(/[:;,.]+/);
        console.log(ingredient);
    }

但正如你所看到的，它是单独计算成分的。我希望它们成为一份完整的 list 。计数应从 0 开始并递增。我不会根据每种成分数组显示结果，从而得到上述结果 1、1、35。我会得到一个结果 37。

Answer 1

因此，由于您的实际问题是您想要迭代从服务器接收到的响应，并且响应可以有多个产品并且内部每个 product 都有 ingredients 数组，并且该数组的大小可能会有所不同，并且您希望能够迭代其中的所有索引。

您应该使用 for in 和 for 循环。要查看差异，请参阅 here 。

我将使用提供的响应数据并对其进行迭代，它将迭代其中的所有产品及其所有成分。

查看下面的演示

var response = {
  "products": [{
    "gtin": "05054402006097",
    "tpnb": "073706172",
    "tpnc": "285363525",
    "description": "Tesco Stonebaked Thin Double Pepperoni Pizza 330G",
    "brand": "TESCO",
    "qtyContents": {
      "quantity": 330.0,
      "totalQuantity": 330.0,
      "quantityUom": "g",
      "netContents": "330g e"
    },
    "productCharacteristics": {
      "isFood": true,
      "isDrink": false,
      "healthScore": 48,
      "isHazardous": false,
      "storageType": "Frozen"
    },
    "ingredients": [
      "<strong>Wheat</strong> Flour",
      "Tomato Purée",
      "Mozzarella Cheese (<strong>Milk</strong>) (16%), Pepperoni (10%), Water, Mini Pepperoni (3.5%), Yeast, Dextrose, Rapeseed Oil, Salt, Sugar, Dried Garlic, Dried Herbs, Spice. Pepperoni contains: Pork, Pork Fat, Salt, Dextrose, Spices, Spice Extracts, Antioxidants (Extracts of Rosemary, Sodium Ascorbate), Preservative (Sodium Nitrite). Mini Pepperoni contains: Pork, Pork Fat, Salt, Dextrose, Spices, Spice Extracts, Sugar, Antioxidants (Sodium Erythorbate, Extracts of Rosemary), Preservative (Sodium Nitrite)."
    ],
  }]
}
//console.log(test.products);
let products = response.products;
for (var data in products) {
  let product = products[data];
  let ingredients = product.ingredients;
  console.log("PRODUCT : " + product.brand);
  console.log("=======================");
  console.log("INGREDIENTS");
  for (var i = 0; i < ingredients.length; i++) {

    console.log("--------------" + ingredients[i]);
  }
  console.log("=======================");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

编辑

在更新之后，实际上您是在 regex 上拆分 ingredients 数组内的每个索引，即 /[:;,.]/ 并且数组的结果索引可能会有所不同，对于拆分后的所有这些数组，您希望将其合并到单个数组中，因此您需要使用 Array.prototype.concat()

请参阅下面的演示

var test = {
  "products": [{
    "gtin": "05054402006097",
    "tpnb": "073706172",
    "tpnc": "285363525",
    "description": "Tesco Stonebaked Thin Double Pepperoni Pizza 330G",
    "brand": "TESCO",
    "qtyContents": {
      "quantity": 330.0,
      "totalQuantity": 330.0,
      "quantityUom": "g",
      "netContents": "330g e"
    },
    "productCharacteristics": {
      "isFood": true,
      "isDrink": false,
      "healthScore": 48,
      "isHazardous": false,
      "storageType": "Frozen"
    },
    "ingredients": [
      "<strong>Wheat</strong> Flour",
      "Tomato Purée",
      "Mozzarella Cheese (<strong>Milk</strong>) (16%), Pepperoni (10%), Water, Mini Pepperoni (3.5%), Yeast, Dextrose, Rapeseed Oil, Salt, Sugar, Dried Garlic, Dried Herbs, Spice. Pepperoni contains: Pork, Pork Fat, Salt, Dextrose, Spices, Spice Extracts, Antioxidants (Extracts of Rosemary, Sodium Ascorbate), Preservative (Sodium Nitrite). Mini Pepperoni contains: Pork, Pork Fat, Salt, Dextrose, Spices, Spice Extracts, Sugar, Antioxidants (Sodium Erythorbate, Extracts of Rosemary), Preservative (Sodium Nitrite)."
    ],
  }]
}

var ingredientArrays = test.products[0].ingredients;
var l = ingredientArrays.length;
var merged = Array();
for (i = 0; i < l; i++) {
  var allIngredients = ingredientArrays[i];
  var ingredient = allIngredients.split(/[:;,.]+/);
  // merged.push(Array.prototype.concat.apply([], ingredient));
  merged = merged.concat(ingredient);
}

console.log(merged);