用 Angular 解析传入的 json 并将其放入数组中

Question

我有一个传入的 json，如下所示：

{
    "results": [
        {
            "name": "Test",
            "st": "ok"
        },
        {
            "name": "Test2",
            "st": "ko"
        }
    ]
}

我需要将其解析为角度接口，然后将其转换为数组。

我尝试了一些不同类型的界面，但我无法真正得到最终结果。 通常，我使用此方法来转换我收到的响应（将其放入服务中并使用

httpclient.get

调用它，并使用

Observable<Object>

作为方法返回）：

this.service.getTest().subscribe({
      next: (response) =>{
        
        console.log(response)
        let responseList = (response as Array<Interface>)
        responseList.foreach((u)=>{
           this.globVar.push({
                 ...
             })
            })

      },
      error: (msg) =>{
        console.log(msg)
      }
    })

Answer 1

定义一个接口来表示JSON中每个对象的结构。根据您的情况，您可以定义这样的接口：

interface MyObject {
  name: string;
  st: string;
}

在您的组件中，使用

HttpClient

发出 HTTP 请求并将响应映射到对象数组。

以下是实现此目标的方法：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

interface MyObject {
  name: string;
  st: string;
}

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  globVar: MyObject[] = [];

  constructor(private httpClient: HttpClient) { }

  ngOnInit(): void {
    this.service.getTest().subscribe({
      next: (response: any) => {
        if (response.results) {
          const responseList: MyObject[] = response.results;
          this.globVar = responseList;
        }
      },
      error: (error) => {
        console.log(error);
      }
    });
  }
}