如何使用 javascript 从 JSON 数据生成 Treeview
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8560960/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to generate Treeview from JSON data using javascript
提问by manishekhawat
I am trying to create a treeview like structure from JSON data. Structure is quite simple, but the problem I am getting is while grouping the children under particular parents.
我正在尝试从JSON 数据创建一个类似树状视图的结构。结构非常简单，但我遇到的问题是将孩子分组到特定的父母之下。
For example,
例如，
Input JSON data is :{'record':[{'sn':'Demo Sheet 1','vn':'Demo View 1'},{'sn':'Demo Sheet 11','vn':'Demo View 12'},{'sn':'Demo Sheet 2','vn':'Demo View 21'},{'sn':'Demo Sheet 1','vn':'Demo View 13'}],'recordcount':'4'}
输入 JSON 数据为：{'record':[{'sn':'Demo Sheet 1','vn':'Demo View 1'},{'sn':'Demo Sheet 11','vn':'Demo View 12'},{'sn':'Demo Sheet 2','vn':'Demo View 21'},{'sn':'Demo Sheet 1','vn':'Demo View 13'}], '记录数'：'4'}
Now, I want to display this data in below format :
现在，我想以以下格式显示此数据：
- Demo Sheet 1
- Demo View 11
- Demo View 12
- Demo View 13
- Demo Sheet 2
- Demo View 21
- 演示表 1
- 演示视图 11
- 演示视图 12
- 演示视图 13
- 演示表 2
- 演示视图 21
In HTML, I have created a div like <div id="treeview"></div>.
在 HTML 中，我创建了一个像<div id="treeview"></div>.
Now using javascript I have to populate this div's innerHTML with the treeview list.
现在使用javascript我必须用树视图列表填充这个div的innerHTML。
UPDATE : Count of Number of child Items should be displayed in the brackets of Parent Item, e.g. Demo Sheet 1 (3)
更新：子项数的计数应显示在父项的括号中，例如演示表 1 (3)
Any help to achieve this will be highly appreciated.
任何帮助实现这一目标将不胜感激。
Thanks,
谢谢，
manishekhawat
马尼什卡瓦
回答by chrisf
It looks like you want to go from this structure:
看起来你想从这个结构中去：
{
'record': [
{'sn':'Demo Sheet 1','vn':'Demo View 11'},
{'sn':'Demo Sheet 1','vn':'Demo View 12'},
{'sn':'Demo Sheet 2','vn':'Demo View 21'},
{'sn':'Demo Sheet 1','vn':'Demo View 13'}
],
'recordcount':'4'
}
to this one:
到这个：
{
'Demo Sheet 1': [
'Demo View 11',
'Demo View 12',
'Demo View 13'
],
'Demo Sheet 2': [
'Demo View 21'
]
}
I think the first place to start is to de-serialize your JSON string into the first object, then iterate over the 'record' array pulling out each element and creating a new array for each unique key, or adding to an existing array if that key already exists (e.g. 'Demo Sheet 1'). Once you've done that and discarded any extra data, you should end up with a data structure similar to the second one above, which should be very easy to generate mark-up for.
我认为首先开始是将您的 JSON 字符串反序列化为第一个对象，然后遍历“记录”数组，提取每个元素并为每个唯一键创建一个新数组，或者添加到现有数组中键已存在（例如“演示表 1”）。完成此操作并丢弃任何额外数据后，您应该最终得到类似于上面第二个的数据结构，它应该很容易生成标记。
EDITAs an example of the above (using Douglas Crockford's JSON2 library, something like this:
编辑作为上述示例（使用 Douglas Crockford 的JSON2 库，如下所示：
var jsonObject = JSON.parse(jsonString /* your original json data */);
var newArrays = {};
var records = jsonObject.record;
for (var i = 0; i < records.length; i++) {
if (!newArrays[records[i].sn]) {
newArrays[records[i].sn] = [];
}
newArrays[records[i].sn].push(records[i].vn);
}
You now have the new data structure - how you mark it up is entirely up to you! See this fiddlefor a working example.
您现在拥有了新的数据结构 - 如何标记它完全取决于您！有关工作示例，请参阅此小提琴。
Word of warning: I'd recommend adding some error handling to the above scenario, as you should never assume that the JSON data you're receiving will parse correctly.
警告：我建议在上述场景中添加一些错误处理，因为您永远不应该假设您收到的 JSON 数据会正确解析。
EDIT 2I've updated the fiddleto give an example of displaying it in the DOM. The function that adds it to the DOM is recursive (will work for any depth of nested arrays) just because I felt like writing it like that, but the function that transforms the initial JSON data isn't, so it doesn't really matter. :)
编辑 2我已经更新了小提琴以给出在 DOM 中显示它的示例。将它添加到 DOM 的函数是递归的（适用于任何深度的嵌套数组）只是因为我想这样写，但是转换初始 JSON 数据的函数不是，所以它并不重要. :)
