需要拉动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>" 
      ); 
     } 
    });