如何從JSON獲取值？

Question

我一直在嘗試獲取從PHP腳本創建並使用JavaScript處理的JSON的值

{
    "category_id": "1",
    "parent_id": "0",
    "name": "Root Catalog",
    "is_active": null,
    "position": "0",
    "level": "0",
    "children": [{
        "category_id": "2",
        "parent_id": "1",
        "name": "categoria raiz",
        "is_active": "1",
        "position": "1",
        "level": "1",
        "children": [{
            "category_id": "14",
            "parent_id": "2",
            "name": "nombre1",
            "is_active": "1",
            "position": "1",
            "level": "2",
            "children": []
        }, {
            "category_id": "12",
            "parent_id": "2",
            "name": "nombre2",
            "is_active": "1",
            "position": "2",
            "level": "2",
            "children": []
        }, {
            "category_id": "11",
            "parent_id": "2",
            "name": "nombre3",
            "is_active": "1",
            "position": "3",
            "level": "2",
            "children": []
        }, {
            "category_id": "10",
            "parent_id": "2",
            "name": "nombre4",
            "is_active": "1",
            "position": "4",
            "level": "2",
            "children": []
        }, {
            "category_id": "7",
            "parent_id": "2",
            "name": "nombre5",
            "is_active": "1",
            "position": "7",
            "level": "2",
            "children": []
        }, {
            "category_id": "6",
            "parent_id": "2",
            "name": "nombre6",
            "is_active": "1",
            "position": "8",
            "level": "2",
            "children": [{
                "category_id": "3",
                "parent_id": "6",
                "name": "nombre6_1",
                "is_active": "1",
                "position": "1",
                "level": "3",
                "children": []
            }, {
                "category_id": "5",
                "parent_id": "6",
                "name": "nombre6_2",
                "is_active": "1",
                "position": "2",
                "level": "3",
                "children": []
            }, {
                "category_id": "4",
                "parent_id": "6",
                "name": "nombre6_3",
                "is_active": "1",
                "position": "3",
                "level": "3",
                "children": []
            }, {
                "category_id": "15",
                "parent_id": "6",
                "name": "6_4",
                "is_active": "1",
                "position": "4",
                "level": "3",
                "children": []
            }, {
                "category_id": "16",
                "parent_id": "6",
                "name": "nombre6_5",
                "is_active": "1",
                "position": "5",
                "level": "3",
                "children": []
            }]
        }]
    }]
}

當我調用包含JavaScript的HTML時，僅返回：

undefined, undefined, undefined, undefined, undefined, undefined, undefined,
undefined, undefined, undefined, undefined, undefined, undefined, undefined,
undefined, undefined, undefined, undefined, undefined, undefined, undefined,

我應該如何遍歷兒童標簽？

我的JavaScript如下：

   <script type='text/javascript'>
$(document).ready(function(){
    console.log('entra...');
    $.getJSON('ArbolCategorias.php', function(data) {
    //console.log('data ...' + data);
        $.each(data.children, function(key, val) {
            if (data.children.has(children)){
                $.each(children.children, function(key, val){
                     $('#jsonresult').append('<li id="' + key + '">' + val.category_id  + ', ' + val.parent_id + ', ' + val.name + ', ' + val.is_active + ', ' + val.position + ', ' + val.level + ', ' + val.children + ', ' + '</li>');
                });
            }
            else{ 
        $('#jsonresult').append('<li id="' + key + '">' + val.category_id  + ', ' + val.parent_id + ', ' + val.name + ', ' + val.is_active + ', ' + val.position + ', ' + val.level + ', ' + val.children + ', ' + '</li>');
            }
        });
    });
});

希望你能幫助我

Answer 1

嘗試在each（）中使用data.children。

    $(document).ready(function(){
        console.log('entra...');
        $.getJSON('ArbolCategorias.php', function(data) {
        console.log('data ...' + data);
            $.each(data.children, function(key, val) {

            $('#jsonresult').append('<li id="' + key + '">' + val.category_id  + ', ' + val.parent_id + ', ' + val.name + ', ' + val.is_active + ', ' + val.position + ', ' + val.level + ', ' + val.children + ', ' + '</li>');

            });
        });
    });

如果您使用$ .each（data，...您正在遍歷該對象，則需要遍歷子級列表

這是使用遞歸函數writeChildrens的代碼：

function writeChildrens(element){
    $.each(element.children, function(key, val) {
       $('#jsonresult').append('<li id="' + key + '">' + val.category_id  + ', ' + val.parent_id + ', ' + val.name + ', ' + val.is_active + ', ' + val.position + ', ' + val.level + '</li>');     
       if(val.children.length>0) writeChildrens(val);       
    });        
}

$(document).ready(function(){
            console.log('entra...');
            $.getJSON('ArbolCategorias.php', function(data) {
            console.log('data ...' + data);
                writeChildrens(data);
            });
        });

Answer 2

最終我明白了，非常感謝Ragnar的大力幫助。 我的腳本現在看起來像

<script type='text/javascript'>
$(document).ready(function(){
    $.getJSON('ArbolCategorias.php', function(data) {
        //mejorar para que sea dinamico
        $.each(data.children, function(key, val) {
            $('#jsonresult').append('<li id="' + key + '">' + val.category_id  + ', ' + val.parent_id + ', ' + val.name + ', ' + val.is_active + ', ' + val.position + ', ' + val.level +  '</li>');
        });


        $.each(data.children, function(key, val) {
            $.each(val.children, function(key, value) {

                    $('#jsonresult').append('<li id="' + key + '">' + value.category_id  + ', ' + value.parent_id + ', ' + value.name + ', ' + value.is_active + ', ' + value.position + ', ' + value.level + '</li>');
            });
        });


        $.each(data.children, function(key, val) {
            $.each(val.children, function(key, value) {
                $.each(value.children, function(key, value) {
                    $('#jsonresult').append('<li id="' + key + '">' + value.category_id  + ', ' + value.parent_id + ', ' + value.name + ', ' + value.is_active + ', ' + value.position + ', ' + value.level + ', ' + value.children + ', ' + '</li>');
                });
            });
        });
    });
});

它不是動態的，所以當我引入一個新的孩子時，它不會被打印出來，但我會繼續處理它：D