如何从.json可视化javascript对象onclick_Javascript_Arrays_Json_Ajax_Object

如何从.json可视化javascript对象onclick

javascript arrays json ajax object

如何从.json可视化javascript对象onclick,javascript,arrays,json,ajax,object,Javascript,Arrays,Json,Ajax,Object,我刚刚开始使用javascript和json 在javascript函数中处理事件时，我需要从json文件读取数据（获取信息函数），而不使用jquery或任何其他库。我不知道我是否在代码中遗漏了什么，或者我是否必须创建一个请求并处理回调，或者我是否需要导入额外的javascript来使用json。因为我不知道该怎么做。我得到的只是未定义的。谢谢你的帮助 json文件： "hotels": [ { "name": "Hotel Sunny Palms", "

我刚刚开始使用javascript和json

在javascript函数中处理事件时，我需要从json文件读取数据（获取信息函数），而不使用jquery或任何其他库。我不知道我是否在代码中遗漏了什么，或者我是否必须创建一个请求并处理回调，或者我是否需要导入额外的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;}

函数hot1（）{
var text='{“hotels”：[{“name”：“Hotel Sunny Palms”，“imgUrl”：”http://www.pruebaswebludiana.xyz/imgs/sunny.jpg“，“评级”：5，“价格”：108.00}]}”；
var obj=JSON.parse（文本）；
document.getElementById（“img容器”）.innerHTML=
obj.imagUrl+“
”+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>



阳光棕榈酒店
雪山酒店
风帆酒店
位于偏僻地区的酒店

由于您试图读取外部对象的

名称

（和其他属性），因此会得到

未定义的

外部对象没有这些属性。它有一个属性：

hotels

属性的值是一个数组

该数组包含一个对象

您试图访问的属性存在于该对象上

i、 e

您的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;

var jsonText=。。。；
var parsedObject=JSON.parse（jsonText）；
var hotels=parsedObject.hotels；
var hotel=酒店[0]；//传递所需酒店的索引，而不是0
document.getElementById（“img容器”）.innerHTML=
hotel.imgUrl+“
”+hotel.name+“+hotel.rating+”+hotel.price；

obj.hotels[0].name // etc

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;