angular json 解析和数据处理

...

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=" 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);
  }

//
}