html - How to generate Treeview from JSON data using javascript - Stack Overflow

admin管理员组

文章数量:1395780

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

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

• javascript
• html
• json
• treeview

Share Improve this question Follow edited Dec 19, 2011 at 12:31 manishekhawat asked Dec 19, 2011 at 11:54 manishekhawatmanishekhawat 71933 gold badges1212 silver badges1818 bronze badges 2

• 1 Is there a reason you want to use a <div>? I think nested <ul> elements would make much more semantic sense. – chrisfrancis27 Commented Dec 19, 2011 at 11:58
• @Chris, No particular reason, I have divided the page into division and thought of putting left hand side section for treeview. We can use ul too. – manishekhawat Commented Dec 19, 2011 at 12:06

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 1

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 remend 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. :)

本文标签： htmlHow to generate Treeview from JSON data using javascriptStack Overflow