2017-04-18 7 views
0

私は食品の栄養価の配列を持っています。私は基本的に、1つの食事の栄養と別の食事の栄養の違いを出力する必要があります。だから私は、食事のために異なる料理のオプション(メインディッシュ、サイドディッシュ、ドリンクなど)を選択させ、それを別の食事と比較させる必要があります。複数選択可能なオプションメニューに基づいて配列からデータを出力しますか?

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のようなWebサイトでAPIを実装する際に問題があります。私は本当にこれに関するいくつかのヘルプ/ガイダンスを感謝します。とても有難い!

<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 
    })); 
    }); 
}); 

+0

あなたは、各食品アイテムを繰り返し、栄養価を合計することができます。https://jsfiddle.net/tr_santi/8ffLufsf/1/ - これを使用して、類似のロジックを使用して、1つの食事の栄養の合計を別の食事の栄養素の合計。 – Santi

+0

これを選択可能なオプションメニューに実装するにはどうすればよいですか? –

+0

これは広すぎます。私たちはFastSelectとのインターフェイスのコードを書くつもりはありません。マニュアルを読んで、自分でコードを書いてください。特定の問題にぶつかると、それに関する質問が投稿されます。 [最小限で完全で検証可能な例](http://stackoverflow.com/help/mcve)を提供してください。 – trincot

答えて

0

あなたは2つの選択このようなリストを定義したと仮定すると、イベントをボタンクリックなどのようにして、各オブジェクトの値を直接比較して、必要な操作を行うことができます。

関連する問題