构建JSON格式的树状图

1.JSON格式

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也便于机器解析和生成。它基于JavaScript的一个子集，但与编程语言无关，广泛用于数据传输和存储。

1.1 JSON的基本结构

JSON包含两种结构：

对象（Object）：用大括号 {} 包围，包含键值对。键必须是字符串，值可以是任何类型的数据（如字符串、数字、布尔值、数组或另一个对象）。

{
  "name": "Alice",
  "age": 30,
  "isStudent": false,
  "address": {
    "street": "123 Main St",
    "city": "Wonderland"
  },
  "hobbies": ["reading", "cycling", "hiking"]
}

• "name": "Alice" 表示键为 name，值为字符串 "Alice"。
• "age": 30 表示键为 age，值为数字 30。
• "isStudent": false 表示键为 isStudent，值为布尔值 false。
• "address" 的值是另一个对象，包含 street 和 city 键值对。
• "hobbies" 的值是一个数组，包含三个字符串。

数组（Array）：用方括号 [] 包围，包含一个有序的值列表，值可以是任何类型的数据。

[
  {
    "name": "Alice",
    "age": 30
  },
  {
    "name": "Bob",
    "age": 25
  }
]

这个JSON数组包含两个对象，每个对象都有 name 和 age 键。

1.2 JSON数据类型

JSON支持以下几种数据类型：

1. 字符串（String）：用双引号 " 包围。例："hello"
2. 数字（Number）：整数或浮点数。例：42, 3.14
3. 布尔值（Boolean）：true 或 false
4. 数组（Array）：用方括号 [] 包围的有序值列表。例：[1, 2, 3]
5. 对象（Object）：用大括号 {} 包围的键值对集合。例：{"key": "value"}
6. null：表示空值。

{
  "students": [
    {
      "id": 1,
      "name": "John Doe",
      "age": 21,
      "courses": ["Math", "Science"]
    },
    {
      "id": 2,
      "name": "Jane Smith",
      "age": 22,
      "courses": ["History", "Art"]
    }
  ]
}

这个JSON数据表示有两个学生，每个学生都有 id、name、age 和 courses（数组）属性。

2.JSON可视化

这里非常推荐使用JSON Crack

VS Code扩展可以直接下载。

可视化效果如下所示，very elegant。

3.JSON树状图编写

主要需要考虑后续用途，最好可以清晰地标出其父子关系，采用数组的对象结合的方式，并为每一项提供专有id，便于直接调用。

假设有如下树状图，

A
├── B
│   ├── D
│   └── E
└── C
    ├── F
    └── G

可以使用这样的json文件格式。

{
    "id": "root",
    "data": "A",
    "children": [
        {"id":"1",
        "parent_id": "root",
        "data": "B",
        "children": [
                    { "id":"1.1",
                    "parent_id": "1",
                    "data": "D"
                    },
                    { "id":"1.2",
                    "parent_id": "1",
                    "data": "E"
                    }
                    ]
        },
        {"id":"2",
        "parent_id": "root",
        "data": "C",
        "children": [
                    { "id":"2.1",
                    "parent_id": "2",
                    "data": "F"
                    },
                    { "id":"2.2",
                    "parent_id": "2",
                    "data": "G"
                    }
                    ]
        }
    ]
}