Question

我曾尝试在很多网站上查看并浏览了很多帖子，但仍然无法找到我要找的内容，或者至少无法实现它的工作。我有一个API响应，根据请求参数，它返回一个带有对象数组的对象（我能够处理），或者一个对象包含多个包含数组的对象。我能够从简单的表单中获取数据，但是包含多个对象的对象正在踢我的屁股。我也在Angular 4中这样做，以防万一有所作为。答案来自holiday api。

下面是完整的回复，没有过滤参数，减少一些物体，以至于没有击败死马。

{ "status": 200, "holidays": {
   "2016-01-01": [
  {
    "name": "Durin's Day",
    "date": "2016-01-01",
    "observed": "2016-01-01",
    "public": true
  }
],
"2016-02-23": [
  {
    "name": "Founder's Day",
    "date": "2016-02-23",
    "observed": "2016-02-23",
    "public": true
  }
],
"2016-02-29": [
  {
    "name": "Leap Day",
    "date": "2016-02-29",
    "observed": "2016-02-29",
    "public": false
  }
],
"2016-03-20": [
  {
    "name": "Weasel Stomping Day",
    "date": "2016-03-20",
    "observed": "2016-03-20",
    "public": false
  }
],
"2016-04-05": [
  {
    "name": "First Contact Day",
    "date": "2016-04-05",
    "observed": "2016-04-05",
    "public": false
  }
],
"2016-04-06": [
  {
    "name": "Second Contact Day",
    "date": "2016-04-06",
    "observed": "2016-04-06",
    "public": false
  }
],
"2016-05-10": [
  {
    "name": "Whacking Day",
    "date": "2016-05-10",
    "observed": "2016-05-10",
    "public": false
  }
],
"2016-10-31": [
  {
    "name": "Harry Potter Day",
    "date": "2016-10-31",
    "observed": "2016-10-31",
    "public": false
  }
],
"2016-11-24": [
  {
    "name": "Hogswatch",
    "date": "2016-11-24",
    "observed": "2016-11-24",
    "public": false
  }
],
"2016-12-23": [
  {
    "name": "Festivus",
    "date": "2016-12-23",
    "observed": "2016-12-23",
    "public": true
  }
],
"2016-12-25": [
  {
    "name": "Decemberween",
    "date": "2016-12-25",
    "observed": "2016-12-25",
    "public": false
  },
  {
    "name": "Winter Veil",
    "date": "2016-12-25",
    "observed": "2016-12-26",
    "public": true
  }
] 
} }

以下是使用的代码：

import { Component, OnInit, Input } from '@angular/core';
import { HolidayService } from '../holiday.service';
@Component({
  selector: 'app-holiday',
  templateUrl: './holiday.component.html',
  styleUrls: ['./holiday.component.css']
})
export class HolidayComponent implements OnInit {
  constructor(private _holiday: HolidayService) {     
  }
  holidaysObj: any;
  holidayArr: Array<{key: string, value: string}>;
  ngOnInit() {
  }
  holidayParams(country,month){    
  this._holiday.getHolidays(country.value,month.value)
  .subscribe(responseDa
  ta => {
      this.holidaysObj = responseData;
      console.log(responseData);
    }); 
    this.convertObj(this.holidaysObj);
  }
  convertObj(obj : any){
    for(const prop in obj){
      if(obj.hasOwnProperty(prop)){
        this.holidayArr.push(obj[prop]);
      }
    }
  }
}

当使用过滤参数调用响应时，它可以正常工作，例如'month'，并返回如下内容：

{
  "status": 200,
  "holidays": [
    {
      "name": "Festivus",
      "date": "2016-12-23",
      "observed": "2016-12-23",
      "public": true
    },
    {
      "name": "Decemberween",
      "date": "2016-12-25",
      "observed": "2016-12-25",
      "public": false
    },
    {
      "name": "Winter Veil",
      "date": "2016-12-25",
      "observed": "2016-12-26",
      "public": true
    }
  ]
}

Answer 1

您可以使用自定义管道来迭代对象，也可以从响应中提取holidays中的数据，如：

.map(res => res.json().holidays)

但在这里我不会这样做。

所以让我们创建自定义管道：

@Pipe({
  name: 'keys'
})
export class KeysPipe implements PipeTransform {
     transform(value: any, args?: any[]): any[] {
        // check there is value to iterate
        if(value) {
        // create instance vars to store keys and final output
        let keyArr: any[] = Object.keys(value),
            dataArr = [];

        // loop through the object,
        // pushing values to the return array
        keyArr.forEach((key: any) => {
            dataArr.push(value[key]);
        });
        // return the resulting array
        return dataArr;
        }
    }
}

然后您可以在模板中使用它，如：

<div *ngFor="let d of data?.holidays | keys">
  <div *ngFor="let a of d">
    {{a.name}}
    {{a.date}}
    <!-- rest of the properties -->
  </div>
</div>

这是一个

Demo

UPDATE：

或者，如果要使数据的格式与您接收的其他数据的格式相同，则可以操作响应。就像你提到的那样，首先需要一个if else语句来检查数据的格式。如果数据的格式与所讨论的格式类似，您可以执行以下操作以达到所需的结果：

.subscribe(data => {
   // add statuscode   
   this.data = {status:data.status,holidays:[]}      
   let keyArr: any[] = Object.keys(data.holidays);

   keyArr.forEach((key: any) => {
     // push values of each holiday
     this.data.holidays.push(data.holidays[key][0]);
   });
})

JSON响应具有更改键/值的对象

1 个答案:

Demo

UPDATE：

Demo