Make a Tree view from JSON data using React JS

Question

First of all i am very new to React JS. So that i am writing this question. I am trying this for three days. What I have to do, make a list of category, like-

Category1
->Sub-Category1
->Sub-Category2
Categroy2
Category3
.
.
.
CategoryN

And I have this json data to make the listing

[
    {
        Id: 1,
        Name: "Category1",
        ParentId: 0,
    },
    {
        Id: 5,
        Name: "Sub-Category1",
        ParentId: 1,
    },
    {
        Id: 23,
        Name: "Sub-Category2",
        ParentId: 1,
    },
    {
        Id: 50,
        Name: "Category2",
        ParentId: 0,
    },
    {
        Id: 54,
        Name: "Category3",
        ParentId: 0,
    },
];

I have tried many open source examples, but their json data format is not like mine. so that that are not useful for me. I have build something but that is not like my expected result. Here is my jsfiddle link what i have done. https://jsfiddle.net/mrahman_cse/6wwan1fn/

Note: Every subcategory will goes under a category depend on "ParentId",If any one have "ParentId":0 then, it is actually a category, not subcategory. please see the JSON

Thanks in advance.

Kokovin Vladislav · Accepted Answer · 2016-07-01 12:45:19Z

You can use this code jsfiddle

This example allows to add new nested categories, and do nested searching.

code with comments:

var SearchExample = React.createClass({
    getInitialState: function() {
        return {
            searchString: ''
        };
    },
    handleChange: function(e) {
        this.setState({
            searchString: e.target.value.trim().toLowerCase()
        });
    },
    isMatch(e,searchString){
        return e.Name.toLowerCase().match(searchString)
    },
    nestingSerch(e,searchString){
        //recursive searching nesting
        return this.isMatch(e,searchString) || (e.subcats.length && e.subcats.some(e=>this.nestingSerch(e,searchString)));
    },
    renderCat(cat){
        //recursive rendering
        return (
            <li key={cat.Id}> {cat.Name}
                {(cat.subcats && cat.subcats.length) ? <ul>{cat.subcats.map(this.renderCat)}</ul>:""}
            </li>);
    },
    render() {
        let {items} = this.props;
        let {searchString} = this.state;
         //filtering cattegories
        if (searchString.length) {
            items = items.filter(e=>this.nestingSerch(e,searchString))
            console.log(items);
        };
        //nesting, adding to cattegories their subcatigories
        items.forEach(e=>e.subcats=items.filter(el=>el.ParentId==e.Id));
        //filter root categories
        items=items.filter(e=>e.ParentId==0);
        //filter root categories
        return (
            <div>
                <input onChange={this.handleChange} placeholder="Type here" type="text" value={this.state.searchString}/>
                <ul>{items.map(this.renderCat)}</ul>
            </div>
        );
    }
});

Collectives™ on Stack Overflow

Make a Tree view from JSON data using React JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related