javascript - 在javascript中从json数组构建树，没有父键但有前缀

Question

如何通过 JavaScript 中的 json 数组构建树，没有父键或任何引用 ID，但通过匹配前缀 "- "？

前缀随树的深度递增。例如

"- " = level one
"- - " = level two
"- - - " = level three
...

有几个类似的问题，但尚未找到相关答案。

到目前为止，我已经做了如下的事情:

var $json = [
  { "id":"11", "text":"CatOne" },
  { "id":"12", "text":"- CatOneSubCat1" },
  { "id":"13", "text":"- CatOneSubCat2" },
  { "id":"14", "text":"- - CatOneSubCat2SubCat1" },
  { "id":"15", "text":"- - CatOneSubCat2SubCat2" },
  { "id":"16", "text":"- CatOneSubCat3" },
  { "id":"17", "text":"CatTwo" },
  { "id":"18", "text":"CatThree" },
  { "id":"19", "text":"CatFour" },
  { "id":"20", "text":"- CatFourSubCat1" },
  { "id":"21", "text":"- CatFourSubCat2" },
  { "id":"22", "text":"CatFive" }
];

$(document).ready(function(){
  var $arr = [];
  var $str = "";
  var $prefix = "- "; 

  $.each( $json, function( key, value ) {
    value.children = [];
    // TODO: additional prefix should be appended upon the depth of tree
    if(!value.text.startsWith($prefix)) {
    	$arr.push(value);
    }
    else {
    	$arr[$arr.length - 1].children.push(value);
    }
  });
  $("#mypre").text(JSON.stringify($arr, null, 2));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre id="mypre"></pre>

上面代码片段的结果:

[
    { "id":"11", "text":"CatOne", "children":[
        { "id":"12", "text":"- CatOneSubCat1", "children":[] },
        { "id":"13", "text":"- CatOneSubCat2", "children":[] },
        { "id":"14", "text":"- - CatOneSubCat2SubCat1", "children":[] },
        { "id":"15", "text":"- - CatOneSubCat2SubCat2", "children":[] },
        { "id":"16", "text":"- CatOneSubCat3", "children":[] }
    ] },
    { "id":"17", "text":"CatTwo", "children":[] },
    { "id":"18", "text":"CatThree", "children":[] },
    { "id":"19", "text":"CatFour", "children":[
        {"id":"20", "text":"- CatFourSubCat1", "children":[] },
        {"id":"21", "text":"- CatFourSubCat2", "children":[] }
    ] },
    { "id":"22", "text":"CatFive", "children":[] }
]

预期结果:

[
    { "id":"11", "text":"CatOne", "children":[
        { "id":"12", "text":"- CatOneSubCat1", "children":[] },
        { "id":"13", "text":"- CatOneSubCat2", "children":[
            { "id":"14", "text":"- - CatOneSubCat2SubCat1", "children":[] },
            { "id":"15", "text":"- - CatOneSubCat2SubCat2", "children":[] }
        ]},
        { "id":"16", "text":"- CatOneSubCat3", "children":[] }
    ] },
    { "id":"17", "text":"CatTwo", "children":[] },
    { "id":"18", "text":"CatThree", "children":[] },
    { "id":"19", "text":"CatFour", "children":[
        { "id":"20", "text":"- CatFourSubCat1", "children":[] },
        { "id":"21", "text":"- CatFourSubCat2", "children":[] },
    ] },
    { "id":"22", "text":"CatFive", "children":[] }
]

Answer 1

您可以使用数组作为最后插入的关卡对象的引用，并在检查关卡时迭代给定的数组。

var data = [{ id: "11", text: "CatOne" }, { id: "12", text: "- CatOneSubCat1" }, { id: "13", text: "- CatOneSubCat2" }, { id: "14", text: "- - CatOneSubCat2SubCat1" }, { id: "15", text: "- - CatOneSubCat2SubCat2" }, { id: "15a", text: "- - -     extra space" }, { id: "16", text: "- CatOneSubCat3" }, { id: "17", text: "CatTwo" }, { id: "18", text: "CatThree" }, { id: "19", text: "CatFour" }, { id: "20", text: "- CatFourSubCat1" }, { id: "21", text: "- CatFourSubCat2" }, { id: "22", text: "CatFive" }],
    tree = function (array) {
        var levels = [{}];
        data.forEach(function (a) {
            var level = Math.floor(a.text.match(/^(- )*/)[0].length / 2);
            levels.length = level + 1;
            levels[level].children = levels[level].children || [];
            levels[level].children.push(a);
            levels[level + 1] = a;
        });
        return levels[0].children;
    }(data);
  
console.log(tree);

.as-console-wrapper { max-height: 100% !important; top: 0; }