jsonを使わずにjsonファイルのデータを表示する純粋なJavaScript

Question

JSONファイルからjavaScriptを使用してデータをロードしようとしています。星の形でhotel2show.ratingを表す必要があります。

ここにあります私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

あなたの評価を解析する方法は分かりますか？単一の星の値（整数）を表示しているだけの場合は、スパン要素にクラスを書き出すだけで、CSSでスタイルを設定して背景イメージを変更できます。

だから、1つの星に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 2

たとえば、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/

Answer 3

あなたはAJAXを使用する必要がありますは、JSONデータを取得し、JSONデータを解析して表示するためにそれを使用して、純粋なJavaScriptを使用して呼び出しますあなたのhtmlに応じて。これがあなたが探しているものなら私に教えてください。私はあなたに同じことを手伝ってくれるでしょう。