javascript - 在没有 jquery 的评级星中表示来自 json 文件的数据!!纯JavaScript

Question

我正在尝试使用 javaScript 从我的 JSON 文件加载数据，我需要以星星的形式表示 hotel2show.rating，只需根据“hotels.json”的值来表示它们

这是我的 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();

这是我的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>

和我的 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
    }
]

感谢任何帮助

Answer 1

例如..如果您有 UTF-8 字符集，那么这应该没问题。关键是createElement您可以根据需要构建 DOM 的函数。

var 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
}];

buildRating(hotels);

function buildRating(data) {
  data.forEach(function(v) {
    createRatingElement(v.rating);
  });
}

function createRatingElement(numberOfStars) {
  var wrapper = document.createElement('div');
  for (var i = 1; i <= 5; i++) {
    var span = document.createElement('span')
    span.innerHTML = (i <= numberOfStars ? '★' : '☆');
    span.className = (i <= numberOfStars ? 'high' : '');
    wrapper.appendChild(span);
  }
  document.getElementById('img-container').appendChild(wrapper);
}

span {
  display: inline-block;
  position: relative;
  width: 1.2em;
  height: 1.2em;
  color: black;
}
.high {
  color: rgb(217, 211, 0);
}

<div class="banner-section" id="img-container">

</div>

此外，jsfiddle:https://jsfiddle.net/md4708oq/