我正在使用 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>"
);
});
} }) });
最佳答案
每次循环都会覆盖 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>"
);
}
});
关于javascript - 需要拉取 JSON 项目的帮助,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41349171/