拉JSON项

Question

我正在使用JSON DB并在页面上显示成分。我为每个食谱都有一个单独的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>"
            );
        }
     });