javascript - 解析完整的json文件 typescript

Question

我想在 typescript/Angular 2 中查看和编辑 JSON 文件。 但我不能读 child

我的 JSON 看起来像这样:

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

我有我的接口(interface)

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

一切正常，但现在我想打印/修改模板上的所有属性 这是我的小问题

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

我只能读取“hasreferencement:false”等属性的第一个子项，否则我有 [Object Object] 在我的管道上，我尝试测试第二个子项是否存在对象，但它无法正常工作，如果我有了第三个 child 我只能用这个想法读第二个

我希望有人能帮助我^^ 谢谢

Answer 1

你得到 [Object Object] 因为 Angular 调用 toString() 你绑定(bind)到 View 的每个值，和 toString() 一个对象是 JS 返回 [Object Object](如果没有被覆盖)。

如果你的评论几乎是正确的，试试这个

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