如何在 Angular 7 中将索引 Json 转换为普通 Json 数组

Question

我从 API 端点获取数据如下

但我期望的输出只是一个对象数组，类似于

[{Crqnumber: "CRQ000000135318",
  approvalstatus: "Approved",
  changecoordinator: "Sariga Suresh",
  productname: "MSS (NextGen)",
  status: "Closed",
  statusreason: "Successful"},
 {Crqnumber: "CRQ000000135318",
  approvalstatus: "Approved",
  changecoordinator: "Sariga Suresh",
  productname: "MSS (NextGen)",
  status: "Closed",
  statusreason: "Successful"},
 {Crqnumber: "CRQ000000135318",
  approvalstatus: "Approved",
  changecoordinator: "Sariga Suresh",
  productname: "MSS (NextGen)",
  status: "Closed",
  statusreason: "Successful"}]

我决定使用 pipe() 和 map() 来实现这一点，但我被卡住了。我无法达到预期的效果。

我的服务是

export class CrqData{

constructor(private http: HttpClient){}

getCrqList(){
    return this.http.get<Crq[]>('http://d7598:8000/crqlist/').pipe(map((responseData=>{
        let temp: Crq[]=[];
        temp=responseData;
        return temp
    })));
}
}

我的组件ts文件

export class CrqComponent implements OnInit {

crqList = [];

constructor(private crqData:CrqData) { 
this.crqData.getCrqList().subscribe((data)=>{
  console.log(data)
}, (error)=>{
  console.log(error);
});
}

ngOnInit() {
}

}

我的组件html

<mat-card style="padding: 1.5%; margin: 1%;" *ngFor="let crq of crqList">
<mat-card-content>
  <div style="line-height: 20px;">
      <div style="float: left; font-weight: bold;">
          <p>CRQ No: {{crq.Crqnumber}}</p>
      </div>
      <div style="float: right; font-weight: bold;">
          <p style="float: left;padding-top: 1px;">
              <i class="material-icons" style="font-size: 12px;">fiber_manual_record</i>
          </p>
          <p style="float: right;">{{crq.approvalstatus}}</p>
      </div>
  </div>
  <div style="clear: both; line-height: 6px; font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;">
      <p style="text-align: left;">Change coordinator: {{crq.changecoordinator}}</p>
      <p style="text-align: left;">Title: {{crq.productname}}</p>
  </div>
</mat-card-content>
</mat-card>

我的对象是

export interface Crq{
    Crqnumber: string;
    approvalstatus: string;
    changecoordinator: string;
    productname: string;
    status: string;
    statusreason: string;
}

Answer 1

我认为你必须从响应中得到 results 属性所以你必须将此方法修改为这样

export class CrqData{

constructor(private http: HttpClient){}

getCrqList(){
    return this.http.get<Crq[]>('http://d7598:8000/crqlist/').pipe(map((responseData=>{
        const { results } =responseData;
        return results
    })));
}
}

Answer 2

我找到了答案。我的服务 class 应该如下

export class CrqData{

constructor(private http: HttpClient){}

getCrqList(){
    return this.http.get<Crq[]>('http://d7598:8000/crqlist/').pipe(map((responseData=>{
        let temp: Crq[]=[];
        for(let data in responseData){
            for(let d in responseData[data]){
                console.log(responseData[data][d]);
                temp.push(responseData[data][d]);
            }
        }
        return temp
    })));
}
}

Answer 3

首先，您应该在 http.get 调用中更改您的类型。您没有收到 Crq[]，您收到的是一个包含 3 个属性的对象，其中一个属性 (results) 的类型为 Crq[].

因此您应该定义一个包含所有这 3 个属性的类型，如下所示：（您可以将其放在 export class CrqData { 行上方）

interface CrqResponse {
    count: number;
    error: number;
    results: Crq[];
}

现在，您可以在 http 请求中使用它并使用响应，如下所示：

getCrqList(){
    return this.http.get<CrqResponse>('http://d7598:8000/crqlist/').pipe(map((responseData=>{
        return responseData.response;
    })));
}

我还建议您在 error 属性不等于 0 时抛出错误，以便使用您的服务的实例可以捕获错误（如果有）。所以 getCrqList() 应该看起来像这样：

getCrqList() {
     return this.http.get<CrqResponse>('http://d7598:8000/crqlist/').pipe(switchMap((responseData=>{
        if(responseData.error !== 0) {
            return throwError(responseData.error);
        }
        else {
            return of(responseData.response);
        }
    })));

如何在 Angular 7 中将索引 Json 转换为普通 Json 数组

How to convert indexed Json to normal Json array in Angular 7

angular-pipe

angular-httpclient

angular7