Parse complete json file typescript

Question

I want to view and edit a JSON file in typescript/Angular 2. But i can't read childs

My JSON looks like this :

{
    "site": {
        "listing":{
            "nbpage":10,
            "lengthcorps":320
        },
        "detail":{
            "sim":{
                "active":true,
                "nb":10
            }
        },
        "tri":{
            "default": {
                "type":"item",
                "sens":"item"
            },
            "options": ["options1","options2"]
        },
        "cc": {
            "nb": 0,
            "active":1
        },
        "hasreferencement":false
    }
}

I have my interfaces

export interface site {
    model: string;
    listing:listing;
    detail:detail;
    contact:contact;
    tri:tri;
    cc:cc;
    hasselection?:boolean;
    hasreferencement?:boolean;
}

export interface listing {
    nbpage?:number;
    type?:number;
    lengthcorps?:number;
}
export interface detail {
    type?:number;
    sim?:sim;
    lengthcoprs?:number;
    gallery?:boolean;
}
export interface tri {
    default?:defaulttri;
    options?:string[];
}

export interface cc {
    nb?:number;
    active?:number;
}
export interface sim{
    active?:boolean;
    nb?:number;
}

export interface defaulttri{
    type?:string;
    sens?:string;
}

All is working well, but now i want print/modify all attributes on my template And it's here my little problem

        <ul *ngFor="let item of uploadFile.site | JsonPipe3; let i=index">
          <li>{{ item.key }} => {{item.value }}</li>   
        </ul>

export class JsonPipe3 implements PipeTransform {
  transform(value, args:string[]) : any {
    let keys = [];
    let keys2 =[];
    for (let key in value) {
      keys.push({key: key, value: value[key]});
      /*
      if(this.isAnyObject(value[key])){
        for (let key2 in value[key]) {
          keys2.push({key: key2, value:value[key2]});
        }
      }
      */

    }
    //return [keys,keys2];
    return keys;
  }
  isAnyObject(value) {
    return value != null && (typeof value === 'object' || typeof value === 'function');
  } 
}

I can read only the first child of an attribute like ""hasreferencement":false" else i have [Object Object] On my pipe i tried a test if object exist on the second child but it's not working correctly and if I have a third child i can only read the second with this idea

I hope someone can help me ^^ Thanks

Answer 1

You're getting [Object Object] because angular calls toString() on each value you bind to the view, and toString() of an object is JS returns [Object Object] (if not overridden).

Your commented if is almost correct, try this one

transform(value, args:string[]) : any {
    let keys = [];
    let keys2 =[];
    for (let key in value) {
      if(this.isAnyObject(value[key])){
        for (let key2 in value[key]) {
          keys2.push({key: key2, value:value[key][key2]});// <-- instead of value:value[key2]
        }
      } else {
          keys.push({key: key, value: value[key]});
      }
    }
    return keys.concat(keys2); // <-- instead of [keys, keys2]
  }