简体   繁体   中英

Populating jQuery Tree with JSON data

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

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"
              }
            ]
          }
        ]
      }
    ]
  }
]

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"
            }]
        }]
    }]
}]

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM