How to display nested array of Node, children objects as a table in HTML

user_19253898 0
Viewed 57

I currently have an EmployeeNode struct that represents a company Org Tree with the root EmployeeNode representing the CEO of the company. It looks like below:

type EmployeeNode struct {
    UserName string  
    Children   []*EmployeeNode
}

root := {
      UserName: "Bob Wang",
      Children: [
         {
            UserName: "Jim Halpert",
            Children: [
               {
                  UserName: "Brett Wang",
                  Children: []
               },
               {
                  UserName: "Ryan Wang",
                  Children: []
               }
            ]
         }
         {
            UserName: "Michael Wang",
            Children: [
               {
                  UserName: "Annie Wang",
                  Children: []
               },
               {
                  UserName: "Jay Wang",
                  Children: []
               },
            ]
         }
      ]
   }
]

Given this sample root data, how can I dynamically generate an HTML table in Golang using HTML templates, that shows the Org Tree like below?:

Org Chart

Each EmployeeNode can have many children, or no children and I want to dynamically display this nested list structure as a table in HTML. I already know how to pass this EmployeeNode struct to a HTML template in Golang, but just not sure how to actually create the tables dynamically using this EmployeeNode struct. Thanks!

go-templates go html
1 Answers

template.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Organization Chart</title>
  <link rel="icon" href="img/logo.png">
  <link rel="stylesheet" href="https://dabeng.github.io/OrgChart/css/jquery.orgchart.css">
  <link rel="stylesheet" href="https://dabeng.github.io/OrgChart/css/style.css">
</head>
<body>
  <div id="chart-container"></div>

  <script type="text/javascript" src="https://dabeng.github.io/OrgChart/js/jquery.min.js"></script>
  <script type="text/javascript" src="https://dabeng.github.io/OrgChart/js/jquery.orgchart.js"></script>
  <script type="text/javascript">
    $(function() {

    var datasource = {{.}};

    $('#chart-container').orgchart({
      'data' : datasource,
      'nodeContent': 'title'
    });

  });
  </script>
  </body>
</html>

main.go

package main

import (
    "encoding/json"
    "fmt"
    "log"
    "net/http"
    "text/template"
)

type EmployeeNode struct {
    UserName string          `json:"name"`
    Children []*EmployeeNode `json:"children"`
}

var root EmployeeNode = EmployeeNode{
    UserName: "Bob Wang",
    Children: []*EmployeeNode{
        &EmployeeNode{
            UserName: "Jim Halpert",
            Children: []*EmployeeNode{
                &EmployeeNode{
                    UserName: "Brett Wang",
                    Children: []*EmployeeNode{},
                },
                &EmployeeNode{
                    UserName: "Ryan Wang",
                    Children: []*EmployeeNode{},
                },
            },
        },
        &EmployeeNode{
            UserName: "Michael Wang",
            Children: []*EmployeeNode{
                &EmployeeNode{
                    UserName: "Annie Wang",
                    Children: []*EmployeeNode{},
                },
                &EmployeeNode{
                    UserName: "Jay Wang",
                    Children: []*EmployeeNode{},
                },
            },
        },
    },
}

func main() {

    http.HandleFunc("/", tree)
    // http://localhost:9090/
    http.ListenAndServe(":9090", nil)
}

func tree(w http.ResponseWriter, r *http.Request) {

    tmpl, err := template.ParseFiles("template.html")
    if err != nil {
        fmt.Fprintln(w, err)
    }

    data, err := json.Marshal(root)
    if err != nil {
        log.Fatal(err)
    }

    tmpl.Execute(w, string(data))
}

Working image of dynamic Tree

enter image description here

user_197162540
Related