ali abbas bakkali ali abbas bakkali - 1 year ago 46
JSON Question

how to visualize a javascript object onclick from a .json

I'm just starting to use javascript and json.

I need to read data (get Information function) from a json file when processing an event in a javascript function without using jquery or any other librery. I don't know if I am missing something in the code, or if I have to create an Request and handle the callback, or if I need to import additional javascript to use json. Because I don't know how to make it work. all i get is undefined. Any help is aprreciated.

The json file:

"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

my javascript is

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

and my html code is

<!DOCTYPE html>
<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' />

<div class="container">
<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>
<div class="banner-section" id="img-container">


Answer Source

Your JSON file contains an array in the property hotels, you probably need to work with one of those, e.g.:

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