无法迭代从服务调用返回的 "dataList" 到 angular 9 应用程序中的 java 后端

Question

我有一些 json 数据是通过从 angular 应用程序到同一应用程序的服务调用从 java 后端服务（内部指南）作为数据列表返回的。我正在尝试遍历返回的 json 数据并将其推送到我创建的数组。但是，我无法完成此操作，因为当我尝试此操作时，浏览器控制台中不断出现“未定义”错误。

angular 应用程序中的服务调用如下所示：

export class HouseGuidelinesService {
   private readonly houseGuidelinesURL = 'http://localhost8200/homeguidelines';

   constructor(private http: HttpClient) {}

   getHouseData(houseCode: string): Observable<HouseGuidelineResponse[]> {
   
   return this.http.get<HouseGuidelineResponse[]>(this.houseGuidelinesURL + '/', {headers: {houseCodeList: houseCode}});    
}
}

将数据发送到 angular 应用程序中的服务调用的文件如下所示：

export class HouseComponent implements OnInIt {

houseData: HouseGuidelineResponse[];
houseList = [];

constructor(private: activatedRoute: ActivatedRoute, private router: Router, private houseSummaryService: HouseService, private houseGuidelinesService: HouseGuidelinesService ) {}

callHouseService(houseCodeList) {
  this.houseGuidelinesService.getHouseData(houseCodeList).subscribe(
  (data) => {
  this.houseData = data;
  console.log('display house guidelines', this.houseData);
  console.log('first house data: ', this.houseData[0])
  },
  (error) => {
  console.log('Error Getting House Policy Info!');
  }
  );


}
}

angular 应用程序中 HouseGuidelineResponse 的值对象如下所示：

export class HouseGuidelineResponse {
id: number;
name: string;
description: string;
settings: HouseSettings[];
}

服务调用有效，returns 数据为 json，在浏览器控制台中如下所示：

dataList: Array(3)
  0: {id:1, name: 'house risk 1', description: 'the best guidelines', settings: Array(1)}
  1: {id:2, name: 'house risk 2', description: 'the next best guidelines', settings: Array(1)}
  2: {id:3, name: 'house risk 3', description: 'the worst guidelines', settings: Array(1)}

当我尝试迭代或访问数据列表中的任何数据时，问题就出现了，我不能。例如，在 callHouseService(houseCodeList) 函数中，我做了类似的事情：

for (const value of this.houseData) {
 this.houseList.push({
 id: value.id
})
}

console.log(this.houseList)

我收到一条错误消息，指出“houseData 不可迭代”。

或者，当我尝试访问“dataList”的各个元素时，我被告知它们未定义。例如，下面的代码在浏览器控制台中显示为“未定义”。最后一个 console.log 语句也给出了这个错误“错误类型错误：无法读取未定义的属性（读取 'description'”）。

console.log('first element: ', this.houseData[0]);
console.log('maybe the first element: ', this.houseData[0].description);

我的问题是，如何正确迭代返回的 json“dataList”以获得对 json 的访问权限，以便我可以使用它，然后将其分配给我创建的值对象？

Answer 1

根据问题所附console.log('display house guidelines', this.houseData);的结果，我相信你的回复数据如下：

{
  "dataList": [
    {
      "id": 1,
      "name": "house risk 17",
      "description": "the best guidelines",
      "settings": [...]
    },
    {
      "id": 2,
      "name": "house risk 2",
      "description": "the next best guidelines",
      "settings": [...]
    },
    {
      "id": 3,
      "name": "house risk 3",
      "description": "the worst guidelines",
      "settings": [...]
    }
  ]
}

作为 getHouseData 方法 return 的 Observable<HouseGuidelineResponse[]> 值，您可以将 .pipe() 和 map rxjs 运算符添加到 return response.dataList 对于 Observable.

.service.ts

getHouseData(houseCode: string): Observable<HouseGuidelineResponse[]> {
   return this.http
     .get<HouseGuidelineResponse[]>(this.houseGuidelinesURL + '/', {
       headers: { houseCodeList: houseCode },
     })
     .pipe(map((response: any) => response.dataList));
}

Sample Demo on StackBlitz

无法迭代从服务调用返回的 "dataList" 到 angular 9 应用程序中的 java 后端

Cannot iterate over "dataList" returned from service call to java backend in angular 9 application

javascript

typescript

angular

angular9