如何根据数字显示评分

我有这样一个情况,我从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/

使用loopformsstar标记附加 –

Array#fillfill()方法用一个静态值从开始索引到结束索引填充数组的所有元素。

Array#reducereduce()方法对累加器和数组中的每个元素(从左到右)应用一个函数,以将其减less为单个值。

 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> 

在构buildHTML的同时,你需要重复的次数是星星的次数。
你可以使用这个巧妙的技巧来实现这一点,而不使用循环:

 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

使用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); 

你可以使用条件(如果,否则如果,精灵),并检查它有多less恒星,然后显示它有多less恒星。

你可以用这个简单的解决scheme。

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

使用这个代码,

 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/