I am currently working with a JSON database to showcase ingredients on the webpage. For each recipe, I have a dedicated HTML page. To display the ingredients, I am hand typing them into an unordered list on the page.
My challenge lies in trying to fetch the recipe name from the database as I am facing issues displaying it. I aim to retrieve the correct item if it matches the item UPC in the database. Please refer below for more details.
$(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>"
);
});
} }) });