javascript - 需要拉取 JSON 项目的帮助

Question

我正在使用 JSON DB 并在页面上显示成分。我为每个菜谱都有一个单独的 HTML 页面。我正在页面上创建一个无序列表，并手动输入页面上食谱的食谱成分。

我试图从数据库中提取食谱名称，但无法显示它。如果正确的项目与数据库中的 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>"
            );
        }
     });