Question

问题的背景>好的，所以我正在尝试不同的技术来创建Web仪表板。从一个具有按钮的html页面开始，单击该按钮将调用未打开的api请求，并在其中显示json响应。表。而不是以默认的字符串方式。我在做什么，我想使用的方法是先将api请求保存到.json文件，然后使用Java脚本将其显示为上面显示的方法。另一方面，我创建了一个显示json响应的.php文件。我使用邮递员代码curl php测试显示响应的api。现在，我该如何在JavaScript的php文件中调用它。

以下是我通过API获取的JSON数据。我已将其另存为thinker.json文件。我想在表格中显示数据部分，而不会删除上述data数组中提到的信息：

例如 Name Mac Status

XYZ ABC 1

{
    "action":"list_host",
    "type":"all",
    "ack":"ok",
    "count":"3",
    "page":"1",
    "data":[
        {
            "name":"Host_34F60E",
            "mac":"C8EEA634F60E",
            "status":"0",
            "mark":""
        },
        {
            "name":"K-Electric",
            "mac":"5004BA2C9693",
            "status":"1",
            "mark":""
        },
        {
            "name":"Host_2C94E0",
            "mac":"00F4162C9693",
            "status":"0",
            "mark":""
        }
    ]
}

我该怎么做？如果我删除了data数组上方的信息。因此，JSON将如下所示：

{
    "data":[
        {
            "name":"Host_34F60E",
            "mac":"C8EEA634F60E",
            "status":"0",
            "mark":""
        },
        {
            "name":"K-Electric",
            "mac":"5004BA2C9693",
            "status":"1",
            "mark":""
        },
        {
            "name":"Host_2C94E0",
            "mac":"00F4162C9693",
            "status":"0",
            "mark":""
        }
    ]
}

我成功使用此代码，但删除了data上方的信息。

$(document).ready(function () {
    $.getJSON("thinker.json", function (data) {
        var thinker_data = '';
        $.each(data, function (key, value) {
            thinker_data += '<tr>';
            thinker_data += '<td>' + value.name + '</td>';
            thinker_data += '<td>' + value.mac + '</td>';
            thinker_data += '<td>' + value.status + '</td>';
            thinker_data += '</tr>';
        });
        $('#thinker_table').append(thinker_data);
    });
});

我正在使用CURL PHP函数来获取数据。

我已经应用了相同的功能来获取这样的宏数据：

$(document).ready(function(){
  $.getJSON("routines.json", function(macros)

但是如果我还想通过使用相同的上述Java脚本代码从以下json响应中访问mac值怎么办？

{
    "amount": 4,
    "macros": [
        {
            "name": "Morning",
            "id": 1,
            "type": "onekey"
        },
        {
            "name": "Evening",
            "id": 2,
            "type": "onekey"
        },
        {
            "name": "Meeting Mode",
            "id": 3,
            "type": "onekey"
        },
        {
            "name": "Presentation Mode",
            "id": 4,
            "type": "onekey"
        }
    ],
    "ack": "ok",
    "action": "list_macro",
    "type": "all",
    "mac": "xxxxxxxx"
}

好吧，在此之后，我该如何调用使用curl选项显示在我编写此JavaScript的主index.php文件中的api响应的php文件

Answer 1

只需访问data.data这样的“数据”属性

<script>

$(document).ready(function(){
  $.getJSON("thinker.json", function(data){
     var thinker_data = '';
     $.each(data.data, function(key, value){
        thinker_data += '<tr>';
        thinker_data += '<td>'+value.name+'</td>';
        thinker_data += '<td>'+value.mac+'</td>';
        thinker_data += '<td>'+value.status+'</td>';
        thinker_data += '</tr>';      
     });
     $('#thinker_table').append(thinker_data);
    }); 
  });
</script>

Answer 2

好几件事..

您应该养成使用promise与内联回调的习惯。内联回调创建“回调地狱”
您经常使用诸如把手之类的东西来对DOM进行操作，而不是将原始HTML注入其中。（速度较慢且无法维护）。
JQuery提供了一种使用promise与回调的方法。 JavaScript现在可以很好地通过异步本地完成此操作，但是无论如何，promise可以让您在中断数据响应的方式上更有条理。

一些链接以供将来参考：

还有一些代码。

(function(){
    // closurers are your friend
    var updateTable = (function () {
        // get dataset and manipulate it
        return function datasetManipulator(...dataSet){
            if (dataSet.length == 0) {
                throw new ReferenceError('Data from external request was empty.');
            }
            var htmlSet = '';
            // ES6+ lets use do this more natively
            dataSet.forEach(dataItem => {
               htmlSet += '<tr>';
               htmlSet += '<td>' + (dataItem.name) + '</td>';
               htmlSet += '<td>' + (dataItem.mac) + '</td>';
               htmlSet += '<td>' + (dataItem.status) + '</td>';
               htmlSet += '</tr>';  
            });
            return htmlSet;
        }
    })();
    // function to handle data on the return
    var queryJsonApi = (function () {
        // after query is done, check for data.data, 
        // send an empty object back if nothing
        return function jsonSuccess(data) {
            return (typeof data.data !== 'undefined' ? data.data : {})
        }
    })();
    // function to handle distroying the performance of the page with DOM manipulations
    var completeJsonQuery = (function() {
        var htmlTable = '';
        // update the page DOM with new dataset
        return function domUpdate(dataSet) {
            if (htmlTable == '') {
                htmlTable = $("#thinker_table");
            }
            htmlTable.append(updateTable(dataSet));
            return htmlTable;
        }
    })();
    $(document).ready(function(){
        var jqxhr = null;
        jqxhr = $.getJSON("thinker.json", queryJsonApi)
                    .done(completeJsonQuery)
                    .fail(function jsonFailed() {
                        console.log("something failed.");
                    })
                    .always(function jsonAlways() {
                        console.log("always fire success or failure.");
                    });

        // Set another completion function for the request above
        jqxhr.complete(function jsonComplete() {
           console.log("The reasoning is finished. Fire this event.");
        });
    });
})();

来自API的JavaScript中的JSON复杂数组解析

XYZ ABC 1

2 个答案: