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

【问题标题】：how to visualize a javascript object onclick from a .json如何从 .json 可视化 javascript 对象 onclick
【发布时间】：2016-07-22 10:42:52
【问题描述】：

我刚刚开始使用 javascript 和 json。

在不使用 jquery 或任何其他库的情况下处理 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>

【问题讨论】：

标签： javascript arrays json ajax object

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

您得到undefined，因为您正试图读取外部对象的name（和其他属性）。

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

属性的值是一个数组。

该数组包含一个对象。

您尝试访问的属性存在于那个对象上。

即

obj.hotels[0].name // etc

【讨论】：