創建層次結構時JavaScript中未捕獲的類型錯誤？

Question

我正在使用節點表示並以JSON形式將值發送到前端，例如

 [
    {
        "id": "1",
        "name": "Plant Director",
        "parentJobID": -1,
        "children": [
            {
                "id": "19",
                "name": "Operations Director",
                "parentJobID": 1,
                "children": [
                    {
                        "id": "16",
                        "name": "Financial planning and costs Manager",
                        "parentJobID": 19,
                        "children": [
                            {
                                "id": "14",
                                "name": "Cost Analyst",
                                "parentJobID": 16,
                                "children": []
                            },
                            {
                                "id": "15",
                                "name": "Head of Costs",
                                "parentJobID": 16,
                                "children": []
                            }
                        ]
                    },
                    {
                        "id": "17",
                        "name": "Manufacturing Manager",
                        "parentJobID": 19,
                        "children": [
                            {
                                "id": "2",
                                "name": "Head of Security",
                                "parentJobID": 17,
                                "children": [
                                    {
                                        "id": "3",
                                        "name": "Asistente Ejecutiva",
                                        "parentJobID": 2,
                                        "children": []
                                    },
                                    {
                                        "id": "8",
                                        "name": "Jefe de Mantenimiento",
                                        "parentJobID": 2,
                                        "children": []
                                    },
                                    {
                                        "id": "27",
                                        "name": "Jefe Aseguramiento de Calidad",
                                        "parentJobID": 2,
                                        "children": [
                                            {
                                                "id": "28",
                                                "name": "Jefe Seguridad Alimentaria",
                                                "parentJobID": 27,
                                                "children": [
                                                    {
                                                        "id": "33",
                                                        "name": "Operario Fabricación A (2)",
                                                        "parentJobID": 28,
                                                        "children": []
                                                    },
                                                    {
                                                        "id": "34",
                                                        "name": "Operario Fabricación B (2)",
                                                        "parentJobID": 28,
                                                        "children": []
                                                    }
                                                ]
                                            },
                                            {
                                                "id": "29",
                                                "name": "Especialista Aseguramiento de Calidad",
                                                "parentJobID": 27,
                                                "children": []
                                            },
                                            {
                                                "id": "30",
                                                "name": "Especialista en Microbiología",
                                                "parentJobID": 27,
                                                "children": []
                                            },
                                            {
                                                "id": "31",
                                                "name": "Especialista en Evaluación Sensorial",
                                                "parentJobID": 27,
                                                "children": []
                                            },
                                            {
                                                "id": "32",
                                                "name": "Técnico Aseguramiento de Calidad",
                                                "parentJobID": 27,
                                                "children": []
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                "id": "4",
                                "name": "Production Manager",
                                "parentJobID": 17,
                                "children": []
                            },
                            {
                                "id": "5",
                                "name": "Head of Maintenance",
                                "parentJobID": 17,
                                "children": []
                            },
                            {
                                "id": "6",
                                "name": "Quality Control Manager",
                                "parentJobID": 17,
                                "children": [
                                    {
                                        "id": "7",
                                        "name": "Técnico Medio Ambiente",
                                        "parentJobID": 6,
                                        "children": []
                                    },
                                    {
                                        "id": "23",
                                        "name": "Quality Control Technician 1",
                                        "parentJobID": 6,
                                        "children": [
                                            {
                                                "id": "25",
                                                "name": "Operario Fabricación B",
                                                "parentJobID": 23,
                                                "children": []
                                            },
                                            {
                                                "id": "26",
                                                "name": "Operario Fabricación D",
                                                "parentJobID": 23,
                                                "children": []
                                            }
                                        ]
                                    },
                                    {
                                        "id": "24",
                                        "name": "Quality Control Technician 2",
                                        "parentJobID": 6,
                                        "children": []
                                    }
                                ]
                            },
                            {
                                "id": "9",
                                "name": "Warehouse Manager",
                                "parentJobID": 17,
                                "children": []
                            },
                            {
                                "id": "10",
                                "name": "Head of Planning",
                                "parentJobID": 17,
                                "children": [
                                    {
                                        "id": "20",
                                        "name": "Operario Mtto A (2)",
                                        "parentJobID": 10,
                                        "children": []
                                    }
                                ]
                            },
                            {
                                "id": "11",
                                "name": "Head of Continuous Improvement",
                                "parentJobID": 17,
                                "children": [
                                    {
                                        "id": "21",
                                        "name": "Operario Servicios A (2)",
                                        "parentJobID": 11,
                                        "children": []
                                    }
                                ]
                            },
                            {
                                "id": "12",
                                "name": "Head of Supplies",
                                "parentJobID": 17,
                                "children": []
                            },
                            {
                                "id": "13",
                                "name": "Process Manager",
                                "parentJobID": 17,
                                "children": []
                            },
                            {
                                "id": "18",
                                "name": "IT Manager",
                                "parentJobID": 17,
                                "children": []
                            }
                        ]
                    }
                ]
            },
            {
                "id": "35",
                "name": "[ LINEA DE PRODUCCION ]",
                "parentJobID": 1,
                "children": []
            }
        ]
    },
    {
        "id": "22",
        "name": "Extrusion Area",
        "parentJobID": -1,
        "children": []
    }
]

在前端，我調用一個函數來創建層次結構

<script>
    function sim(list)
       {
         for (var i = 0; i < list.length; i++) {
        var li = document.createElement('li');
        li.innerHTML = list[i].name;
        if (list[i].children.length > 0) {
            var ul = document.createElement('ul');
            li.appendChild(ul);
            print_list(list[i].children, ul);
        }
       $("#jqxTree").appendChild(li);
    }
       }
     sim("<%= list %>");
    </script>

    <ul id='jqxTree'>
     </ul>

if (list[i].children.length > 0) { as

無法讀取未定義的屬性“長度”

Answer 1

您必須先解析JSON。 如果將json作為字符串發送，請查看以下代碼。

json = JSON.parse(list);

$.each(json, function(idx, obj) {
   alert(obj.name + " - " + obj.children.length);
});