在层次结构中构建JavaScript中的数据

时间:2017-07-20 21:27:05

标签: javascript arrays hashmap set hierarchical-data

我有以下来自服务的字符串表:

  

A6-123 A5-234 A4-345 A3-456 A2-567

     

A6-123 A5-234 A4-678 A3-789 A2-890

     

A6-123 A5-456 A4-011 A3-021 A2-015

     

A6-234 A5-456 A4-567 A3-678 A2-789

[{
            "a": "A2-567",
            "an": "NAME1",
            "b": "A3-456",
            "bn": "NAME2",
            "c": "A4-345",
            "cn": "NAME3",
            "d": "A5-234",
            "dn": "NAME4",
            "e": "A6-123",
            "en": "NAME5"
        },
        {
            "a": "A2-890",
            "an": "NAME6",
            "b": "A3-789",
            "bn": "NAME7",
            "c": "A4-678",
            "cn": "NAME8",
            "d": "A5-234",
            "dn": "NAME4",
            "e": "A6-123",
            "en": "NAME5"
        }]

我正在考虑如下构建它,所以我可以用一种方式显示它

root: {"A6-123", "A6-234", A6-....}



 data: [
        {"k":"A6-123","n":"Name5", children:{"A5-234", "A5-456"},
        {"k":"A5-234","n":"Name4", children:{"A4-345", "A4-678"},
        {"k":"A2-567","n":"Name1", children:{}},
         ... could be others  }
]

我想将所有元素映射到层次结构中。上述结构不是必需的,但认为这是最好的。

唯一的缺点是当我必须查找数据中的下一个元素时。在java中,我会使用HashMap并将k拉入密钥。

寻找建议。

某些显示选项可能如下所示(但我不想使用pacakge想要构建函数): http://ivantage.github.io/angular-ivh-treeview/

不同之处在于我的数据将缩进为5级A6-A2。

2 个答案:

答案 0 :(得分:0)

    $scope.root = [];
    $scope.data = [];


$scope.loadDataToMemory = function (data) {

        angular.forEach(data, function (value, key) {

            if ($.inArray(value.e, $scope.root) === -1) {
                $scope.root.push(value.e);
            }

            addToMap(value.a, value.an, "");
            addToMap(value.b, value.bn, value.a);
            addToMap(value.c, value.cn, value.b);
            addToMap(value.d, value.dn, value.c);
            addToMap(value.e, value.e, value.d);
        });
    }

    addToMap = function (pKey, pName, pChild) {
        if (!$scope.data[pKey]) {
            cSet = [];
            $scope.data[pKey] = { name: pName, children: cSet };
        } else {
            if ($.inArray(pChild, $scope.data[pKey].children) === -1) {
                $scope.data[pKey].children.push(pChild);
            }
        }
    }

答案 1 :(得分:0)

为了为所有节点构建树结构和哈希表,您可以迭代给定的字符串,拆分它们并在临时对象中为每个节点申请一个新的对象(如果该节点不存在)。

最后,您将获得一个包含根节点和嵌套结构的所有节点的数组。



function generateTree(array) {
    var hash = {},                                      // reference to all nodes
        tree = [],                                      // result in tree structure
        temp = { _: tree };                             // collecting object

    array.forEach(function (line) {
        line.split(' ').reduce(function (r, k, i, kk) {
            if (!r[k]) {                                // check if key exists
                r[k] = { _: [] };                       // if not create new object
                hash[k] = { label: k };                 // and hash
                if (i + 1 !== kk.length) {              // if node is not last leaf
                    hash[k].children = r[k]._;          // generate children
                }
                r._.push(hash[k]);                      // push node to children prop
            }
            return r[k];                                // take node with key
        }, temp);                                       // for next iteration
    });
    return { tree: tree, hash: hash };
}

var data = ['A6-123 A5-234 A4-345 A3-456 A2-567', 'A6-123 A5-234 A4-678 A3-789 A2-890', 'A6-123 A5-456 A4-011 A3-021 A2-015', 'A6-234 A5-456 A4-567 A3-678 A2-789'];

console.log(generateTree(data));

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