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

how to visualize a javascript object onclick from a .json

本文关键字：javascript 对象 onclick 可视化 json      更新时间：2023-09-26

我刚刚开始使用javascript和json。

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

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

{"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
相关文章：