我目前正在建立一个膳食生成器，它将在客户端工作以提供更好的用户体验，并取得了很小的进步。最初的版本具有这种功能，因此每种配料类型只能提供一种份量，但是在查看后，我的客户添加了一个“切换”，允许用户在小/大份量之间进行切换。
JSON文件由MySQL语句构建，并通过PHP创建，然后我在JS中获取此文件并将数据传递给我的UI控制器。 我有一系列的成分类型（碳水化合物，蛋白质，蔬菜，调味料），我遍历这些成分以获得该类型的相关成分，然后通过.split显示所有标题，然后只需要获取相关成分根据大/小或0/1投放数据。
碳水化合物和蛋白质的JSON示例。
// Function to show the meals in the UI
let showMeals = function(data, serving) {
let types;
types = DOMstrings.builderIDs;
for(let i = 0; i < types.length; i++) {
let builderID, builderEl, ingID, ingTitle;
builderID = types[i];
let ingredients =
data[builderID].map
( label =>
`
<label for="${builderID}-${label.ingredient[serving].id}">
<input type="radio" name="${builderID}[]" id="${builderID}-${label.ingredient[serving].id}" value="${label.ingredient[serving].id}" class="hidden">
<small>${label.ingredient.split('^')[1]}</small>
<i class="icon fas fa-info-circle bg green" data-tooltip></i>
</label>
`
).join('')
;
document.getElementById(builderID).insertAdjacentHTML('beforeend', ingredients);
}
}
我传递JSON数据和份量（默认值很小，因为只有蛋白质/碳水化合物才允许更大的比例）。最初，我想传递示例$ {label.ingredient [serving] .id}中显示的内容，然后尝试$ {label.ingredient [1] .id}，但无济于事，所以我知道我缺少了一些东西，但想不到。下面的JSON文件示例（为便于阅读已对其进行了美化）。
{
"carb":[
{
"ingredient":"10^New Potatoes",
"0":{
"small":{
"id":19,
"weight":170,
"price":"0.00",
"cal":null,
"carb":null,
"protein":null,
"fat":null
},
"large":{
"id":20,
"weight":340,
"price":"0.00",
"cal":null,
"carb":null,
"protein":null,
"fat":null
}
}
},
{
"ingredient":"8^Spicy Rice",
"0":{
"small":{
"id":15,
"weight":100,
"price":"0.00",
"cal":null,
"carb":null,
"protein":null,
"fat":null
},
"large":{
"id":16,
"weight":200,
"price":"0.00",
"cal":null,
"carb":null,
"protein":null,
"fat":null
}
}
},
{
"ingredient":"9^Sweet Potato Mash",
"0":{
"small":{
"id":17,
"weight":170,
"price":"0.00",
"cal":null,
"carb":null,
"protein":null,
"fat":null
},
"large":{
"id":18,
"weight":340,
"price":"0.00",
"cal":null,
"carb":null,
"protein":null,
"fat":null
}
}
},
{
"ingredient":"11^Tomato and Roasted Pepper Pasta",
"0":{
"small":{
"id":21,
"weight":110,
"price":"0.00",
"cal":null,
"carb":null,
"protein":null,
"fat":null
},
"large":{
"id":22,
"weight":220,
"price":"0.00",
"cal":null,
"carb":null,
"protein":null,
"fat":null
}
}
},
{
"ingredient":"7^White Rice",
"0":{
"small":{
"id":13,
"weight":100,
"price":"0.00",
"cal":null,
"carb":null,
"protein":null,
"fat":null
},
"large":{
"id":14,
"weight":200,
"price":"0.00",
"cal":null,
"carb":null,
"protein":null,
"fat":null
}
}
}
],
"protein":[
{
"ingredient":"1^Chicken Breast - Plain",
"0":{
"small":{
"id":1,
"weight":150,
"price":"5.50",
"cal":null,
"carb":null,
"protein":null,
"fat":null
}
}
},
{
"ingredient":"22^Chicken Breast - Cajun",
"0":{
"small":{
"id":42,
"weight":150,
"price":"5.50",
"cal":null,
"carb":null,
"protein":null,
"fat":null
}
}
},
{
"ingredient":"26^Chicken Breast - Tandoori",
"0":{
"small":{
"id":46,
"weight":150,
"price":"5.50",
"cal":null,
"carb":null,
"protein":null,
"fat":null
}
}
},
{
"ingredient":"24^Chicken Breast - Thai",
"0":{
"small":{
"id":44,
"weight":150,
"price":"5.50",
"cal":null,
"carb":null,
"protein":null,
"fat":null
}
}
},
{
"ingredient":"4^Lean Beef Brisket",
"0":{
"small":{
"id":7,
"weight":150,
"price":"5.50",
"cal":null,
"carb":null,
"protein":null,
"fat":null
}
}
},
{
"ingredient":"3^Lean Beef Meat Balls",
"0":{
"small":{
"id":5,
"weight":150,
"price":"5.50",
"cal":null,
"carb":null,
"protein":null,
"fat":null
}
}
},
{
"ingredient":"5^Salmon",
"0":{
"small":{
"id":9,
"weight":150,
"price":"6.25",
"cal":null,
"carb":null,
"protein":null,
"fat":null
}
}
},
{
"ingredient":"6^Sirloin Steak",
"0":{
"small":{
"id":11,
"weight":150,
"price":"6.25",
"cal":null,
"carb":null,
"protein":null,
"fat":null
}
}
},
{
"ingredient":"2^White Fish - Plain",
"0":{
"small":{
"id":3,
"weight":150,
"price":"5.50",
"cal":null,
"carb":null,
"protein":null,
"fat":null
}
}
},
{
"ingredient":"23^White Fish - Cajun",
"0":{
"small":{
"id":43,
"weight":150,
"price":"5.50",
"cal":null,
"carb":null,
"protein":null,
"fat":null
}
}
},
{
"ingredient":"27^White Fish - Tandoori",
"0":{
"small":{
"id":47,
"weight":150,
"price":"5.50",
"cal":null,
"carb":null,
"protein":null,
"fat":null
}
}
},
{
"ingredient":"25^White Fish - Thai",
"0":{
"small":{
"id":45,
"weight":150,
"price":"5.50",
"cal":null,
"carb":null,
"protein":null,
"fat":null
}
}
}
],
}
**更新后的JSON答复**
预先感谢， 内森