如何基于 JSON 更改显示值/颜色 td

Question

我正在开发一个应用程序，通过 ajax 调用获取 json。此 json 包含对象，您可以在其中获取每个分机的特定状态代码（1 = 在线，2，正在响铃，3 = 忙碌）

我如何确保返回的值转换为文本（最好使用不同颜色的文本） ）

所以当我得到 1 回来时，我希望它显示在线，并带有 2 环等

    $.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.");
    }

}）；

提前致谢！

Answer 1

我已经更改了代码

function get_blf() {
$.ajax({
类型：'获取'，
网址： 网址，
数据类型：'json',
错误：函数（jqXHR，异常）{ajax_error_handler（jqXHR，异常）;}，
成功： 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);
    }
});

}

}

并添加 css，但现在我无法获取任何值。但现在我无法取回任何值。 （抱歉，我对 javascript 还很陌生）

Answer 2

请使用 DOM API

获取颜色的一种方法是使用 CSS 类来表示状态：

// 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

我终于让脚本工作了。我现在正在尝试构建轮询，但是我看到 ajax 调用再次执行并获取了数组。但是，该表没有刷新，而是添加了一个新表，有谁知道这个问题的解决方案吗？

我现在用于重新轮询的代码是

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