As I delve into the world of javascript and json, I find myself facing a challenge.
I am looking to extract information (using the Get Information function) from a json file within a javascript function triggered by an event. The catch is, I want to accomplish this without relying on jquery or any other library. However, I seem to be hitting a roadblock in my code implementation. Do I need to set up a Request and handle the callback? Or perhaps import additional javascript to properly utilize json data? At this point, all I'm getting is undefined. Any assistance would be greatly appreciated.
The content of 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
}
]
Here is a snippet of my 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;}
In addition, here is my HTML code snippet:
<!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>