Javascript 从多维JSON数组中获取正确的值

我目前正在构建一个膳食构建器，它将在客户端工作以获得更好的用户体验，并且遇到了一个小问题。最初的版本是这样的，所以每种配料类型只有一份份量，但是在审查之后，我的客户添加了一个“切换”，允许用户在小份量/大份量之间切换

JSON文件由MySQL语句生成，并通过PHP创建，然后我在JS中获取该文件并将数据传递给我的UI控制器。 我有一系列的成分类型（碳水化合物、蛋白质、蔬菜、酱汁），我循环这些类型以获得该类型的相关成分，然后通过.split显示所有标题，然后只需要获得基于小/大或0/1的相关成分服务数据

carb和protein的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回复**

提前感谢,，

---

Nathan

我应该补充一点，蛋白质是唯一一种有价格的配料类型，因为它决定了膳食的成本，而且到目前为止，客户还没有输入宏值。这是一种笨拙的结构，尤其是服务大小数组。但是为了解决您的一些问题，假设

data[builderID]

返回

carbs

数组，如果您只是试图获取配料的名称，则应使用引用字符串的

label.component

（您的

label.component[1]

调用将给出字符串的第二个字符）。如果您需要

id

您必须在

label['0']

返回的数组中找到它（

label['0'][1].id

对于'small'之后的对象）谢谢，我可以在我的'^'字符上使用split方法很好地获得配料的名称，但我只是因为能够获得配料的重量而有点为难（在第二个数组中）。您说的是“第二个数组”，但我只看到一个，它是

[“small”，smallData，“large”，largeData]

，即一个包含4个元素的数组。如前所述，这是一个笨拙的结构。只有在被迫的情况下，您才应该以这种方式存储内容。您可以更改结构吗？对于刚刚发布的已编辑JSON，您将使用

标签['0']。小。重量

{
   "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
            }
         }
      }
   ],
}