angular json 解析和数据处理

Posted 2021-05-26 Cluster Note

...

html

<d-button (btnClick)="HuGet()">huzh Get</d-button>

<h5 class="text-muted">Standard: Single Select</h5>
<div class="row">
  <div class="col-md-5" style="font-size: 0">
    <d-tree-select
      placeholder="Standard Input"
      [treeData]="data1"
      [expandTree]="true"
      [(ngModel)]="value1"
      (valueChanged)="valueChanged($event)"
      (ngModelChange)="showSelected($event)"
      style="width: 280px"
    ></d-tree-select>
  </div>
</div>

ts

import {Component, OnInit} from \'@angular/core\';
import {HttpClient} from \'@angular/common/http\';
import {DValidateRules} from \'ng-devui/form\';
import {of} from \'rxjs\';
import {delay, map} from \'rxjs/operators\';


interface Ihu {
  title: string;
  id: string;
}

interface IIhu extends Ihu {
  title: string;
  children: Ihu[];
  id: string;
}


interface IIIhu {
  data: {
    sections: [
      {
        sectionId: string,
        name: string,
        items: [
          {
            id: string,
            name: string,
          }
        ]
      }
    ]
  };
}


@Component({
  selector: \'app-huzh\',
  templateUrl: \'./huzh.component.html\',
  styleUrls: [\'./huzh.component.scss\']
})
export class HuzhComponent implements OnInit {
  ngOnInit() {
    console.log(\'huzh\');     // 传入的数据
    this.HuGet();
  }

  Idd: Ihu = {title: \'\', id: \'\'};
  IIdd: IIhu = {title: \'\', children: [], id: \'\'};
  data2 = [];
  data1 = [];
  value1 = {
    \'title\': \'g1s1\',
    \'id\': \'1\'
  };

  // 固定值,直接推给 data1, 没有问题,测试数据
  // data3 = {
  //   \'data\': {
  //     \'projectId\': \'089ebe99-6360-41a6-bdfd-847ae77e6c0a\',
  //     \'appId\': \'7a519829-414d-47c7-82e8-ee3ae0be4690\',
  //     \'name\': \'huzh-测试\',
  //     \'iconUrl\': \'https://coop.xxx.com:443/file/mdpub/customIcon/0_lego.svg\',
  //     \'color\': \'#00bcd4\',
  //     \'desc\': \'\',
  //     \'sections\': [
  //       {
  //         \'sectionId\': \'11\',
  //         \'name\': \'g1\',
  //         \'items\': [
  //           {
  //             \'id\': \'22\',
  //             \'name\': \'g1s1\',
  //             \'type\': 0,
  //             \'iconUrl\': \'https://coopera.xxx.com:443/file/mdpub/customIcon/hr_workbench.svg\',
  //             \'status\': 1
  //           },
  //           {
  //             \'id\': \'33\',
  //             \'name\': \'g1s2\',
  //             \'type\': 0,
  //             \'iconUrl\': \'https://cooper.xxx.com:443/file/mdpub/customIcon/1_0_home.svg\',
  //             \'status\': 1
  //           }
  //         ]
  //       },
  //       {
  //         \'sectionId\': \'44\',
  //         \'name\': \'g2\',
  //         \'items\': [
  //           {
  //             \'id\': \'55\',
  //             \'name\': \'g2s1\',
  //             \'type\': 0,
  //             \'iconUrl\': \'https://coop.xxx.com:443/file/mdpub/customIcon/1_0_home.svg\',
  //             \'status\': 1
  //           },
  //           {
  //             \'id\': \'hu66\',
  //             \'name\': \'g2s2\',
  //             \'type\': 0,
  //             \'iconUrl\': \'https://coop.xxx.com:443/file/mdpub/customIcon/1_0_home.svg\',
  //             \'status\': 1
  //           }
  //         ]
  //       }
  //     ]
  //   },
  //   \'success\': true,
  //   \'error_code\': 1
  // };

  ddd: IIIhu = {
    data: {
      sections: [
        {
          sectionId: \'\',
          name: \'\',
          items: [
            {
              id: \'\',
              name: \'\',
            }
          ]
        }
      ]
    }
  };

  constructor(private http: HttpClient) {
  }


  HuGet(): void {
    // 先用变量接住http resp,再赋值
    // devui的接口需要传定值,http 直接获取的值如果push到 data1中,显示不了数据
    // this.http.get<IIIhu> 这种写法可能是必须的,可以直接在resp中使用 \'.propertie\' 访问,否则报错
    // 先定类型,在处理
    console.log(\'hello\');

    this.http.get<IIIhu>(\'http://127.0.0.1:4200/api/v1/open/app/get?appKey=b5e55ba6e1&sign=ZjBhMjdjMjM3O假的GI3NGI5ZwZWQwZTI5OTc0NjNkYWNhNjU0ZjAzMGRiMzc5MzZ0MDc5OTE1NA==\').subscribe(
      (data: IIIhu) => {
        this.ddd = {
          data: {
            sections: [
              {
                sectionId: \'\',
                name: \'\',
                items: [
                  {
                    id: \'\',
                    name: \'\',
                  }
                ]
              }
            ]
          }
        };
        this.ddd = data;
        console.log(\'now ddd=>\', this.ddd);
        //置空否则点击按钮,否则一直增加
        this.data1 = [];
        this.data2 = [];
        this.ddd.data.sections.forEach(
          (value, index, array) => {
            this.IIdd = {
              id: \'\',
              title: \'\',
              children: []
            };
            this.IIdd.title = value.name;
            this.IIdd.id = value.sectionId;
            value.items.forEach(
              (value2, index1, array1) => {
                this.Idd = {id: \'\', title: \'\'};
                this.Idd.title = value2.name;
                this.Idd.id = value2.id;
                this.IIdd.children.push(this.Idd);
              }
            );
            this.data2.push(this.IIdd);
          }
        );
        console.log(\'after\');
        console.log(\'last\', this.data2);
        this.data1 = this.data2;
      }
    );
  }



//   接data3
//   HuD(): void {
//     this.data1 = [];
//     for (const item of this.data3.data.sections) {
//       this.IIdd = {
//         id: \'\',
//         title: \'\',
//         children: []
//       };
//       this.IIdd.title = item.name;
//       this.IIdd.id = item.sectionId;
//       const va = item;
//       for (let emm of va.items) {
//         this.Idd = {id: \'\', title: \'\'};
//         const mm = emm;
//         console.log(\'emm===>\', mm);
//         this.Idd.id = mm.id;
//         this.Idd.title = mm.name;
//         this.IIdd.children.push(this.Idd);
//       }
//       this.data1.push(this.IIdd);
//       console.log(this.data1);
//     }
//   }
//
  showSelected($event: Event) {
    console.log(\'event emitted: \', $event);
  }

  valueChanged($event) {
    console.log(\'value changed:\', $event);
  }

//
}