时间戳

首页 > 解决方案 > 从 API 在 JavaScript 中解析 JSON 复杂数组

php - 从 API 在 JavaScript 中解析 JSON 复杂数组

问题描述

问题的背景> 好的，所以我正在尝试不同的技术来完成创建 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 选项的 php 文件来在我编写此 JavaScript 的主 index.php 文件中显示 api 响应

标签： phpjsonapiparsing

解决方案

只需像这样访问“数据”属性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>

推荐阅读