Синтаксический анализ JSON-комплекса в JavaScript из API

Question

Справочная информация о вопросе> хорошо, поэтому я пытаюсь использовать различные методы для достижения чего-либо при создании веб-панели управления. Начиная с html-страницы, имеющей кнопку, которая при нажатии вызывает вызов API, который не открыт, отображает ответ json вТаблица.Вместо того, чтобы использовать строковый метод по умолчанию.Что я делаю, я подумал об использовании подхода сначала сохранить запрос API в файл .json, а затем сделать его читать, что показано выше с помощью сценария Java.С другой стороны, я создал файл .php, который отображает ответ json.Я использовал код почтальона curl php, чтобы проверить API, который отображал ответ.Теперь, как я могу назвать его здесь в JavaScript-файле php.

Ниже приведены данные JSON, которые я получаю через мой API.Я сохранил это как 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)

Но что, если я также хочу получить доступ к значению Mac из поляответ json ниже, используя тот же код java-скрипта, что и выше?

{
    "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"
}

---

Хорошо, так после этого, как я могу вызвать тот php-файл, который использует опцию curl, чтобы показать ответ API здесь в главномФайл index.php, где я написал этот JavaScript

Answer 1

Ну, несколько вещей ..

1. Вы должны привыкнуть использовать обещания вместо встроенных обратных вызовов.Встроенные обратные вызовы создают «Ад обратного вызова»
2. Вы используете что-то вроде руля, чтобы манипулировать DOM, а не вводить в него необработанный HTML.(Это медленнее и не поддерживается).
3. JQuery предлагает способ использовать обещания или обратные вызовы.Хорошо, теперь JavaScript делает это изначально с помощью асинхронности, но в любом случае обещания позволят вам быть более методичным в том, как прервать ваш ответ на данные.

Несколько ссылок для будущих ссылок:

1. https://medium.com/@js_tut/the-great-escape-from-callback-hell-3006fa2c82e
2. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
3. https://api.jquery.com/deferred.then/
4. https://api.jquery.com/jQuery.getJSON/

И некоторый код ..

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

Answer 2

Просто получите доступ к свойству "data", как это 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>