jquery - 无法迭代超过四个 JSON 对象

Question

我正在浏览一堆 JSON 对象，首先创建一个“名称”列表，然后使用名称搜索 JSON 文件并从“名称”对象下方抓取各种对象。

我遇到的问题是，当 JSON 文件中有四个以上的对象时，脚本会严重崩溃（浏览器挂起，然后给我一个“警告：脚本无响应”错误）。

访问前四个对象很好，但是单击生成的链接转到第五个对象时，一切都会出错。

示例 JSON 如下...</p>

{"glass":[
  {
     "name":"Drink Name 1",
     "ingredients":{
        "liquids":["Gin", "Tonic"],
        "amounts":[60, 180],
        "colours":["ffffff", "51c98c"],
        "garnish":["Cucumber slice"],
        "ice":["cubes"]
     },
     "method":["Add plenty of ice into glass", "Pour gin over ice", "Top up with tonic", "Stir"],
     "finished":["FAFFFE"]
  },
  {
     "name":"Drink Name 2",
     "ingredients":{
        "liquids":["Gin", "Tonic"],
        "amounts":[60, 180],
        "colours":["ffffff", "51c98c"],
        "garnish":["Cucumber slice"],
        "ice":["cubes"]
     },
     "method":["Add plenty of ice into glass", "Pour gin over ice", "Top up with tonic", "Stir"],
     "finished":["FAFFFE"]
  },      
  {
     "name":"Drink Name 3",
     "ingredients":{
        "liquids":["Gin", "Tonic"],
        "amounts":[60, 180],
        "colours":["ffffff", "51c98c"],
        "garnish":["Cucumber slice"],
        "ice":["cubes"]
     },
     "method":["Add plenty of ice into glass", "Pour gin over ice", "Top up with tonic", "Stir"],
     "finished":["FAFFFE"]
  },
  {
     "name":"Drink Name 4",
     "ingredients":{
        "liquids":["Gin", "Tonic"],
        "amounts":[60, 180],
        "colours":["ffffff", "51c98c"],
        "garnish":["Cucumber slice"],
        "ice":["cubes"]
     },
     "method":["Add plenty of ice into glass", "Pour gin over ice", "Top up with tonic", "Stir"],
     "finished":["FAFFFE"]
  },
  {
     "name":"Drink Name 5",
     "ingredients":{
        "liquids":["Gin", "Tonic"],
        "amounts":[60, 180],
        "colours":["ffffff", "51c98c"],
        "garnish":["Cucumber slice"],
        "ice":["cubes"]
     },
     "method":["Add plenty of ice into glass", "Pour gin over ice", "Top up with tonic", "Stir"],
     "finished":["FAFFFE"]
  }
]
}

我的代码（其中的一部分）目前看起来像这样……</p>

//Get the JSON list and search through it for a match to the recipe name
$.getJSON(url, function(data) {
cache:false;
      for (var i=0;i<data.glass.length;i++){
      var glass = data.glass[i]

      //Matching the recipe to the cocktail name
      if (glass.name == recipe){


       // Saving the liquids array as a variable
      liquidIng = (data.glass[i].ingredients.liquids)
      console.log(liquidIng);

      //Saving the amounts as a variable
      liquidAmounts = (data.glass[i].ingredients.amounts)
      var total = 0
           for (var i = 0; i < liquidAmounts.length; i++) {
            total += parseInt(liquidAmounts[i]);
            }

      //Divide the total by 100 to get onePercent
      var onePercent
      onePercent = total /100;

      //Write and multiply the amounts by the onePercent
      var outputAmounts="<div style=\"height:100%\">";
      for (var i in liquidAmounts) {
      outputAmounts+="<div style=\"height:" + liquidAmounts[i] / onePercent + "%; background-color:#" + glass.ingredients.colours[i] + "\">" + glass.ingredients.liquids[i] + "</div>";
      }
      outputAmounts+="</div>";

      document.getElementById("ingredientsAmounts").innerHTML=outputAmounts;        


      //Write the list of ingredients
      var outputIngredients="<ul>";
      for (var i in liquidIng) {
      outputIngredients+="<li>" + glass.ingredients.liquids[i] + "</li>";
      }
      outputIngredients+="</ul>";
      outputIngredients+="<p>" + glass.ingredients.garnish[0] + "</p>";

      document.getElementById("ingredientsList").innerHTML=outputIngredients;

      //Writing the Method
      var outputMethod="<ul>";
      for (var i in glass.method) {
      outputMethod+="<li>" + glass.method[i] + "</li>";
      }
      outputMethod+="</ul>";

      document.getElementById("methodList").innerHTML=outputMethod;

      }//Matching cocktail ends
      }//Get Recipe function ends
});

该脚本会输出它应该输出的 HTML，但在它经过六秒钟的思考之前不会输出。然后一切都停止了。

我能理解的最接近调试消息的内容是显示为…</p>

 var glass = data.glass[i]

我对 JQuery 很陌生，所以请尽量忽略我的无知——我真的很难过。任何帮助将不胜感激。（另外，为发布大量 JSON 代码道歉）

谢谢，马特

score 0 · Accepted Answer

我不知道您的问题的答案，但我可以建议一些检查事项和有用的技巧。

首先，如果您还没有这样做，并假设您的实际数据与示例不同，请确保它实际上是列表中的位置而不是内容的情况。打乱数据顺序并检查它是否仍然在 #5 上死掉
接下来，添加调试语句 - 易于感知的单行命令（输出到屏幕通常对此有所帮助，但在您的情况下可能不太有用。如果您可以做任何事情，将提供您可以事先感知的输出到崩溃，那么您可以使用它来追踪究竟是哪条线路导致了问题，并且可以使用它来获取有关崩溃前立即状态的信息 - 两者都非常有用。如果没有别的，你应该能够提前人为地终止函数，将数据输出到某个地方的 html - 这会使跟踪特定位置变得更加烦人，因为您每次运行只能进行一次检查，但它仍然应该有助于公平少量。
此外，尝试不同的浏览器/计算机，如果这样做相对容易的话。如果它是特定于浏览器的错误，您很可能可以使用它来查找遇到相同问题的其他人和/或更仔细地确定问题所在。

score 0 · Accepted Answer

这是更新后的代码，似乎您错误地使用了内部 for 循环。我删除了 if 条件以检查收据，但您可以将其放回...

至少现在您的代码不会陷入循环。但是您可能仍然需要修复要显示的值，因为我对逻辑不太确定。

for (var i = 0; i < data.glass.length; i++) {
      var glass = data.glass[i];

       // Saving the liquids array as a variable
      liquidIng = (data.glass[i].ingredients.liquids);
      console.log("Liquid: " + liquidIng);

      //Saving the amounts as a variable
      liquidAmounts = (data.glass[i].ingredients.amounts)
      var total = 0

      for (var j = 0; j < liquidAmounts.length; j++) {
            total += parseInt(liquidAmounts[j]);
      }

      //Divide the total by 100 to get onePercent
      var onePercent
      onePercent = total /100;

      //Write and multiply the amounts by the onePercent
      var outputAmounts="<div style=\"height:100%\">";
      for (var p in liquidAmounts) {
          outputAmounts+="<div style=\"height:" + p / onePercent + "%; background-color:#" + glass.ingredients.colours[i] + "\">" + glass.ingredients.liquids[i] + "</div>";
      }
      outputAmounts+="</div>";

      document.getElementById("ingredientsAmounts").innerHTML=outputAmounts;        


      //Write the list of ingredients
      var outputIngredients="<ul>";
      for (var p in liquidIng) {
          outputIngredients+="<li>" + p + "</li>";
      }
      outputIngredients+="</ul>";
      outputIngredients+="<p>" + glass.ingredients.garnish[0] + "</p>";

      document.getElementById("ingredientsList").innerHTML=outputIngredients;

      //Writing the Method
      var outputMethod="<ul>";
      for (var p in glass.method) {
          outputMethod+="<li>" + p + "</li>";
      }
      outputMethod+="</ul>";

      document.getElementById("methodList").innerHTML=outputMethod;


}//Get Recipe function ends

score 0 · Accepted Answer

正如@Tomalak 所注意到的，我在同一个函数中多次重用了“i”变量。我已经将它们全部分开并将步骤分开不同的功能，这似乎已经成功了。

感谢您的评论和帮助。一如既往地受到高度赞赏。

jquery - 无法迭代超过四个 JSON 对象

3 回答 3

Related

Reference