JSON 객체 배열 및 문자열에서 목록 만들기

Question

내가 생각한 것처럼 상대적으로 단순하지만 외부에서 데이터를 제거하고 HTML 내에서 사용할 변수로 저장하려는 로컬 JSON 파일이었습니다.

문자열뿐만 아니라 숫자, 목록을 만들려는 문자열, 다양한 CSS 값으로 사용하고자하는 숫자가 있습니다.

개체의 인덱스 사이에 관계가 있습니다. JSON을 읽을 때 분명히 알 수 있습니다.

특히이 질문과 관련이 없지만 배경을 위해 사용자가 탐색하여 여러 개의 JSON 파일 (모두 동일한 형식)이 탐색됩니다.

페이지와 데이터가 JQuery, 특히 JQuery Mobile과 함께로드됩니다. JSON은 다음과 같다

그래서 예 ... 지금은 특정 객체에 음료의 이름과 일치하는 방법을 알고 너희들에게

그래서

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

덕분에 ...

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 

...하지만 아직도 내가 나머지 개체의 목록을 만들 수있는 것 같지 않습니다.

즉, 'liquids'와 'amount'의 목록입니다.

나는 물건은 다음과 같이 진행되었다했지만 그것은 내게 내가 원하는 것은 모든 재료는 "ingredientsList"에 기록 될

var output="<ul>"; 
for (var i in ingredients.liquids) { 
    output+="<li>" + ingredients.liquids[i] + "</li>"; 
} 
output+="</ul>"; 

document.getElementById("ingredientsList").innerHTML=output; 

원하는 결과를 포기하지 않을 것, 그리고 'amount'와 'colors'는 CSS를 변경하는 데 사용할 수있는 변수로 저장됩니다.

당신이 아마 말할 수 있듯이, 나는이 모든 것을 매우 신중하게 생각합니다. 그래서 나는 당신의 인내심에 진심으로 감사합니다. 사전에

감사합니다, 매트

Answer 1

당신은 아마 itens에 전체 경로가 누락되었습니다.

트릭을해야합니다.

var output="<ul>"; 
for (var i in data.glass[i].ingredients.liquids) { 
    output+="<li>" + data.glass[i].ingredients.liquids[i] + "</li>"; 
} 
output+="</ul>"; 

document.getElementById("ingredientsList").innerHTML=output; 

또는 쉽게

for (var i=0;i<data.glass.length;i++){ 
    var glass = data.glass[i] 
    if (glass.name == recipe){ 

    var output="<ul>"; 
    for (var i in glass.ingredients.liquids) { 
     output+="<li>" + glass.ingredients.liquids[i] + "</li>"; 
    } 
    output+="</ul>"; 

    document.getElementById("ingredientsList").innerHTML=output; 
    } 
} 

처럼 만들기 위해 변수에 데이터를 복사 할 수는 당신에게 도움이되기를 바랍니다.

Answer 2

난 당신이 코드의 스냅 샷을 게시 알고,하지만 ... 그것을 처리하기 전에 먼저 액세스

var ingredients = data.glass[i].ingredients; 
var output="<ul>"; 
for (var i in ingredients.liquids) 
....