使用AJAX加载getOrgChart报错：loadFromJSON提示无法读取undefined的children属性

Hey Juan, sorry to hear you're stuck with this error when using getOrgChart's loadFromJSON method! Let's break down the most common causes and fixes for that "Cannot read property 'children' of undefined" error.

1. First: Verify Your JSON Structure Matches getOrgChart's Requirements #

getOrgChart relies on a strict hierarchical data format, and the most frequent trigger for this error is a mismatched JSON structure. The component expects a root node that explicitly includes a children property (even if it's an empty array).

Example of a valid structure: #

{
  "id": 1,
  "name": "Company CEO",
  "children": [
    {
      "id": 2,
      "name": "Head of Engineering",
      "children": []
    },
    {
      "id": 3,
      "name": "Head of Marketing",
      "children": [
        {
          "id": 4,
          "name": "Social Media Manager",
          "children": []
        }
      ]
    }
  ]
}

Common structure mistakes to check for: #

• Your AJAX response returns an array ([{...}]) instead of a single root object ({...})
• The root node or any child node is missing the children property entirely
• A node's children value is undefined instead of an empty array []

2. Make Sure AJAX Data is Loaded Before Calling loadFromJSON #

It's easy to accidentally call the load method before your AJAX request finishes, leading to undefined data. Always invoke loadFromJSON inside the success callback of your request.

Wrong approach (data isn't ready yet): #

let orgData;
$.get('/your-org-data-endpoint', function(data) {
  orgData = data;
});
// This runs before the AJAX request completes - orgData is undefined!
$("#orgChart").getOrgChart().loadFromJSON(orgData);

Correct approach (wait for data to load): #

$.get('/your-org-data-endpoint', function(data) {
  // Only call loadFromJSON once the data is fully retrieved
  $("#orgChart").getOrgChart().loadFromJSON(data);
});

3. Confirm the getOrgChart Instance is Properly Initialized #

If you try to call loadFromJSON before initializing the component, you'll run into undefined errors. Double-check that you've set up the chart first.

Example of proper initialization + loading: #

$(function() {
  // Initialize the getOrgChart component first
  $("#orgChart").getOrgChart({
    primaryColumns: ["name", "title"],
    theme: "sara"
  });

  // Then fetch and load the data
  $.get('/your-org-data-endpoint', function(data) {
    $("#orgChart").getOrgChart().loadFromJSON(data);
  });
});

4. Debug the AJAX Response #

If you're still stuck, log the raw AJAX response to inspect exactly what data you're working with. Add console.log(data) inside your success callback to check for unexpected values or missing properties:

$.get('/your-org-data-endpoint', function(data) {
  console.log("Raw AJAX Response:", data); // Check this in your browser's dev tools
  $("#orgChart").getOrgChart().loadFromJSON(data);
});

Look for:

• Is the root object present, or is it undefined?
• Do all nodes have a children property (even if empty)?
• Are there any null or undefined values in the children array?

Quick Fix for Missing children Properties #

If your API returns nodes without a children property, you can pre-process the data to add empty arrays before loading it into the chart:

// Recursive function to ensure all nodes have a children array
function ensureChildrenProperty(node) {
  if (!node.children) {
    node.children = [];
  }
  // Check and fix child nodes too
  node.children.forEach(child => ensureChildrenProperty(child));
  return node;
}

$.get('/your-org-data-endpoint', function(data) {
  const processedData = ensureChildrenProperty(data);
  $("#orgChart").getOrgChart().loadFromJSON(processedData);
});

内容的提问来源于stack exchange，提问作者Juan Ignacio