загрузить значения арии теперь в соответствии с заданными числами в порядке возрастания или убывания

Question

У меня есть 5-звездочная система оценки пользователей, и я хотел бы, чтобы индикаторы выполнения загружались соответствующим образом, т.е. если у пользователя 2 5-star оценок и 10 1-star оценок, индикатор выполнения должен показывать это.до сих пор я получаю оценки пользователей (от 1 до 5) и сохраняю их в массиве, например

var rate= {
  str1: 100,
  str2: 20,
  str3: 30,
  str4: 40,
  str5: 50
};

затем я сортирую массив в порядке возрастания

function bySortedValue(obj, callback, context) {
  var tuples = [];

  for (var key in obj) tuples.push([key, obj[key]]);

  tuples.sort(function(a, b) {
    return a[1] < b[1] ? 1 : a[1] > b[1] ? -1 : 0
  });

  var length = tuples.length;
  while (length--) callback.call(context, tuples[length][0], tuples[length][1]);
}
//example
bySortedValue(arru, function(key, value) {
  document.getElementById('res').innerHTML += `${key}: ${value}<br>`;
  


});

тогда у меня есть другой массив, в котором хранятся значения арии, которые должны быть загружены в соответствии с размером тарифа массива тарифов, т.е. самый низкий рейтинг получит значение 28% width

var aria= [28,48,68,88,98];

Моя проблема в том, что я не могу понять, как связать все это вместе, чтобы загрузить через jquery в индикатор выполнения, чтобы это выглядело

<div class="progblock">
  <a href="javascript:void(0)" class="link-muted str-nmb-5">
    <div class="progress skill-bar ">
      <div class="prgbfi progress-bar progress-bar-success" role="progressbar" aria-valuenow="88" aria-valuemin="0" aria-valuemax="100">
        <span class="skill five-rt">5 <i class="fa fa-star"></i> <i class="fa fa-user val"> 50</i></span>
      </div>
    </div>
  </a>

  <a href="javascript:void(0)" class="link-muted str-nmb-4">
    <div class="progress skill-bar">
      <div class="prgbfo progress-bar progress-bar-info" role="progressbar" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100">
        <span class="skill four-rt">4 <i class="fa fa-star"></i> <i class="fa fa-user val"> 40</i></span>
      </div>
    </div>
  </a>

  <a href="javascript:void(0)" class="link-muted str-nmb-3">
    <div class="progress skill-bar">
      <div class="prgbth progress-bar progress-bar-warning" role="progressbar" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100">
        <span class="skill three-rt">3 <i class="fa fa-star"></i> <i class="fa fa-user val"> 30</i></span>
      </div>
    </div>
  </a>

  <a href="javascript:void(0)" class="link-muted str-nmb-2">
    <div class="progress skill-bar">
      <div class="prgbtw progress-bar progress-bar-danger" role="progressbar" aria-valuenow="28" aria-valuemin="0" aria-valuemax="100">
        <span class="skill two-rt">2 <i class="fa fa-star"></i> <i class="fa fa-user val"> 20</i></span>
      </div>
    </div>
  </a>

  <a href="javascript:void(0)" class="link-muted str-nmb-1">
    <div class="progress skill-bar">
      <div class="prgbon progress-bar progress-bar-dis" role="progressbar" aria-valuenow="98" aria-valuemin="0" aria-valuemax="100">
        <span class="skill one-rt">1 <i class="fa fa-star"></i> <i class="fa fa-user val"> 100</i></span>
      </div>
    </div>
  </a>
</div>

ОБНОВЛЕНИЕ

Вот скрипка

Answer 1

разобрался

arru = {
  prgbon: res[index].Son,
  prgbtw: res[index].Stw,
  prgbth: res[index].Sth,
  prgbfo: res[index].Sfo,
  prgbfi: res[index].Sfi
};

nar = [];

bySortedValue(arru, function(key, value) {
  
  nar.push(key);

});

$('.progress .' + nar[0]).css("width", function() {
  return $(this).attr("aria-valuenow") + "28%";
});
$('.progress .' + nar[1]).css("width", function() {
  return $(this).attr("aria-valuenow") + "48%";
});
$('.progress .' + nar[2]).css("width", function() {
  return $(this).attr("aria-valuenow") + "68%";
});
$('.progress .' + nar[3]).css("width", function() {
  return $(this).attr("aria-valuenow") + "88%";
});
$('.progress .' + nar[4]).css("width", function() {
  return $(this).attr("aria-valuenow") + "98%";
});

Answer 2

Вы можете сделать это как

$(document).ready(function(){
var aria= [28,48,68,88,98];
for(i=0; i < aria.length; i++){

$('.progblock').append('<a href="javascript:void(0)" class="link-muted str-nmb-5"><div class="progress skill-bar "><div class="prgbfi progress-bar progress-bar-success" role="progressbar" aria-valuenow="' + aria[i] + '" aria-valuemin="0" aria-valuemax="100"><span class="skill five-rt">5 <i class="fa fa-star"></i> <i class="fa fa-user val"> 50</i></span></div></div></a>');
}
$('.progress .progress-bar').css("width", function() {
  return $(this).attr("aria-valuenow") + "%";
});
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="progblock">

</div>

ниже