jstree get_json - Introduction

What is jstree?

jstree is a popular open-source JavaScript library that provides interactive tree-views, with support for drag-and-drop, inline editing, and context menus. It is highly customizable, and has a well-defined API, making it easy to integrate with other libraries and frameworks.

What is get_json?

get_json is a method of jstree that allows you to retrieve the data of a tree in JSON format. This method traverses the tree and builds a nested JSON object that represents the structure of the tree, with each node represented as an object.

Syntax

$('#tree').jstree(true).get_json([obj, options])

• obj is the parent node to start building the JSON from. If not provided, the entire tree's JSON is returned.
• options is an options object that can be used to customize the JSON that is returned.

Example Usage

Suppose you have a jstree with the following structure:

-Parent 1
  -Child 1.1
  -Child 1.2
    -Grandchild 1.2.1
-Parent 2
  -Child 2.1

You can retrieve the JSON representation of the entire tree by calling:

$('#tree').jstree(true).get_json()

This will return the following JSON object:

[
  {
    "id": "Parent 1",
    "text": "Parent 1",
    "icon": true,
    "state": {
      "opened": false,
      "disabled": false,
      "selected": false
    },
    "children": [
      {
        "id": "Child 1.1",
        "text": "Child 1.1",
        "icon": true,
        "state": {
          "opened": false,
          "disabled": false,
          "selected": false
        },
        "children": []
      },
      {
        "id": "Child 1.2",
        "text": "Child 1.2",
        "icon": true,
        "state": {
          "opened": false,
          "disabled": false,
          "selected": false
        },
        "children": [
          {
            "id": "Grandchild 1.2.1",
            "text": "Grandchild 1.2.1",
            "icon": true,
            "state": {
              "opened": false,
              "disabled": false,
              "selected": false
            },
            "children": []
          }
        ]
      }
    ]
  },
  {
    "id": "Parent 2",
    "text": "Parent 2",
    "icon": true,
    "state": {
      "opened": false,
      "disabled": false,
      "selected": false
    },
    "children": [
      {
        "id": "Child 2.1",
        "text": "Child 2.1",
        "icon": true,
        "state": {
          "opened": false,
          "disabled": false,
          "selected": false
        },
        "children": []
      }
    ]
  }
]

Options

The options object can be used to customize the JSON that is returned. The following options are available:

• flat (default: false): If set to true, the JSON object will be returned as a flat array, instead of a nested object. This is useful if you want to export the tree to a flat file format, such as CSV.
• no_state (default: false): If set to true, the state information (such as whether a node is selected or expanded) will not be included in the JSON object.
• no_id (default: false): If set to true, the id property of each node will not be included in the JSON object.
• no_text (default: false): If set to true, the text property of each node will not be included in the JSON object.
• no_children (default: false): If set to true, the children property of each node will not be included in the JSON object.

Conclusion

In conclusion, jstree's get_json method provides a convenient way to retrieve the data of a tree in JSON format. It is highly customizable and can be used to export the tree to various file formats.