How change display value/color td based on JSON

Question

I'm working on an app where I get a json via an ajax call. This json contains objects where you get a certain status code per extension (1 = online, 2, is ringing, 3 = busy)

How can I ensure that the value that I get back is converted to the text (preferably with a different color of the )

So when I get a 1 back I want it to show Online, and with a 2 Ring etc

    $.ajax({
    type:'GET',
    url: url,
    dataType: 'json',
    error: function(jqXHR, exception) {ajax_error_handler(jqXHR, exception);},
    success: function(data){
    
    // console.log(JSON.parse(data.responseText));
    // console.log(JSON.parse(data.responseJSON));
        

        console.log(data['entry']);
            var event_data = '';
            $.each(data.entry, function(index, value){
             /*  console.log(data['entry']);*/
                            
                event_data += '<tr>';
                event_data += '<td>'+value.extension+'</td>';
                event_data += '<td>'+value.status+'</td>';
                <!--event_data += '<td>'+value.registration+'</td>';-->
                event_data += '</tr>';
                    
            });
            $("#list_table_json").append(event_data);
        },
    error: function(d){
        /*console.log("error");*/
        alert("404. Please wait until the File is Loaded.");
    }

});

Thanks in advance!

Answer 1

I have change the code

function get_blf() { $.ajax({ type:'GET', url: url, dataType: 'json', error: function(jqXHR, exception) {ajax_error_handler(jqXHR, exception);}, success: function(data){

    $.each(data.entry, (index, value) => {
        const tableRow = document.createElement('tr');

        const tdExtension = document.createElement('td');
        extension.textContent = value.status;

        const tdStatus = document.createElement('td');
        if (value.status == 3) status.textContent = 'Busy';
        if (value.status == 2) status.textContent = 'Ringing';
        if (value.status == 1) status.textContent = 'Online';
        tdStatus.classList.add(`status-${value.status}`);

        tableRow.appendChild(tdExtension);
        tableRow.appendChild(tdStatus);
        $('#list_table_json').append(tableRow);
    }
});

}

}

and add the css, but now i can't get any values back. but now i can't get any values back. (sorry I'm fairly new to javascript)

Answer 2

Please use the DOM API

One way of getting colors would be to use CSS classes for the status:

// js
...
$.each(data.entry, (index, value) => {
    const tableRow = document.createElement('tr');

    const tdExtension = document.createElement('td');
    extension.textContent = value.extension;

    const tdStatus = document.createElement('td');
    if (value.status == 3) status.textContent = 'Busy';
    if (value.status == 2) status.textContent = 'Ringing';
    if (value.status == 1) status.textContent = 'Online';
    tdStatus.classList.add(`status-${value.status}`);

    tableRow.appendChild(tdExtension);
    tableRow.appendChild(tdStatus);
    $('#list_table_json').append(tableRow);
});

...
// css
.status-1 {
    color: green;
}
.status-2 {
    color: red;
}
.status-3 {
    color: orange;
}

Answer 3

I finally got the script working. I am now trying to build in a polling, however I see that the ajax call is executed again and the array is fetched. However, the table is not refreshed but a new table is added, does anyone know a solution for this?

code I'm using now for the repoll is

function repoll(poll_request, poll_interval, param=null) {

if (poll_interval != 0) {
                
    if (window.timeoutPool) {
        window.timeoutPool.push(setTimeout(function() { poll_request(param); }, poll_interval));
    }
    else {
        setTimeout(function() { poll_request(param); }, poll_interval);
    }
}
else {
    log_msg('Poll cancelled.');
}

}

---

tableRow.appendChild(tdExtension);
        tableRow.appendChild(tdNr);
        tableRow.appendChild(tdStatus);
        
        $('#list_table_json').append(tableRow);
        
            });     
repoll(get_blf, poll_interval_blf);