Изменить цвет значка в соответствии со статусом из запроса jquery ajax

Question

Я получаю некоторые данные от конечной точки, используя запрос get, я хочу использовать статус запроса, чтобы изменить цвет статуса запроса.

$.ajax({
    type: 'GET',
    url: 'api/v1/service/tax',
    success: (result)=>{
        let output="";
        let serialNumber = 1;

        for (var i in result){
          output+= `<tr class="custom-table-rows">
                        <th scope="row">${serialNumber++}</th>
                        <td>${result[i].entityName}</td>
                        <td>${result[i].serviceName}</td>
                        <td>${result[i].dateRequested}</td>
                        <td><span class="badge badge-pill">${result[i].status}</span></td>
                    </tr>`
            if(result[i].status === 'PENDING'){
                $('span.badge').addClass('badge-danger');
            } else if(result[i].status === 'IN PROCESS'){
                $('span.badge').addClass('badge-warning');
            }else{
                $('span.badge').addClass('badge-success');
            }
        }

        $("#adminTable").html(output);
    }
  });

Вот мой код, и это условное выражение, которое я использую для проверки цикла.Что я делаю не так?

Answer 1

Вы должны сделать это следующим образом

$.ajax({
    type: 'GET',
    url: 'api/v1/service/tax',
    success: (result)=>{
        let output="";
        let serialNumber = 1;
        let badge = "";

        for (var i in result){
          output+= `<tr class="custom-table-rows">
                        <th scope="row">${serialNumber++}</th>
                        <td>${result[i].entityName}</td>
                        <td>${result[i].serviceName}</td>
                        <td>${result[i].dateRequested}</td>`

            if(result[i].status === 'PENDING'){
                badge = 'badge-danger' ;
            } else if(result[i].status === 'IN PROCESS'){
                badge = 'badge-warning' ;
            }else{
                badge = 'badge-success' ;
            }
         output+= `<td><span class="badge badge-pill ${badge}">${result[i].status}</span></td></tr>`
        }

        $("#adminTable").html(output);
    }
  });

Объяснение: Что вы делаете неправильно, вы используете селекторы jQuery для изменения класса значка, который не будет работать, потому что генерируемый HTML все еще работаетв переменной output и не был добавлен в DOM.jQuery Selectos используются для выбора и управления элементами, присутствующими в DOM

Answer 2

Попробуйте это.Здесь проблема в том, что .badge span не создается в DOM, и вы выбираете не созданный span в цикле.DOM создать после '$ ("# adminTable"). Html (output);'это утверждение.

$.ajax({
  type: 'GET',
  url: 'api/v1/service/tax',
  success: (result) => {
    let output = "";
    let serialNumber = 1;

    for (var i in result) {
      output += '<tr class="custom-table-rows"> <
        th scope = "row" > $ {
          serialNumber++
        } < /th> <
        td > $ {
          result[i].entityName
        } < /td> <
        td > $ {
          result[i].serviceName
        } < /td> <
        td > $ {
          result[i].dateRequested
        } < /td> <
        td > < span class = "badge badge-pill '
      if (result[i].status === 'PENDING') {
        output += 'badge-danger';
      } else if (result[i].status === 'IN PROCESS') {
        output += 'badge-warning';
      } else {
        output += 'badge-success';
      }
      output += '">${result[i].status}</span></td> </tr>';
    }

    $("#adminTable").html(output);
  }
});