1

I have a class named Leaf, and I'd like to make all nodes of a json response instances of Leaf. The json response looks like this:

JSON Response

{
    "name":"animal",
    "state":false,
    "children":[
        {
            "name":"cats",
            "state":false,
            "children":[
                {
                    "name":"tiger",
                    "state":false,
                },
                {
                    "name":"puma",
                    "state":false,
                    "children":[
                        {
                            "name":"babyPuma",
                            "state":true
                        }
                    ]
                }
            ]
        },
        {
            "name":"dogs",
            "state":false,
            "children":[
                {
                    "name":"pitbull",
                    "state":true
                },
                {
                    "name":"german",
                    "state":false,
                    "children":[
                        {
                            "name":"shepherd",
                            "state":true
                        }
                    ]
                }
            ]
        }
    ]
}

I am getting the response using observable and have learned to cast the first node:

http.service.ts snippet

getTreeData(): Observable<Leaf>{  
    var headers = new Headers();
    headers.append('Content-Type', 'application/json');
    return this.http.post('http://localhost:8000/',{ headers: headers ...})
        .map(res =>new Leaf(res.json()));//maybe I could do something here?
}

and here is my Leaf class just in case:

Leaf.ts

export class Leaf{
    name: string;
    state: string;
    treeData: Array<Leaf>;


    constructor(input:any){
        this.name = input.name;
        this.state = input.state;
        this.treeData = input.children;
    }

    toggleState() {
        if (this.state=='active'){
            this.state = 'inactive';
        }
        else {
            this.state = 'active'
        }
    }
}

My final goal is to get the json tree and represent them in a folder tree format. Is there a way to use map() to go through all nodes or combination of map() and some sort of traverser?

Nitzan Tomer
  • 155,636
  • 47
  • 315
  • 299
Arash
  • 522
  • 7
  • 24
  • Possible duplicate of [How do I cast a JSON object to a typescript class](http://stackoverflow.com/questions/22875636/how-do-i-cast-a-json-object-to-a-typescript-class) – Alexander Ciesielski Nov 01 '16 at 18:20
  • I had seen that question but my question here was how to take care of the nested tree and the recursive nature of my data. Although there are some overlap between the two questions I think, my question is asking for something specific to nested tree while the other is more broad on casting json. Thanks – Arash Nov 01 '16 at 18:36

1 Answers1

3

I'd first create an interface for the json data:

interface LeafJson {
    name: string;
    state: string;
    children?: LeafJson[];
}

And then use Array.map to create the children:

export class Leaf {
    name: string;
    state: string;
    treeData: Array<Leaf>;

    constructor(input: LeafJson){
        this.name = input.name;
        this.state = input.state;
        this.treeData = input.children ? input.children.map(item => new Leaf(item)) : [];
    }

    toggleState() {
        if (this.state=='active'){
            this.state = 'inactive';
        } else {
            this.state = 'active'
        }
    }
}

(code in playground)

Nitzan Tomer
  • 155,636
  • 47
  • 315
  • 299