按疾病类型筛选JSON餐食数据技巧

本文揭秘了一种高效处理键值对结构JSON餐食数据的实用技巧——当面对以ID为键、餐食信息为值的对象（而非数组）时，如何按用户所选疾病类型（如糖尿病、高血压）精准筛选适配餐食；核心方案是利用`Object.values()`将对象“扁平化”为数组，再结合`filter()`与`includes()`实现简洁可靠的过滤逻辑，并贴心提示了保留原始ID、防御性编程及多餐类统一封装等进阶实践，让健康饮食应用的数据处理既稳健又可扩展。

本文介绍如何对键值结构的 JSON 对象（而非数组）按 `disease` 字段高效过滤，核心是使用 `Object.values()` 转为数组后结合 `filter()` 实现精准匹配。

在实际营养推荐系统或健康饮食应用中，常会将餐食数据以对象形式组织（如 "1": { ... }, "2": { ... }），其中键为唯一 ID，值为餐食详情。这种结构虽便于随机访问，但不支持原生数组方法（如 filter、map）。当需要根据用户所选疾病（如 ["Diabetes", "Hypertension"]）动态筛选适配餐食时，必须先将其“扁平化”为可遍历的数组。

解决方案：Object.values() + filter() 组合

Object.values(obj) 可将对象的所有属性值提取为一个数组，从而无缝对接数组方法。以下是完整、可复用的过滤逻辑：

// 假设已加载 breakfastFood.json 数据
const breakfastData = {
  "1": { "name": "Scrambled eggs with asparagus and tomatoes", "stars": 4, "price": "", "disease": "Diabetes", "image_uri": "...", "meal_time": "breakfast" },
  "2": { "name": "Greek yoghurt with mixed berries and chopped almonds", "stars": 3, "price": 0, "disease": "Diabetes", "image_uri": "...", "meal_time": "breakfast" },
  "3": { "name": "Oatmeal pancakes with blueberries", "stars": 4, "price": 0, "disease": "Hypertension", "image_uri": "...", "meal_time": "breakfast" },
  "4": { "name": "Greek yoghurt with mixed nuts, berries, and honey", "stars": 4, "price": 0, "disease": "Diabetes", "image_uri": "...", "meal_time": "breakfast" }
};

// 用户选择的疾病列表（支持多病种）
const selectedDiseases = ["Diabetes", "Hypertension"];

// ✅ 正确过滤：转为数组后检查 disease 是否在选中列表中
const filteredBreakfast = Object.values(breakfastData).filter(meal =>
  selectedDiseases.includes(meal.disease)
);

console.log(filteredBreakfast);
// 输出：包含 disease 为 "Diabetes" 或 "Hypertension" 的所有餐食对象（无原始 key）

⚠️ 注意事项：

• Object.values() 丢弃原始键名（如 "1"、"2"），若后续需保留 ID 关联（例如点击跳转、统计分析），应改用 Object.entries() 并解构 [key, value]；
• 确保 meal.disease 字段存在且为字符串类型，建议增加防御性判断：meal?.disease && selectedDiseases.includes(meal.disease)；
• 若需对早餐、午餐、晚餐三类 JSON 文件统一处理，可封装为通用函数：

const filterByDisease = (foodData, diseases) => 
  Object.values(foodData).filter(meal => 
    meal?.disease && diseases.includes(meal.disease)
  );

// 应用于多餐类
const filteredFoodChoices = {
  breakfast: filterByDisease(breakfastData, selectedDiseases),
  lunch: filterByDisease(lunchData, selectedDiseases),
  dinner: filterByDisease(dinnerData, selectedDiseases)
};

该方法简洁、高效、符合现代 JavaScript 最佳实践，适用于前端数据预处理、React/Vue 列表渲染前过滤等典型场景。

理论要掌握，实操不能落！以上关于《按疾病类型筛选JSON餐食数据技巧》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！