如何從以.json

-2

的onclick可視化的JavaScript對象，我剛開始使用JavaScript和JSON。如何從以.json

我需要不使用jQuery或任何其他librery處理在JavaScript功能的事件時，從JSON文件中讀取數據（獲取信息功能）。我不知道是否在代碼中丟失了某些內容，或者是否需要創建請求並處理回調，或者是否需要導入其他JavaScript以使用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 
    } 
]

我的JavaScript

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

你的JSON文件包含在物業hotels一個數組，你可能需要使用其中的一個，例如：

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。

的屬性的值是一個數組。

該數組包含一個對象。

您試圖訪問屬性上是對象存在。

即

obj.hotels[0].name // etc

來源

2016-07-22 10:47:45 Quentin

回答

相關問題