Populating jQuery Tree with JSON data

Question

I am struggling from past two days to write a efficient algorithm from the json data to create the source object for jqxtree. The data I receive is in this form

var data = [
{
  number: 1001,
  title: "Toyota : Corolla : LE : 2014"
}, {
  number: 1002,
  title: "Toyota : Corolla : Sports : 2015"
}, {
  number: 1003,
  title: "Toyota : Corolla : LE : 2013"
}, {
  number: 1004,
  title: "Toyota : Camry: LE : 2013"
}]

Now I need to create a source object as

var source = [
    { label: "Toyota", 
items: [
    { label: "Corolla",
  items : [{ label : "LE"
        items : [{label : 2014}
             {label : 2013}]},
      { label : "Sports"
        items : [{label : 2015}]} ]},
    { label: "Camry",
  items : [{ label : "LE"
        items : {label : 2013}}]}
]
}
];

Can anyone please help me with this.

Thanks

cviejo · Accepted Answer · 2015-09-03T02:15:57.653

var data = [
  {
    number: 1001,
    title: "Toyota : Corolla : LE : 2014"
  },
  {
    number: 1002,
    title: "Toyota : Corolla : Sports : 2015"
  },
  {
    number: 1003,
    title: "Toyota : Corolla : LE : 2013"
  },
  {
    number: 1004,
    title: "Toyota : Camry : LE : 2013"
  }
];


//----------------------------------------------------
function format(data){

    var result = [];

    function recurse(items, depth, target){

        for (var i = 0; i < target.length; i++) {

            if(target[i].label == items[depth]){
                depth++;
                recurse(items, depth, target[i].items);
                return;
            }
        };

        var newItem = { label: items[depth] };
        target.push(newItem);
        depth++;

        if(depth < items.length){
            recurse(items, depth, newItem.items = []);
        }       
    }

    data.forEach(function(item){
        recurse(item.title.split(" : "), 0, result);
    });

    return result;
}

console.log(JSON.stringify(format(data), null, 2));

Output:

[
  {
    "label": "Toyota",
    "items": [
      {
        "label": "Corolla",
        "items": [
          {
            "label": "LE",
            "items": [
              {
                "label": "2014"
              },
              {
                "label": "2013"
              }
            ]
          },
          {
            "label": "Sports",
            "items": [
              {
                "label": "2015"
              }
            ]
          }
        ]
      },
      {
        "label": "Camry",
        "items": [
          {
            "label": "LE",
            "items": [
              {
                "label": "2013"
              }
            ]
          }
        ]
      }
    ]
  }
]

Can you please send me the JSFiddle link if you have executed it? — Anonymous, Sep 03 '15 at 02:06
Sure, [here](http://jsfiddle.net/cviejo/4ymLcqvw/). Also, just edited had one error. — cviejo, Sep 03 '15 at 02:17

Neil Villareal · Answer 2 · 2015-09-03T03:21:11.173

You might want to try this. Below is the fiddle link to the code for testing.

https://fiddle.jshell.net/8rqtxfyg/7/

Below is the code:

var items = [{
    number: 1001,
    title: "Toyota : Corolla : LE : 2014"
}, {
    number: 1002,
    title: "Toyota : Corolla : Sports : 2015"
}, {
    number: 1003,
    title: "Toyota : Corolla : LE : 2013"
}, {
    number: 1004,
    title: "Toyota : Camry : LE : 2013"
}];



console.log(JSON.stringify(parseTitle(items)));


function parseTitle(items) {
    var newItems = [];

    for(var i in items) {
        newItems = merge(newItems, mapper(items[i].title.split(":")));
    }

    return newItems;
}


function mapper(titles) {
    var item = {};

    item["label"] = titles.shift().replace(/^\s+|\s+$/g, "");
    if(titles.length > 0) {
        item["items"] = [];
        item["items"].push(mapper(titles));
    }

    return item;
}

function merge(items, itemToMerge, parentItem) {

    for(var i in items) {
        if(items[i]["label"] == itemToMerge["label"]) {
            if(items[i].hasOwnProperty("items") && itemToMerge.hasOwnProperty("items")) {
                items[i].items = merge(items[i].items, itemToMerge.items[0], items[i]);
            } else {
                parentItem.items.push(itemToMerge);
            }

            return items;
        }
    }

    items.push(itemToMerge);

    return items;
}

Below is the Console Output:

[{
    "label": "Toyota ",
    "items": [{
        "label": " Corolla ",
        "items": [{
            "label": " LE ",
            "items": [{
                "label": " 2014"
            }, {
                "label": " 2013"
            }]
        }, {
            "label": " Sports ",
            "items": [{
                "label": " 2015"
            }]
        }]
    }, {
        "label": " Camry",
        "items": [{
            "label": " LE ",
            "items": [{
                "label": " 2013"
            }]
        }]
    }]
}]

Populating jQuery Tree with JSON data

2 Answers2