如何使用JavaScript从JSON数据生成TreeView [英] How to generate Treeview from JSON data using javascript

问题描述

我正尝试从 JSON数据创建一个类似树状结构的树状图。结构很简单，但我得到的问题是将孩子分组在特定的父母身边。

例如，

输入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查看13'}]，'recordcount'：'4'}

现在，我想以下面的格式显示这些数据： b
$ b

• 演示表1
  
  
  
  • 演示视图11
  
  
  • 演示视图12
  
  
  • 演示视图13
  
  


• 演示表2
  
  
  
  • 演示视图21
  
  

在HTML中，我创建了一个div < div id =treeview>< / div> 。

现在使用javascript I必须用treeview列表填充这个div的innerHTML。

更新：子项目的数目计数应显示在父项目的括号中，例如示范表1（3）

任何帮助达到此目的将受到高度赞赏。

p>

manishekhawat

解决方案

看起来你想从这个结构中走出来：

  {
'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'
} 
  

到这一个：

  {
'Demo Sheet 1'：[
'Demo View 11'，
'Demo View 12'，
'Demo View 13'
]，
'Demo Sheet 2'：[
'Demo View 21'
] 
} 
  

我认为第一个地方是t o start是将你的JSON字符串反序列化为第一个对象，然后遍历'record'数组抽出每个元素并为每个唯一键创建一个新数组，或者如果该键已经存在则添加到现有数组。 '演示表1'）。一旦你完成了这些工作并丢弃了任何额外的数据，你应该得到一个类似于上面第二个数据结构的数据结构，这应该很容易生成标记。

编辑
以上例子（使用Douglas Crockford的 JSON2库，如下所示：

  var jsonObject = JSON.parse（jsonString / *原始的json数据* /）; 
 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）; 
} 
  

您现在拥有新的数据结构 - 您如何标记它完全取决于您！查看查看示例。

警告词：我建议在上述场景中添加一些错误处理，因为您不应该认为您收到的JSON数据会正确解析。

编辑2 我已更新小提琴以举例在DOM中显示它。将它添加到DOM的函数是递归的（适用于任何嵌套数组深度），因为我觉得像这样写它，但是转换初始JSON数据的函数不是，所以它并不重要。 ：）

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.

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

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

In HTML, I have created a div like <div id="treeview"></div>.

Now using javascript I have to populate this div's innerHTML with the treeview list.

UPDATE : Count of Number of child Items should be displayed in the brackets of Parent Item, e.g. Demo Sheet 1 (3)

Any help to achieve this will be highly appreciated.

Thanks,

manishekhawat

解决方案

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.

EDIT As an example of the above (using Douglas Crockford's JSON2 library, something like this:

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 fiddle for 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.

EDIT 2 I've updated the fiddle to 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. :)

这篇关于如何使用JavaScript从JSON数据生成TreeView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！