CODEWITHSUNDEEP
javascriptjsonjstree
Victor Martinez
Victor Martinez

Reputation: 117

How to not repeat folders with JStree?

I have a JSON file with some data like this:

dataTree.json =  
[
    {
        "datap": "816816816816816818",
        "name": "image1.jpg",
        "url": "/files/folder1/test/d2e9c54ceedc9/image1.jpg",
        "path": "/files/folder1/test/image1.jpg",
        "size": 35969
    },

    {
        "datap": "857022de4fccdcb54623ff6185daae706a47140c",
        "name": "image2.jpg",
        "url": "/files/folder1/pruebas/85623ff6185d7140c/image2.jpg",
        "path": "/files/folder1/pruebas/image2.jpg",
        "size": 17689282
    },
    {
        "datap": "b260ec3250420c953a9db41897c34e3551620ec325035516256b2/image3.jpg",
        "path": "/files/folder1/test/image3.jpg",
        "size": 710632
    }
]

In this part I make the operation and the format for jstree

$.getJSON('/dataTree.json', function (response) {
            var fullTree = [];
            if (response == []){
                var refullTree = []
            } 
            else { 
                var refullTree = [{"id":null,"text":"Root","icon":"tree.png","state":null,"children":[]}]
            }

            function treeElements(element, tree){
                var parts = element.path.split("/");
                parts.splice(0,2);
                for (var k in parts) {
                    var count = 0
                    var part = parts[k];
                    if (part == "") part = "#";
                    var item = {"id":null, "text": part, "icon": icon(part), "children": []};
                    tree.push(item);
                    tree = item.children;

                }


                function icon(search){
                    if (search.indexOf(".png",".jpg") > -1){ 
                        return "glyphicon glyphicon-picture" }
                    else if(search.indexOf("jpg",".jpg") > -1){ 
                        return "glyphicon glyphicon-picture" }
                }

            }

            for (var i in response) {
                treeElements(response[i], fullTree);

            }
            refullTree[0]["children"] = fullTree

});

The result is output in this format:

[
    {
    "id": null,
    "text": "Root",
    "icon": "tree.png",
    "state": null,
    "children": [
        {
        "id": null,
        "text": "folder1",
        "children": [
        {
        "id": null,
        "text": "test",
            "children": [
             {
                "id": null,
                "text": "image1.jpg",
                "icon": "glyphicon glyphicon-picture",
                "children": []
             }
            ]
         }
      ]
  },
 {
    "id": null,
    "text": "folder1",
    "children": [
      {
        "id": null,
        "text": "pruebas",
        "children": [
          {
            "id": null,
            "text": "image2.jpg",
            "icon": "glyphicon glyphicon-picture",
            "children": []
          }
        ]
      }
    ]
  },
  {
    "id": null,
    "text": "folder1",
    "children": [
      {
        "id": null,
        "text": "test",
        "children": [
          {
            "id": null,
            "text": "image3.jpg",
            "icon": "glyphicon glyphicon-picture",
            "children": []
          }
        ]
      }
    ]
  }
]
}
]

This tree was produced by jstree, and the three folders have the same name. I do not want to create three folders with the same name, I want that when I find a folder that exists, the data is entered into the that existing folder.

current tree diagram

Instead, I want this:

desired tree diagram

Upvotes: 1

Views: 295

Answers (1)

vakata
vakata

Reputation: 3886

Here is a demo of how to parse this structure: http://jsfiddle.net/DGAF4/506/

Here is the actual parsing code (also visible in the fiddle);

var tmp = {}, i, j, k, l, p1, p2, fin = [];
for(i = 0, j = a.length; i < j; i++) {
    p1 = a[i].path.replace(/^\//,'').split('/');
    p2 = '';
    for(k = 0, l = p1.length; k < l; k++) {
        tmp[p2 + '/' + p1[k]] = {
            id : p2 + '/' + p1[k], 
            parent : p2 ? p2 : '#', 
            text : p1[k]
        };
        p2 += '/' + p1[k];
    }
    for(k in a[i]) {
        if(a[i].hasOwnProperty(k)) {
            tmp[a[i].path][k] = a[i][k];
        }
    }
    if(a[i].path.match(/(jpg|png|jpeg)$/)) {
        tmp[a[i].path].icon = "glyphicon glyphicon-picture";
    }
}
for(i in tmp) {
    if(tmp.hasOwnProperty(i)) {
        fin.push(tmp[i]);
    }
}
// fin contains the structure in a jstree compatible format

Upvotes: 1

Related Questions