jquery - 4 つを超える JSON オブジェクトを反復処理できません

Question

最初に「名前」のリストを作成し、次に名前を使用して JSON ファイルを検索し、「名前」の付いたオブジェクトの下からさまざまなオブジェクトを取得します。

私が抱えている問題は、JSON ファイルに 4 つ以上のオブジェクトがある場合、スクリプトがひどく失敗することです (ブラウザーがハングして、「警告: スクリプトが応答しません」というエラーが表示されます)。

最初の 4 つのオブジェクトへのアクセスは問題ありませんが、生成されたリンクをクリックして 5 番目に移動すると、すべてがうまくいかなくなります。

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 を出力しますが、それについて 6 秒間十分に検討する前に出力しません。その後、すべてが停止します。

デバッグ メッセージであると私が理解できる最も近いものは、次の行です。</p>

 var glass = data.glass[i]

私は JQuery に非常に慣れていないので、私の無知を見逃してください。本当に困惑しています。どんな助けでも大歓迎です。(また、大量の JSON コードを投稿して申し訳ありません)

ありがとう、マット

Answer 1

あなたの質問に対する答えはわかりませんが、確認すべきいくつかのことと便利なトリックを提案できます。

• 最初に、まだ行っていない場合、実際のデータが例と同じではないと仮定して、実際にはコンテンツではなくリスト内の場所であることを確認してください。データの順序をシャッフルし、#5 でまだ死んでいるかどうかを確認します
• 次に、デバッグ ステートメントを追加します。これは、認識しやすい単一行のコマンドです (画面への出力は、このために役立つことがよくありますが、あなたの場合はあまり役に立たないかもしれません。何かできることがあれば、以前に認識できる出力を提供します。それを使用して、問題を引き起こしている行を正確に追跡することができ、それを使用してクラッシュ直前の状態に関する情報を取得できる場合があります - どちらも非常に便利です。関数を人為的に早期に終了させ、どこかの html にデータを出力することができます。実行ごとに 1 つのチェックしかできないため、特定のスポットを追跡するのが少し面倒になりますが、それでも公平に役立つはずです。少し。
• さらに、比較的簡単に実行できる場合は、さまざまなブラウザー/コンピューターで試してください。ブラウザ固有のバグである場合は、それを使用して、同じ問題を抱えている他の人を見つけたり、問題が何であるかをより詳しく特定したりできる可能性があります.

Answer 2

更新されたコードは次のとおりです。内側の 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 3

@Tomalak が気付いたように、同じ関数内で「i」変数を複数回再利用していました。私はそれをすべてバラバラにして、トリックを行ったように見えるさまざまな機能にステップを分けました。

コメントありがとうございます。これまで同様、大変ご好評をいただいております。