[英]Structuring data in JavaScript in a hierarchical fasion
I have the following table of strings coming from service: 我有下表来自服务的字符串:
A6-123 A5-234 A4-345 A3-456 A2-567 A6-123 A5-234 A4-345 A3-456 A2-567
A6-123 A5-234 A4-678 A3-789 A2-890 A6-123 A5-234 A4-678 A3-789 A2-890
A6-123 A5-456 A4-011 A3-021 A2-015 A6-123 A5-456 A4-011 A3-021 A2-015
A6-234 A5-456 A4-567 A3-678 A2-789 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"
}]
I was thinking to structure it as follow, so i can display it on a hierchcal way 我本来打算按照以下方式进行结构设计,所以可以按层次显示它
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 }
]
And I want to map all elements into a hierachy. 我想将所有元素映射到一个层次结构中。 The above structure is not required but thought that would be best. 以上结构不是必需的,但认为最好。
The only disadvantage is when i have to lookup the next element inside data. 唯一的缺点是当我必须在数据中查找下一个元素时。 In java i would have used a HashMap and pulled k into a key. 在Java中,我会使用HashMap并将k拉入一个键。
Looking for suggestions. 寻找建议。
Some display option could look as follow (but i do not want to use a pacakge want to build the functions): http://ivantage.github.io/angular-ivh-treeview/ 一些显示选项可能如下所示(但我不想使用pacakge来构建功能): http : //ivantage.github.io/angular-ivh-treeview/
The difference is that my data will be indented with 5 levels A6-A2. 区别在于我的数据将使用5级A6-A2缩进。
$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);
}
}
}
For building a tree structure and a hash table for all nodes, you could iterate the given strings, split them and apply for every node a new objetc in the temporary object, if the node not exist. 为了为所有节点构建树结构和哈希表,您可以迭代给定的字符串,将其拆分,然后为每个节点在临时对象(如果不存在)中应用新的objetc。
At the end, you get an array with all nodes at the root and the nested structue. 最后,您将获得一个数组,其中所有节点都位于根目录和嵌套结构中。
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; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.