无法迭代超过四个JSON对象

Question

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

我遇到的问题是，当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

这是更新后的代码，似乎您错误地使用了内部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

Answer 2

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

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

Answer 3

@Tomalak注意到，我在同一函数中多次重用"I"变量。我已经把它全部拆开，并将不同函数之间的步骤分开，这似乎已经完成了任务。

谢谢你们的评论和帮助。和以往一样，我们非常感激。