2016-07-22 4 views
1

사용자가 선택하도록하고 그 선택에 따라 JSON 데이터를 조사하고 선택된 정보를 표시합니다. 궁극적으로 나는 자바 스크립트에서 html과 이벤트 리스너의 드롭 다운 선택을 만들고 싶다.사용자 선택/프롬프트를 기반으로 JSON 데이터를 검색합니다.

var userOcean = prompt("Will you be fishing in the gulf or atlantic ?"); 

var userFish = prompt("What fish do you want to look up?"); 

console.log(
    "\n\nfish: "+jsonObject.ocean_measure.userOcean.fish.userFish.name+ 
    "\n\nlength: "+jsonObject.ocean_measure.userOcean.fish.userFish.length+ 
    "\n\nclosed: "+jsonObject.ocean_measure.userOcean.fish.userFish.closed+ 
    "\n\nlimit: "+jsonObject.ocean_measure.userOcean.fish.userFish.limit+ 
    "\n\nremarks: "+jsonObject.ocean_measure.userOcean.fish.userFish.remarks 
    ); 

위의 JSON 데이터

var jsonObject = { 
"ocean_measure" : 
    { 
    "gulf": 
     { 
      "fish": { 
       "dolphin": { 
        "name": "Mahi-mahi", 
        "length": "none", 
        "limit": "10 per person or 60 per vessel whichever is less" 
       }, 
       "blackfin tuna": { 
        "name": "Blackfin Tuna", 
        "length": "not regulated", 
        "limit": "The default bag limit for all unregulated species is two fish or 100 pounds per day, whichever is more" 
       }, 
       "snook": { 
        "name": "Snook", 
        "length": "Not less than 28 inches total length (TL) or more than 33 inches TL", 
        "closed": "Dec. 1-end of February; May 1-Aug. 31", 
        "limit": "1 per harvester per day", 
        "remarks": "Snook permit required for harvest when saltwater license required. State regulations apply in federal waters. Illegal to buy or sell snook. Fish must remain in whole condition until landed ashore (heads, fins, and tails intact). Snatch hooks and spearing prohibited. Harvest prohibited by or with the use of any multiple hook in conjuction with live or dead bait." 
       } 
      } 
     } 
    , 
    "atlantic": 
     { 
      "fish": { 
       "dolphin": { 
        "name": "Mahi-mahi", 
        "length": "20 inches fork length", 
        "limit": "10 per person or 60 per vessel whichever is less" 
       }, 
       "blackfin tuna": { 
        "name": "Blackfin Tuna", 
        "length": "not Regulated", 
        "limit": "The default bag limit for all unregulated species is two fish or 100 pounds per day, whichever is more" 
       }, 
       "snook": { 
        "name": "Snook", 
        "length": "Not less than 28 inches total length (TL) or more than 32 inches TL", 
        "closed": "Dec. 15 to Jan. 31, June 1 to Aug. 31", 
        "limit": "1 per harvester per day", 
        "remarks": "Snook permit required for harvest when saltwater license required. State regulations apply in federal waters. Illegal to buy or sell snook. Fish must remain in whole condition until landed ashore (heads, fins, and tails intact). Snatch hooks and spearing prohibited. Harvest prohibited by or with the use of any multiple hook in conjuction with live or dead bait." 
       } 
      } 
     } 
    } 
} 

내가 UserInput 사용자를 가지고 JSON 파일에서 그것으로 데이터 검색을 제작하는 간단한 방법을 찾을 수 없었습니다 자바 스크립트이며, 다음과 같습니다.

답변

0

당신은 거의 바로 가지고 있지만, 개체에 액세스하는 동안 당신이 변수를 사용하려는 경우 당신은 이런 식으로 할 필요가 :

jsonObject.ocean_measure[userOcean].fish[userFish].name

고정 CONSOLE.LOG 기능 :

console.log(
    "\n\nfish: "+jsonObject.ocean_measure[userOcean].fish[userFish].name+ 
    "\n\nlength: "+jsonObject.ocean_measure[userOcean].fish[userFish].length+ 
    "\n\nclosed: "+jsonObject.ocean_measure[userOcean].fish[userFish].closed+ 
    "\n\nlimit: "+jsonObject.ocean_measure[userOcean].fish[userFish].limit+ 
    "\n\nremarks: "+jsonObject.ocean_measure[userOcean].fish[userFish].remarks 
); 

또한 JSFiddle

+0

나는이 작은 응용 프로그램에 내가 '할 경우 "2 파트"이 있습니다 변수로, 오브젝트에서 선택할 수있는 사용자의 선택에 대한 위해

는 괄호 안에 변수를 넣어 저와 함께 일하면서, 당신이 원한다면 그 질문에 대한 링크입니다. http://stackoverflow.com/questions/38545522/html-select-value-passed-into-javascript-var-then-used-to-fetch-json – Carl

0

변수의 내용을 사용하여 개체 속성에 액세스하려면 다음을 사용해야합니다. bracket notation 전화 :

ocean_measure.gulf == ocean_measure["gulf"] 

이 자바 스크립트에서 객체는 속성 또는 메서드의 이름 열쇠되고, 자신의 속성과 메소드 키를 사용하여 액세스 할 수 있다는 점에서 사전처럼 행동한다는 사실에서 비롯됩니다.

userOcean = "gulf" 
ocean_measure[userOcean] == ocean_measure["gulf"] 
관련 문제