CODEWITHSUNDEEP
javascriptwebformsfetch-apiorgchart
Raj Shukla
Raj Shukla

Reputation: 23

unable to display node data when using fetch api to generate OrgChart by dabeng

I have created a WebForm to display OrgChart using jquery.orgchart.js plugin, chart is loading but only one node is displayed saying undefined.

This is my Client-Side Code

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>OrgChart</title>
    <script src="Scripts/jquery-3.4.1.js"></script>
    <script src="Scripts/jquery.orgchart.js"></script>
    <link rel="stylesheet" href="Content/jquery.orgchart.css" />
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            // Fetch orgchart data using server-side processing
            fetch("OrgCHart.aspx/GetOrgChartData", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
            })
                .then(function (response) {
                    if (response.ok) {
                        return response.json();
                    } else {
                        throw new Error("Error: " + response.status);
                    }
                })
                .then(function (data) {
                    $('#orgchart').orgchart({
                        'data': data,
                        'nodeTitle': 'Name',
                        'nodeContent': 'Title'
                    });
                })
                .catch(function (error) {
                    console.log(error);
                });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="orgchart"></div>
    </form>
</body>
</html>

And this is my server-side code:


    public partial class OrgCHart : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
        }

        [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public static List<OrgChartNode> GetOrgChartData()
        {
            List<OrgChartNode> nodes = new List<OrgChartNode>
            {
                new OrgChartNode
                {
                    Name = "CEO",
                    Title = "Chief Executive Officer",
                    Children = new List<OrgChartNode>
                    {
                        new OrgChartNode
                        {
                            Name = "VP",
                            Title = "Vice President",
                            Children = new List<OrgChartNode>
                            {
                                new OrgChartNode
                                {
                                    Name = "Manager",
                                    Title = "Manager",
                                    Children = new List<OrgChartNode>()
                                },
                                new OrgChartNode
                                {
                                    Name = "Manager",
                                    Title = "Manager",
                                    Children = new List<OrgChartNode>()
                                }
                            }
                        },
                        new OrgChartNode
                        {
                            Name = "VP",
                            Title = "Vice President",
                            Children = new List<OrgChartNode>()
                        }
                    }
                }
            };

            return nodes;
        }

        public class OrgChartNode
        {
            public string Name { get; set; }
            public string Title { get; set; }
            public List<OrgChartNode> Children { get; set; }
        }

    }

Please help, Is it the issue with the json data structure or am i missing something? i also tried to use data.d to get data but its giving 404 error. i am stucked.

Upvotes: 0

Views: 89

Answers (0)

Related Questions