UI Tree load Object Json

[jlivio]

Hi All!

This is my 1st post, i´m evaluating this component's and i have a question that may be easy.

Trying to integrate with SharePoint a Tree object, but having problems getting the data for binding. This is my main code thar return a Json object

Object Array in Json Format "deps"

Code:

function getDepartamentos() {
        var context = new SP.ClientContext("/");
        var list = context.get_web().get_lists().getByTitle("Departamentos");

        var viewXml = "<View><RowLimit>1200</RowLimit></View>";
        var query = new SP.CamlQuery();
        query.set_viewXml(viewXml);
        var items = list.getItems(query);
        context.load(items, "Include(DepId,DepParentId,Title)");

        function onLoaded() {
            var deps = [];
            var itemsCount = items.get_count();
            for (var i = 0; i < itemsCount; i++) {
                var item = items.itemAt(i);
                var dep = JSON.stringify(item.get_fieldValues());
                deps.push(dep);
            }

            return deps;
        }

        context.add_requestSucceeded(onLoaded);

        function onFailure() {

        }

        context.add_requestFailed(onFailure);
        context.executeQueryAsync();

        $("#tt").tree({
       
        });
    }

I have another code that get's the Id and Parent

Code:

unction convertToTree(rows) {
    function exists(rows, parentId) {
        for (var i = 0; i < rows.length; i++) {
            if (rows[i].id == parentId) return true;
        }
        return false;
    }

    var nodes = [];
    // get the top level nodes
    var row;
    var i;
    for (i = 0; i < rows.length; i++) {
        row = rows[i];
        if (!exists(rows, row.parentId)) {
            nodes.push({
                id: row.id,
                text: row.name
            });
        }
    }

    var toDo = [];
    for (i = 0; i < nodes.length; i++) {
        toDo.push(nodes[i]);
    }
    while (toDo.length) {
        var node = toDo.shift();	// the parent node
        // get the children nodes
        for (i = 0; i < rows.length; i++) {
            row = rows[i];
            if (row.parentId == node.id) {
                var child = { id: row.id, text: row.name };
                if (node.children) {
                    node.children.push(child);
                } else {
                    node.children = [child];
                }
                toDo.push(child);
            }
        }
    }
    return nodes;
}

How can i load this in? without a URL

 $("#tt").tree({
       
 });

Thank You
Joao

[stworthy]

The 'loadFilter' function give you the opportunity to convert original XML to the standard tree json data.

Code:

$('#tt').tree({
	loadFilter: function(data, parent){
		var treeData = ... // convert original 'data' to the tree json format
		return treeData;
	}
})

[jlivio]

Hi!, thanks for helping.

After "loadFilter:" nothing runs and i have no JavaScript error, any more suggestion? missing something?

I think without the "url:" something get's wrong, or I'm wrong

Code:

    ExecuteOrDelayUntilScriptLoaded(function () {
        var context = new SP.ClientContext("/");
        var list = context.get_web().get_lists().getByTitle("Departamentos");

        var viewXml = "<View><RowLimit>1200</RowLimit></View>";
        var query = new SP.CamlQuery();
        query.set_viewXml(viewXml);
        var items = list.getItems(query);
        context.load(items, "Include(DepId,DepParentId,Title)");

        var deps = [];

        function onLoaded() {
            $('#tt').tree({
                loadFilter: function(data, parent) {
                    var itemsCount = items.get_count();
                    for (var i = 0; i < itemsCount; i++) {
                        var item = items.itemAt(i);
                        data = JSON.stringify(item.get_fieldValues());
                        deps.push(data);
                    }
                    return data;
                }
            });
        }

        context.add_requestSucceeded(onLoaded);

        function onFailure() {

        }

        context.add_requestFailed(onFailure);
        context.executeQueryAsync();
    }, "sp.js");

[stworthy]

First of all, you must get the data source by setting the 'data' or 'url' property. If the data format from the data source is not recognized by tree, you need to use the 'loadFilter' function to convert it.

Code:

$('#tt').tree({
  url: ...
  // data: ...
  loadFilter: function(data,parent){
    return data;
  }
});

Please show the sample data from your 'url' or 'data'.

[jlivio]

Hi, i can query the data now, but can i change the Field names in this sample?
http://www.jeasyui.com/tutorial/tree/tree6.php

My one is

Code:

 "{"DepId":7,"DepParentId":3,"Title":"OTT"}"

So changes to

Code:

        function exists(rows, parentId) {
            for (var i = 0; i < rows.length; i++) {
                if (rows[i].DepId === parentId) return true;
            }
            return false;
        }

        var nodes = [];
        // get the top level nodes
        for (var i = 0; i < rows.length; i++) {
            var row = rows[i];
            if (!exists(rows, row.DepParentId)) {
                nodes.push({
                    id: row.DepId,
                    text: row.Title
                });
            }
        }

        var toDo = [];
        for (var i = 0; i < nodes.length; i++) {
            toDo.push(nodes[i]);
        }
        while (toDo.length) {
            var node = toDo.shift();    // the parent node
            // get the children nodes
            for (var i = 0; i < rows.length; i++) {
                var row = rows[i];
                if (row.DepParentId === node.id) {
                    var child = { id: row.DepId, text: row.Title };
                    if (node.children) {
                        node.children.push(child);
                    } else {
                        node.children = [child];
                    }
                    toDo.push(child);
                }
            }
        }
        return nodes;
    }

But give me error that row.DepParentId or rows[xxxx].DepId is UNDEFINED

Jesus, simple things can get complicated  

Working in Fiddle
https://jsfiddle.net/0drgksmd/3/

[stworthy]

Please refer to this example https://jsfiddle.net/0drgksmd/5/

[jlivio]

Thank you, I fixed with var x = "[" + deps + "]" then JSON.Parse() to get object objet not objet<array>