.json에서 자바 스크립트 객체 onclick을 시각화하는 방법

-2

저는 javascript와 json을 사용하기 시작했습니다..json에서 자바 스크립트 객체 onclick을 시각화하는 방법

jquery 또는 다른 librery를 사용하지 않고 자바 스크립트 함수에서 이벤트를 처리 할 때 json 파일에서 데이터를 읽어야합니다 (정보 얻기 함수). 내가 코드에서 뭔가를 놓치고 있는지 또는 요청을 작성하고 콜백을 처리해야하는지 또는 json을 사용하기 위해 추가 자바 스크립트를 가져와야하는지 여부는 알 수 없습니다. 나는 그것을 어떻게 작동시키는 지 모르기 때문에. 내가 얻는 것은 모두 정의되지 않는다. 어떤 도움도 평가됩니다.

JSON 파일 :

이

"hotels": [ 
    { 
     "name": "Hotel Sunny Palms", 
     "imgUrl": "imgs/sunny.jpg", 
     "rating": 5, 
     "price": 108.00 
    }, 
    { 
     "name": "Hotel Snowy Mountains", 
     "imgUrl": "imgs/snowy.jpg", 
     "rating": 4, 
     "price": 120.00 
    }, 
    { 
     "name": "Hotel Windy Sails", 
     "imgUrl": "imgs/windy.jpg", 
     "rating": 3, 
     "price": 110.00 
    }, 
    { 
     "name": "Hotel Middle of Nowhere", 
     "imgUrl": "imgs/nowhere.jpg", 
     "rating": 4, 
     "price": 199.00 
    } 
]

내 자바 스크립트

function hot1(){ 
var text = '{"hotels": [{"name": "Hotel Sunny Palms","imgUrl": "http://www.pruebaswebludiana.xyz/imgs/sunny.jpg","rating": 5,"price": 108.00}]}'; 
var obj = JSON.parse(text); 
document.getElementById("img-container").innerHTML = 
obj.imagUrl+ "<br>"+ obj.name+ " " +obj.rating+ " " +obj.price;}

하고 내 HTML 코드는

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2" /> 
    <link rel='stylesheet' href='style.css' type='text/css' media='all' /> 

</head> 
<body> 
<nav></nav> 
<div class="container"> 
    <div> 
     <ul> 
      <li onclick="hot1()">Hotel Sunny Palms</li> 
      <li onclick="hot2()">Hotel Snowy Mountains</li> 
      <li onclick="hot3()">Hotel Windy Sails</li> 
     <li onclick="hot4()">Hotel Middle Of Nowhere</li> 
    </ul> 
</div> 
<div class="banner-section" id="img-container"> 
</div> 


</body> 
</html>

출처

2016-07-22 ali abbas bakkali

, 당신은 아마 그 중 하나, 예컨대 :

var jsonText = ...; 
var parsedObject = JSON.parse(jsonText); 
var hotels = parsedObject.hotels; 
var hotel = hotels[0]; // instead of 0, pass the index of the needed hotel 
document.getElementById("img-container").innerHTML = 
    hotel.imgUrl + "<br/>" + hotel.name + " " + hotel.rating + " " + hotel.price;

작업해야

출처

2016-07-22 10:49:04

{"hotels": [{"name": "Hotel Sunny Palms","imgUrl": "http://www.pruebaswebludiana.xyz/imgs/sunny.jpg","rating": 5,"price": 108.00}]}

외부 개체의 name (및 기타 속성)을 읽으려고하므로 undefined이 표시됩니다.

외부 개체에는 이러한 속성이 없습니다. 하나의 속성 : hotels이 있습니다.

속성의 값은 배열입니다.

해당 배열에는 개체가 포함되어 있습니다.

액세스하려는 속성이 인 것입니다. 개체입니다.

즉

귀하의 JSON 파일이 재산 hotels의 배열을 포함

obj.hotels[0].name // etc

출처

2016-07-22 10:47:45 Quentin

.json에서 자바 스크립트 객체 onclick을 시각화하는 방법

답변

관련 문제