How change display value/color td based on JSON-CodePudding

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!

CodePudding user response：

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)

CodePudding user response：

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