Ali Oli Ali Oli - 4 months ago 32
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) {
hotel=JSON.parse(xhr.responseText);
var hotel2show = hotel.hotels[i];
document.getElementById("img-container").innerHTML =
"<img src='"+hotel2show.imgUrl+"'>"+
"<p id='name'><strong>"+ hotel2show.name +"</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");

}
}
};
xhr.open("GET",'hotels.json', true);
xhr.send();


and here is my html

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


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

Answer

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>"+ hotel2show.name +"</strong></p><br/>";
switch(hotel2show.rating):
case(1):
appendString[2] = "<p id='rating' class='rating-1'><strong>";
break;
case(2):
appendStirng[2] = "<p id='rating' class='rating-2><strong>";
break;
//etc 

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.