Ali Oli Ali Oli - 3 months ago 10x
Javascript Question

Represent data from json file in rating stars without jquery!! pure javaScript

I am trying to load the data from my JSON file using javaScript and i need to represent the hotel2show.rating in form of stars, just represent them dependig on the value from 'hotels.json'

Here is my JavaScript

function getHotels(i){

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function()
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
var hotel2show =[i];
document.getElementById("img-container").innerHTML =
"<img src='"+hotel2show.imgUrl+"'>"+
"<p id='name'><strong>"+ +"</strong></p>" +"<br/>" + "<p id='rating'><strong>"+ hotel2show.rating +"</strong></p>" +"<br/>" + "<br/>" +"<p id='price'><strong>"+ '&pound;' +hotel2show.price +
"</strong></p>" + "<p id='text'><strong>"+ 'Total hotel stay' +"</strong></p>";

} else {
alert("Ha existido un error con el servidor");

};"GET",'hotels.json', true);

and here is my html

<div class="container">
<div id="lista">
<button onclick="getHotels(0)">Hotel Sunny Palms</button>
<button onclick="getHotels(1)">Hotel Snowy Mountains</button>
<button onclick="getHotels(2)">Hotel Windy Sails</button>
<button onclick="getHotels(3)">Hotel Middle Of Nowhere</button>
<div class="banner-section" id="img-container">

and my hotels.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

any help is appreciated


I assume you know how to parse out your ratings right? If you are just displaying single star values (whole numbers), then you can just write out a class onto a span element where you would style it with css to change what the background image would be.

So you could make it show 1-5 stars with 4 different images.

Its a solution, not the cleanest or most scalable, but it works for this situation.

so first off this is a fucking nightmare.

lets clean it up a bit?

var appendString = [];
appendString[0] =  "<img src='"+hotel2show.imgUrl+"'>";
appendString[1] = "<p id='name'><strong>"+ +"</strong></p><br/>";
appendString[2] = "<p id='rating' class='rating-1'><strong>";
appendStirng[2] = "<p id='rating' class='rating-2><strong>";

appendString[3] = hotel2show.rating +"</strong></p>";
appendString[4] = "<br/><br/>";
appendString[5] = "<p id='price'><strong>'&pound;'" + hotel2show.price + "</strong></p>";
appendString[6] = "<p id='text'><strong>"+ 'Total hotel stay' +"</strong></p>";
document.getElementById("img-container").innerHTML = appendString.join(' ');

note, switch statement syntax may be incorrect.