javascript - 使用 JSON 数据填充 jQuery 树

Question

从过去的两天开始，我一直在努力从 json 数据中编写一个有效的算法来为 jqxtree 创建源对象。我收到的数据是这种形式

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

现在我需要创建一个源对象

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

谁能帮我解决这个问题。

谢谢

Answer 1

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));

输出：

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

Answer 2

你可能想试试这个。下面是用于测试的代码的小提琴链接。

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

下面是代码：

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;
}

下面是控制台输出：

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