Question

我有一系列食物的营养价值。我基本上只需要输出一餐与另一餐的营养差异。因此，我需要能够让用户选择不同的食物选择（主菜，配菜，饮料等）作为一餐，然后将其与另一餐进行比较。

var stocks =
  {
 "Beef (80/20) raw": {
  "UNIT": "oz",
  "vitaminA": 115.4451262,
  "vitaminB12": 2.094125,
  "vitaminD": 1.199617347,
  "calories": 72,
  "protein": 4.85,
  "fat": 5.65,
  "sugar": 0,
  "saturatedfat": 2.142,
  "sodium": 19,
  "cholesterol": 20,
  "calcium": 0.0001275510204,
  "iron": 0.375,
  "fiber": 0.75,
  "zinc": 22.15988372,
  "cost": 0.3768292943,
  "serving": 4
  },
 "Beef (90/10) raw": {
  "UNIT": "oz",
  "vitaminA": 115.4451262,
  "vitaminB12": 2.094125,
  "vitaminD": 1.199617347,
  "calories": 50,
  "protein": 5.65,
  "fat": 2.83,
  "sugar": 0,
  "saturatedfat": 1.109,
  "sodium": 19,
  "cholesterol": 18,
  "calcium": 0.0001275510204,
  "iron": 0.375,
  "fiber": 0.75,
  "zinc": 22.15988372,
  "cost": 0.3768292943,
  "serving": 4
  },
 "Chicken breast": {
  "UNIT": "oz",
  "vitaminA": 32.39053977,
  "vitaminB12": 0.320375,
  "vitaminD": 0.07197704082,
  "calories": 34,
  "protein": 6.38,
  "fat": 0.74,
  "sugar": 0,
  "saturatedfat": 0.16,
  "sodium": 13,
  "cholesterol": 21,
  "calcium": 0.01631172356,
  "iron": 0.10625,
  "fiber": 0.2125,
  "zinc": 3.149953226,
  "cost": 0.3765300698,
  "serving": 4
  },
  "Chicken thighs/legs": {
  "UNIT": "oz",
  "vitaminA": 32.39053977,
  "vitaminB12": 0.320375,
  "vitaminD": 0.07197704082,
  "calories": 125,
  "protein": 2.72,
  "fat": 12.54,
  "sugar": 0,
  "saturatedfat": 3.431,
  "sodium": 14,
  "cholesterol": 30,
  "calcium": 0.01631172356,
  "iron": 0.10625,
  "fiber": 0.2125,
  "zinc": 3.149953226,
  "cost": 0.3765799405,
  "serving": 4
  },
  "Milk (whole)": {
  "UNIT": "fl oz",
  "vitaminA": 7.638924987,
  "vitaminB12": 0.146025,
  "vitaminD": 0.0002099330357,
  "calories": 19,
  "protein": 0.96,
  "fat": 0.99,
  "sugar": 1.54,
  "saturatedfat": 0.569,
  "sodium": 13,
  "cholesterol": 3,
  "calcium": 3.571428571e-7,
  "iron": 0.099609375,
  "fiber": 0.19921875,
  "zinc": 1.228661955,
  "cost": 0.2415694159,
  "serving": 8
  },

  "Rice (white)": {
  "UNIT": "oz",
  "vitaminA": 25.46308329,
  "vitaminB12": 0.34375,
  "vitaminD": 0,
  "calories": 102,
  "protein": 1.87,
  "fat": 0.16,
  "sugar": 0,
  "saturatedfat": 0.045,
  "sodium": 0,
  "cholesterol": 0,
  "calcium": 0,
  "iron": 0,
  "fiber": 0,
  "zinc": 0.3995205753,
  "cost": 0,
  "serving": 2
  },
  "Potatoes": {
  "UNIT": "oz",
  "vitaminA": 1.872285536,
  "vitaminB12": 0.03575,
  "vitaminD": 0,
  "calories": 16,
  "protein": 0.73,
  "fat": 0.03,
  "sugar": 0.2,
  "saturatedfat": 0.007,
  "sodium": 3,
  "cholesterol": 0,
  "calcium": 0,
  "iron": 0,
  "fiber": 0,
  "zinc": 0.06927480776,
  "cost": 0.01708057695,
  "serving": 5.3
  },
  "Vegetable Oil": {
  "UNIT": "oz",
  "vitaminA": 17.70433203,
  "vitaminB12": 0.125,
  "vitaminD": 0,
  "calories": 205,
  "protein": 0,
  "fat": 23.8,
  "sugar": 0,
  "saturatedfat": 19.937,
  "sodium": 0,
  "cholesterol": 0,
  "calcium": 0,
  "iron": 0,
  "fiber": 0,
  "zinc": 5.300817694,
  "cost": 0,
  "serving": 0.5
  },
  "Soda": {
  "UNIT": "fl oz",
  "vitaminA": 10.64647779,
  "vitaminB12": 0.02494335117,
  "vitaminD": 0,
  "calories": 13,
  "protein": 0,
  "fat": 0.08,
  "sugar": 3.05,
  "saturatedfat": 0,
  "sodium": 1,
  "cholesterol": 0,
  "calcium": 0,
  "iron": 0,
  "fiber": 0,
  "zinc": 0.1939638153,
  "cost": 0.2582470824,
  "serving": 12
  }
}

这是我的JSON数据。理想情况下，我想使用FastSelect（http://dbrekalo.github.io/fastselect/）之类的东西，但我在CodePen等网站上实现API时遇到了麻烦。我真的很感激这方面的一些帮助/指导。非常感谢！

Answer 1

假设你定义了两个这样的选择列表：

<select id="list1" class="stockList">
</select>

<select id="list2" class="stockList">
</select>

您可以使用以下对象键填充它们：

$(".stockList").each(function(){
  var stockList = this;
  $.each(stocks, function(objKey, objVal){
    $(stockList).append($("<option/>", {
      text: objKey,
      value: objKey
    }));
  });
});

从那里你只需要有一个函数挂钩到事件，如按钮点击或什么，然后你可以直接比较每个对象的值，并做任何你想要的。

基于多个可选选项菜单从阵列输出数据？

1 个答案: