私が想定していたのは、データを取り除き、HTML 内で使用する変数として保存したい、比較的単純な外部のローカル JSON ファイルでした。
数値だけでなく文字列、リストを作成しようとしている文字列、およびさまざまな CSS 値として使用したい数値があります。
オブジェクトのインデックス間には関係があります。これは、JSON を読むときに明確になることを願っています。
この質問に特に関連しているわけではありませんが、背景のために、ユーザーがナビゲートして「フィルタリング」する、すべて同じ形式の複数の JSON ファイルがあります。
ページとデータは JQuery、特に JQuery Mobile で読み込まれます。
したがって、JSON の例は次のようになります…</p>
{"glass" :[
{"name" : "Gin and tonic",
"ingredients" : {
"liquids" : ["Gin", "Tonic"],
"amounts" : [60, 40],
"colours" : ["f5f5f5", "666666"]
}
},
{"name" : "Tom Collins",
"ingredients" : {
"liquids" : ["Gin", "Soda"],
"amounts" : [60, 80],
"colours" : ["f5f5f5", "373737"]
}
}
]}
皆さんのおかげで、飲み物の名前を特定のオブジェクトに一致させる方法がわかりました…</p>
function viewRecipe (recipeNamePassed) {
recipe = (recipeNamePassed);
//Get the JSON list and search through it for a match to the recipe name
$.getJSON(url, function(data) {
cache:false;
for (var i=0;i<data.glass.length;i++){
if (data.glass[i].name == recipe){
// do stuff
…しかし、まだ残っているオブジェクトのリストを作成できないようです。
つまり、「液体」のリストと「量」のリストです。
このようなことが起こっていますが、必要な結果が得られません
var output="<ul>";
for (var i in ingredients.liquids) {
output+="<li>" + ingredients.liquids[i] + "</li>";
}
output+="</ul>";
document.getElementById("ingredientsList").innerHTML=output;
私が望むのは、すべての成分が「ingredientsList」に書き出され、「量」と「色」が CSS の変更に使用できる変数として保存されることです。
おそらくおわかりのように、私はこのすべてに非常に慣れていないため、ご理解のほどよろしくお願いいたします。
前もってありがとう、マット