如何顯示基於數字的評分

Question

我遇到從這樣的database獲取data的情況

var data = [  {name:'Alpha Hotel',price:400,star:3},
              {name:'Beta Hotel',price:600,star:4},
              {name:'Gamma Hotel',price:450,star:5},
           ];

我想顯示與我的star一樣多的rating

例如，該data {name:'Alpha Hotel',price:400,star:3}我的rating應該是3而不是1

這是我嘗試過的： https : //jsfiddle.net/ewL4wLvh/2/

Answer 1

構造HTML時，您需要重復spans為星號的次數。
您可以使用此巧妙技巧來實現此目的，而無需使用循環：

htmlConstructed += '<p>Name : '+val.name+'</p>'+
    '<p>Price : '+val.price+'</p>'+
    'Rating :'+new Array(val.star + 1).join('<span><i class="fa fa-star" aria-hidden="true" style="color:#D91E18;"></i></span>')+
    '<hr/>';

查看更新的FIDDLE

Answer 2

使用loop將表單star標添加到附件中-

Array#fill - fill()方法使用靜態值填充數組的所有元素，從開始索引到結束索引。

Array#reduce - reduce()方法對累加器和數組中的每個元素（從左到右）應用一個函數，以將其減小為單個值。

 var data = [{ name: 'Alpha Hotel', price: 400, star: 3 }, { name: 'Beta Hotel', price: 600, star: 4 }, { name: 'Gamma Hotel', price: 450, star: 5 }, ]; var htmlConstructed = ''; $.each(data, function(i, val) { var starStr = Array(val.star).fill(null).reduce((a) => a + '<i class="fa fa-star" aria-hidden="true" style="color:#D91E18;"></i>', ''); htmlConstructed += '<p>Name : ' + val.name + '</p>' + '<p>Price : ' + val.price + '</p>' + 'Rating :<span>' + starStr + '</span><hr/>'; }); $('#content-area').append(htmlConstructed); 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div id="content-area"></div> 

Answer 3

您可以使用條件（如果是，如果是其他，則為elf），並檢查它有多少顆恆星，然后顯示它有多少顆恆星。

Answer 4

在需要重復某些元素的時間使用Array.join 。

var data = [  {name:'Alpha Hotel',price:400,star:3},
          {name:'Beta Hotel',price:600,star:4},
          {name:'Gamma Hotel',price:450,star:5},
       ];

var htmlConstructed = '';
 $.each(data,function(i,val){        
      htmlConstructed += '<p>Name : '+val.name+'</p>'+'<p>Price : '+val.price+'</p>'+'Rating :<span>'+
      Array(val.star).join('<i class="fa fa-star" aria-hidden="true" style="color:#D91E18;"></i>')
  +'</span><hr/>';

  });

  $('#content-area').append(htmlConstructed);

Answer 5

您可以使用這個簡單的解決方案。

var data = [  {name:'Alpha Hotel',price:400,star:3},
                  {name:'Beta Hotel',price:600,star:4},
                  {name:'Gamma Hotel',price:450,star:5},
               ];

        var htmlConstructed = '';
         $.each(data,function(i,val){
             // console.log(val.name);
             var rating='';
             for(var i=0;i<val.star;i++){
                    rating = rating +'<span><i class="fa fa-star" aria-hidden="true" style="color:#D91E18;"></i></span>';
             }
              htmlConstructed += '<p>Name : '+val.name+'</p>'+'<p>Price : '+val.price+'</p>'+'Rating :'+rating+'<hr/>';


     });

     $('#content-area').append(htmlConstructed);

Answer 6

使用此代碼，

var data = [  {name:'Alpha Hotel',price:400,star:3},
              {name:'Beta Hotel',price:600,star:4},
              {name:'Gamma Hotel',price:450,star:5},
           ];

    var htmlConstructed = '';
     $.each(data,function(i,val){
         // console.log(val.name);

          htmlConstructed += '<p>Name : '+val.name+'</p>'+'<p>Price : '+val.price+'</p>'+'Rating :'+ addStar(val.star) +'<hr/>';

 });

 function addStar(rating){
 var returnString = '';
 for(var i=0;i< rating;i++ )
 returnString = returnString + '<span><i class="fa fa-star" aria-hidden="true" style="color:#D91E18;"></i></span>';

 return returnString;

 }

 $('#content-area').append(htmlConstructed);

小提琴： https : //jsfiddle.net/r83wnpqr/