Изменение <td>цвета фона в соответствии с массивом, полученным как ответ AJAX

Question

Я пытаюсь изменить цвет фона в соответствии со значениями в массиве. Так что cose, кажется, работает, но я продолжаю получать ВСЕ только с одним цветом, вместо того, чтобы он делал проверку и выбирал цвет соответственно.

Я уже пытался с JQUERY сделать это на основе ответа AJAX. Консоль говорит, что это работает, мой сайт говорит иначе. Мне действительно нужна помощь.

Код ниже является одной из моих функций AJAX. Следует напечатать 1 зеленый и 4 коричневых / красных. Тем не менее, я продолжаю получать либо весь красный, либо весь зеленый.

Это полученный массив [1776220,17 ,242332 ,1119098, 500633]

function listThem() {
  let color = '';
  $.ajax({
    type: "GET",
    url: "php/vehiculos/testServicio.php",
    data: "data",
    success: function(response) {
      let dinamica = JSON.parse(response);
      //VARIABLE PARA DINÁMICA DE SERVICIO COMUNITARIO
      //Aquíiiiiiiiii we are trying to reset
      $.each(dinamica, function(i, elem) {
        if (dinamica[i] <= 86400) {
          console.log(elem);
          color = '#51d847';
        }
        if ((dinamica[i] > 86400) & (dinamica[i] < 172800)) {
          console.log(elem);
          color = '#F18D05';
        }
        if (dinamica[i] >= 172800) {
          console.log(elem);
          color = '#E54028';
        }
      });
    }
  });
}

$.ajax({
  url: 'php/vehiculos/listing.php',
  type: 'GET',
  success: function(response) {
    /** Lets convert the string-like response into an usable object */
    let trueList = JSON.parse(response);
    // Some console checking
    console.log(trueList);
    /**Template that will be send to the HTML */
    let template = '';
    trueList.forEach(vehiculo => {
      /** Some back-ticks magics */
      template += `<tr taskId=${vehiculo.posId} > <!-- PAY ATENTION HERE-->
         <td class=''>
             <a>${vehiculo.name}</a>
         </td>
         <td style='background-color:${color}';>
             ${vehiculo.ultimaUpdate}  
         </td>
         <td>${vehiculo.phone}</td>
         <td>${vehiculo.category}</td>
        </tr>`
      $('#registros').html(template);
    });
  }
})

Answer 1

Используйте .append() вместо .html(). Вы переопределяете содержимое в вашем цикле.

$('#registros').append(template);

Alsp, я добавил else-if операторов и && оператора.

function listThem() {
  let color = '';
  $.ajax({
    type: "GET",
    url: "php/vehiculos/testServicio.php",
    data: "data",
    success: function(response) {
      let dinamica = JSON.parse(response);
      //VARIABLE PARA DINÁMICA DE SERVICIO COMUNITARIO
      //Aquíiiiiiiiii we are trying to reset
      $.each(dinamica, function(i, elem) {
        if (dinamica[i] <= 86400) {
          console.log(elem);
          color = '#51d847';
        }
        else if ((dinamica[i] > 86400) && (dinamica[i] < 172800)) {
          console.log(elem);
          color = '#F18D05';
        }
        else if (dinamica[i] >= 172800) {
          console.log(elem);
          color = '#E54028';
        }
      });
    }
  });
}