如何根据号码

Question

我遇到data来自database的情况

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

我想显示与rating

一样多的star

例如对于此data {name:'Alpha Hotel',price:400,star:3}，rating 3应为1而不是IObservable<string> query = Observable .Merge( observable1.Take(1).Select(x => "hold"), Observable.Timer(TimeSpan.FromSeconds(6.0)).Select(x => "hold")) .Skip(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()方法对累加器和数组中的每个元素（从左到右）应用函数以将其减少为单个值。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以使用条件（如果，如果，精灵），并检查它有多少星星，然后显示它有多少星星。

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

你可以使用这个简单的解决方案。

import subprocess
p=subprocess.Popen(['./elf'],stdin=subprocess.PIPE,stdout=subprocess.PIPE)
out = p.communicate(input='0') #not responding

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/