Question

我正在尝试使用javaScript从我的JSON文件加载数据，我需要以星形的形式表示hotel2show.rating，只需要代表它们依赖于＆＃39; hotels.json＆＃39;

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

＆＃13;

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);
}

＆＃13;

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

＆＃13;

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

＆＃13;

另外，jsfiddle：https://jsfiddle.net/md4708oq/

Answer 2

我假设您知道如何解析您的评分，对吧？如果您只是显示单个星值（整数），那么您可以在span元素上写出一个类，您可以使用CSS对其进行样式设置以更改背景图像。

所以，你可以让它显示1-5颗星，有4个不同的图像。

这是一个解决方案;不是最干净或最具可扩展性的，但它适用于这种情况。

首先，这是一场噩梦。

让我们清理一下吧？

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(' ');

注意：switch语句语法可能不正确。

Answer 3

您必须使用AJAX调用来检索JSON数据，然后使用纯javascript来解析JSON数据并使用它来相应地显示您的html。让我知道，如果这是你正在寻找的，我会帮助你。

在没有jquery的情况下代表星级中的json文件表示数据!!纯javaScript

3 个答案: