Question

我正在浏览一堆JSON对象，首先创建一个'names'列表，然后使用该名称搜索JSON文件，并从'name'd对象下面抓取各种对象。< / p>

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

访问前四个对象很好，但点击生成的链接到第五个就是一切都出错了。

示例JSON如下......

{"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"]
  }
]
}

我的代码（很好的一部分）目前看起来像这样......

//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，但是在它有六秒钟的考虑之前就不会输出它。然后一切都停止了。

我能理解的最接近调试信息的是读取行...

 var glass = data.glass[i]

我对JQuery很新，所以请尽量忽略我的无知 - 我真的很难过。任何帮助都将受到大力赞赏。（另外，为发布大量JSON代码道歉）

谢谢，马特

Answer 1

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

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

Answer 2

这是更新的代码，似乎你错误地使用了内部for循环..我删除了if条件来检查recipe，但你可以把它放回去..

至少现在你的代码不会卡在循环中。但是你可能仍然需要修复你想要显示的值，因为我对逻辑不太了解。

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

Answer 3

正如@Tomalak注意到的那样，我在同一个函数中多次重复使用'i'变量。我已经将它们全部拆开并将各个步骤分开，这些功能似乎已经完成了。

感谢你们的评论和帮助。一如既往地非常感谢。

无法迭代超过四个JSON对象

3 个答案: