需要拉動JSON項目的協助

Question

我正在使用JSON數據庫並在頁面上顯示成分。我爲每個配方都有一個單獨的HTML頁面。我在頁面上創建了一個無序列表，並在頁面上手動輸入配方的配方成分。

我想拉DB的食譜名稱，但我不能讓它顯示。如果它與數據庫中的項目UPC相匹配，我想要拉入正確的項目。請看下面。

$(document).ready(function() { 

'use strict'; 

    $.ajax({ 
    dataType: "jsonp", 
    url: '', 
    success: function(data){ 

     $.each(data, function(i, item) { 
      $('#recipeIngredients').html(
      "<ul>" + 
       "<li>" + '1/2 tsp sugar' + "</li>" + 
       "<li>" + '1/2 tsp salt' + "</li>" + 
       "<li>" + '3 tbsp ' + (item.itemFullUPC == "070796150062" ? item.itemName : "") + "</li>" + 
       "<li>" + '1 pkg active dry yeast' + "</li>" + 
       "<li>" + '3/4 cup warm water' + "</li>" + 
       "<li>" + '2 tbsp ' + (item.itemFullUPC == "070796150012" ? item.itemName : "") + "</li>" + 
       "<li>" + '2 cups shredded mozzarella cheese' + "</li>" + 
      "</ul>" 
      ); 
     }); 

    } }) }); 

Answer 1

您每次通過循環都覆蓋HTML，所以最終結果將僅來自數組中的最後一項。

相反，您應該使用if語句，並且只顯示與您需要的UPC代碼相匹配的項目。

然後，您應該使用.append()而不是.html()，因此您將<ul>添加到列表中，而不是覆蓋它。

 $.each(data, function(i, item) { 
     if (item.itemFullUPC == "070796150012") { 
      $('#recipeIngredients').append(
       "<ul>" + 
        "<li>" + '1/2 tsp sugar' + "</li>" + 
        "<li>" + '1/2 tsp salt' + "</li>" + 
        "<li>" + '1/2 tsp salt' + "</li>" + 
        "<li>" + '1 pkg active dry yeast' + "</li>" + 
        "<li>" + '3/4 cup warm water' + "</li>" + 
        "<li>" + '2 tbsp ' + item.itemName + "</li>" + 
        "<li>" + '2 cups shredded mozzarella cheese' + "</li>" + 
       "</ul>" 
      ); 
     } 
    });