
# Tree - Array Data

To implement a TreeView, you can use Json Array data rather than a hierarchical structure.
Use [setRows()](/refs/Class/LocalTreeDataProvider#setrows) to display data in Array format.

`※ When creating the treeId value that constitutes the tree node, the number of digits (Length) of each Level must be the same.`
`※ Assuming that the number of nodes in one level is up to 999, treeId should be written as 001 to 999, not 1 to 999. Not only numbers but also letters can be used.`
`※ Based on the example below, if the treeId value of Seoul Metropolitan City is 2 digits, the number of digits of sibling nodes (Busan Metropolitan City, Gyeonggi-do, Gangwon-do, etc.) at the same level as Seoul Metropolitan City must also be 2 digits.`

```js
const fields = [
  { fieldName: "area1code", dataType: "text" },
  { fieldName: "area1name", dataType: "text" },
  { fieldName: "area2code", dataType: "text" },
  { fieldName: "area2name", dataType: "text" },
  { fieldName: "area3code", dataType: "text" },
  { fieldName: "area3name", dataType: "text" },
  { fieldName: "treeId", dataType: "text" },
  { fieldName: "treeName", dataType: "text" },
  { fieldName: "iconField", dataType: "text" }
];

const columns = [
  { fieldName: "treeName", name: "treeName", width: 150, header: { text: "Region Name" } },
  { fieldName: "treeId", name: "treeId", header: { text: "TreeID" } },
  { fieldName: "area1code", name: "area1code", header: { text: "Province Code" } },
  { fieldName: "area1name", name: "area1name", header: { text: "Province Name" } },
  { fieldName: "area2code", name: "area2code", header: { text: "City/District Code" } },
  { fieldName: "area2name", name: "area2name", header: { text: "City/District Name" } },
  { fieldName: "area3code", name: "area3code", header: { text: "Town Code" } },
  { fieldName: "area3name", name: "area3name", header: { text: "Town Name" } },
  { fieldName: "iconField", name: "iconField" }
];

const { treeView, dataProvider } = RealGrid.createTree("realgrid", {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: "No data to display."
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 16
  },
  treeOptions: {
    iconImagesRoot: "/images/flags/",
    iconImages: [
      "kr.png",
      "de.png",
      "es.png",
      "fr.png",
      "grd_treeicon_leaf.png",
      "hu.png",
      "is.png",
      "kr.png",
      "mx.png",
      "pt.png",
      "us.png",
      "ve.png"
    ],
    defaultIcon: 4
  },
  onInitialized: (tree) => {
    fetch('/data/en/areatree.json')
      .then(response => response.json())
      .then(data => {
        tree.getDataSource().setRows(data, 'treeId', false, null, "iconField");
      });
  }
}, {
  fields
});

window.treeView = treeView;
window.dataProvider = dataProvider;
```

## setRows()

```js
treeProvider.setRows(data, "treeId", false, null, "iconField");
```

## Array Data

This is JSON format data to implement a tree.
In the example below, the treeId field contains hierarchy information.

```js
[
   {
     "treeId": "11",
     "treeName": "Seoul",
     "area1code": "11",
     "area1name": "Seoul",
     "iconField": 0
   },
   {
     "treeId": "11.010",
     "treeName": "Jongno-gu",
     "area1code": "11",
     "area1name": "Seoul",
     "area2code": "11010",
     "area2name": "Jongno-gu",
     "iconField": 1
   },
   {
     "area1code": "11",
     "area1name": "Seoul",
     "area2code": "11010",
     "area2name": "Jongno-gu",
     "area3code": "1101053",
     "area3name": "Sajik-dong",
     "date1": "20160416",
     "treeId": "11.010.53",
     "treeName": "Sajik-dong"
   },
   {
     "area1code": "11",
     "area1name": "Seoul",
     "area2code": "11010",
     "area2name": "Jongno-gu",
     "area3code": "1101054",
     "area3name": "Samcheong-dong",
     "treeId": "11.010.54",
     "treeName": "Samcheong-dong"
   },
   {
     "area1code": "11",
     "area1name": "Seoul",
     "area2code": "11010",
     "area2name": "Jongno-gu",
     "area3code": "1101055",
     "area3name": "Buam-dong",
     "treeId": "11.010.55",
     "treeName": "Buam-dong"
   },
   ....
];
```