JSTree not populating properly from JSON Array. If I return a single String it works but not from my Array. Where am I going wrong?

Ask Question

Asked 3 years ago

Modified 3 years ago

Viewed 130 times

I have been trying to get this working for days but failing. If I return a single string using this format from C#:

"{ \"id\": \"" + libraryName + "\", \"parent\": \"#\", \"text\": \"" + libraryName + "\", \"type\": \"FDR\", \"value\": \"0\" }"

It will work but obviously a Tree is no use with a single item! As soon as I add the items to a List or Array (which JSTree needs) then it seems to interpret each String as only a String and doesn't read in any values.

I have set an alert before it builds the tree to double check and it looks to be presenting the data correctly:

{ "id": "New Lib", "parent": "#", "text": "New Lib", "type": "FDR", "value": "0" }, { "id": "40", "parent": "New Lib", "text": "Text TXT", "type": "TXT", "value": "1" }, { "id": "39", "parent": "New Lib", "text": "new 5", "type": "IMG", "value": "2" }, { "id": "34", "parent": "New Lib", "text": "Hi", "type": "FDR", "value": "3" }, { "id": "41", "parent": "34", "text": "Test URL Facebook", "type": "URL", "value": "4" }, { "id": "37", "parent": "34", "text": "Hi 2", "type": "FDR", "value": "5" }

but I get this instead:

Result

what am I doing wrong??

[WebMethod]
public static Array getChildren(string libraryID)
{
    SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString);
    con.Open();

    //Build root
    string[] documentArray = null;
    List<string> documentList = new List<string>();

    string getUserInfo = "select LibraryName from Document_Library_Names where Id =" + libraryID;
    SqlCommand getUserInfocmd = new SqlCommand(getUserInfo, con);
    string libraryName = Convert.ToString(getUserInfocmd.ExecuteScalar()).Trim();

    documentList.Add("{ \"id\": \"" + libraryName + "\", \"parent\": \"#\", \"text\": \"" + libraryName + "\", \"type\": \"FDR\", \"value\": \"0\" }");

    //Getting documents
    string strGetDocuments = "Select * from Documents where LID =" + libraryID + "  order by DisplayOrder ASC";
    SqlCommand getDocumentsCMD = new SqlCommand(strGetDocuments, con);
    getDocumentsCMD.ExecuteNonQuery();

    DataTable dt = new DataTable();
    SqlDataReader sqlDR = getDocumentsCMD.ExecuteReader();
    dt.Load(sqlDR);
    sqlDR.Close();

    if (dt != null)
    {
        if (dt.Rows.Count > 0)
        {
            //Build the string
            foreach (DataRow row in dt.Rows)
            {
                //Getting the data
                string ID = row[0].ToString().Trim();
                string type = row[2].ToString().Trim();
                string name = row[3].ToString().Trim();
                string parentFolder = row[4].ToString().Trim();
                string displayOrder = row[5].ToString().Trim();
                string extension = row[8].ToString().Trim();

                //Get parentFolder ID
                string parentFolderID = "0";
                if (parentFolder != "")
                {
                    string strParentFolderID = "Select ID from Documents where Name=@Name and Type=0";
                    SqlCommand strParentFolderIDcmd = new SqlCommand(strParentFolderID, con);
                    strParentFolderIDcmd.Parameters.AddWithValue("@Name", parentFolder);
                    parentFolderID = Convert.ToString(strParentFolderIDcmd.ExecuteScalar());
                }
                else
                {
                    parentFolderID = libraryName;
                }
                documentList.Add(" { \"id\": \"" + ID + "\", \"parent\": \"" + parentFolderID + "\", \"text\": \"" + name + "\", \"type\": \"" + extension + "\", \"value\": \"" + displayOrder + "\" }");
                documentArray = documentList.ToArray();
            }
            con.Close();
            //documentList = documentList + "]";
            return documentArray;
        }
        else
        {
            con.Close();
            return documentArray;
        }
    }
    else
    {
        con.Close();
        return documentArray;
    }
}

Javascript:

<script src="Scripts/jquery-3.6.1.js"></script>
<script src="Scripts/jstree.js"></script>
<link href="Scripts/themes/default/style.css" rel="stylesheet" />
    <div id="libraryTreeview">

    </div>

    <script type="text/javascript">
    
        const queryString = window.location.search;
        const urlParams = new URLSearchParams(queryString);
        const libraryID = urlParams.get('ID');
    
        $('#libraryTreeview').jstree({
            "core": {
                "data": {
                        type: "POST",
                        url: "LibraryFiles.aspx/getChildren",
                        data: '{"libraryID":"' + libraryID + '"}',
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (results) {
                            results.d;
                            alert(results.d);
                        },
                },
                "themes": {
                    dots: false,
                    "variant": "large",
                    "responsive": true
                },
        });
    </script>

I originally tried with 1 big long string but JSTree didn't like anything after the first folders ending "}" so I had to move to an Array.

Result from Google Inspect:

<div id="libraryTreeview" class="jstree jstree-1 jstree-default jstree-default-responsive jstree-default-large" role="tree" aria-multiselectable="true" tabindex="0" aria-activedescendant="j1_2" aria-busy="false"><ul class="jstree-container-ul jstree-children jstree-no-dots" role="group"><li role="none" id="j1_1" class="jstree-node  jstree-leaf"><i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor" href="#" tabindex="-1" role="treeitem" aria-selected="false" aria-level="1" id="j1_1_anchor"><i class="jstree-icon jstree-themeicon" role="presentation"></i>{ "id": "New Lib", "parent": "#", "text": "New Lib", "type": "FDR", "value": "0" }</a></li><li role="none" id="j1_2" class="jstree-node  jstree-leaf"><i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor" href="#" tabindex="-1" role="treeitem" aria-selected="false" aria-level="1" id="j1_2_anchor"><i class="jstree-icon jstree-themeicon" role="presentation"></i> { "id": "40", "parent": "New Lib", "text": "Text TXT", "type": "TXT", "value": "1" }</a></li><li role="none" id="j1_3" class="jstree-node  jstree-leaf"><i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor" href="#" tabindex="-1" role="treeitem" aria-selected="false" aria-level="1" id="j1_3_anchor"><i class="jstree-icon jstree-themeicon" role="presentation"></i> { "id": "39", "parent": "New Lib", "text": "new 5", "type": "IMG", "value": "2" }</a></li><li role="none" id="j1_4" class="jstree-node  jstree-leaf"><i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor" href="#" tabindex="-1" role="treeitem" aria-selected="false" aria-level="1" id="j1_4_anchor"><i class="jstree-icon jstree-themeicon" role="presentation"></i> { "id": "34", "parent": "New Lib", "text": "Hi", "type": "FDR", "value": "3" }</a></li><li role="none" id="j1_5" class="jstree-node  jstree-leaf"><i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor" href="#" tabindex="-1" role="treeitem" aria-selected="false" aria-level="1" id="j1_5_anchor"><i class="jstree-icon jstree-themeicon" role="presentation"></i> { "id": "41", "parent": "34", "text": "Test URL Facebook", "type": "URL", "value": "4" }</a></li><li role="none" id="j1_6" class="jstree-node  jstree-leaf jstree-last"><i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor" href="#" tabindex="-1" role="treeitem" aria-selected="false" aria-level="1" id="j1_6_anchor"><i class="jstree-icon jstree-themeicon" role="presentation"></i> { "id": "37", "parent": "34", "text": "Hi 2", "type": "FDR", "value": "5" }</a></li></ul></div>

edited Dec 9, 2022 at 17:15

asked Dec 9, 2022 at 16:55

TimEdwards

33 bronze badges

Post actual code/results, not images.

Pointy
– Pointy

2022-12-09 16:56:56 +00:00
Commented Dec 9, 2022 at 16:56
Also you'd probably find things much easier if you were to build a native C# data structure and then use a standard JSON stringify library to create the content for the client. Doing it by hand is very error prone and it'll make maintenance seriously tedious.

Pointy
– Pointy

2022-12-09 16:59:26 +00:00
Commented Dec 9, 2022 at 16:59
@Pointy I've added the Google Inspect result at the bottom. What more code would you like? I'm pretty new to all of this but will gladly give any more code you need. I really need to get this fixed as deadlines are looming! I really appreciate the help.

TimEdwards
– TimEdwards

2022-12-09 17:16:18 +00:00
Commented Dec 9, 2022 at 17:16
Jstree expect an json array like: [id: nodeId, text: nodeText, icon: nodeIcon, data: [customDataHere] or Simple String, state: [opened: boolean, selected: boolean], li_attr:[subset of html attr], a_attr:[subset of anchor attr], children: false|nested structure like this]

Francisco
– Francisco

2022-12-09 17:56:27 +00:00
Commented Dec 9, 2022 at 17:56
@Francisco I’ll try that thanks. I wasn’t expecting to have to change the string. Do I need square brackets at the start and end of each line?

TimEdwards
– TimEdwards

2022-12-09 18:30:01 +00:00
Commented Dec 9, 2022 at 18:30

| Show 3 more comments

0 Your Answer

Sign up or log in

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.

Collectives™ on Stack Overflow

JSTree not populating properly from JSON Array. If I return a single String it works but not from my Array. Where am I going wrong?

0

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

0

Know someone who can answer? Share a link to this question via email, Twitter, or Facebook.

Your Answer

Sign up or log in

Post as a guest

Linked