时间戳

首页 > 解决方案 > 如何获取部分 JSON 响应并转换为某个接口的数组？

angular - 如何获取部分 JSON 响应并转换为某个接口的数组？

问题描述

我需要获取我的应用程序的服务对后端执行的 GET 请求的 JSON 响应，获取其中的某些部分并将其放在我创建的接口数组中，以便我可以开始使用它。

这是 JSON 的样子：

[{
        "id": 1,
        "name": "Lar das meninas",
        "latitude": -23.6695527,
        "longitude": -46.603418,
        "about": "Sobre o orfanato",
        "instructions": "Venha visitas",
        "opening_hours": "Das 8h até 18h",
        "open_on_weekends": false,
        "directory": {
            "directoryName": "/PROD/FILE",
            "server": {
                "serverName": "XYZ34"
            }
        }
    },
    {
        "id": 2,
        "name": "Petito Orfanato",
        "latitude": -23.6740118,
        "longitude": -46.6066612,
        "about": "Sobre o orfanato",
        "instructions": "Venha visitas",
        "opening_hours": "Das 8h até 18h",
        "open_on_weekends": false,
        "directory": {
            "directoryName": "/PROD/FILE",
            "server": {
                "serverName": "XYZ34"
            }
        }
    }
]

我只需要这些名称、纬度、经度、目录名和服务器名，所以我尝试创建这个界面来塑造响应：

export interface Orphanage {
  name: string,
  latitude: number,
  longitude: number
}

如您所见，由于嵌套，我什至没有尝试获取 directoryName 和 serverName 。
我认为打字稿会匹配名称并仅获取界面中的内容，因此我进行了这样的调用并尝试 console.log 但它记录了整个响应。

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'
import { Orphanage } from './orphanage';
import { tap } from 'rxjs/operators';


@Injectable({
  providedIn: 'root'
})
export class OrphanageService {

  constructor(private http: HttpClient) { }

  getOrphanages() {
    return this.http.get<Orphanage[]>('http://localhost:3333/orphanages').pipe(
      tap((res: Orphanage[]) => console.log(res))
    );
  }
}

我还尝试从组件调用服务，订阅 Observable，将其结果分配给组件的数组属性并 console.log 它，但得到相同的结果：

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

import { Orphanage } from '../orphanage';
import { OrphanageService } from '../orphanage.service';

@Component({
  selector: 'app-orphanages-main',
  templateUrl: './orphanages-main.component.html',
  styleUrls: ['./orphanages-main.component.scss']
})
export class OrphanagesMainComponent implements OnInit {

  orphanages: Orphanage[];

  constructor(private orphanageService: OrphanageService) { }
 
  ngOnInit(): void {
    this.orphanageService.getOrphanages()
    .subscribe((orphanages: Orphanage[]) => {
      this.orphanages = orphanages;
      console.log(this.orphanages);
    });
  }
}

我需要做些什么来实现这一点，对于嵌套的 directoryName 和 serverName 我必须做些什么不同的事情？

谢谢！

标签： angulartypescriptrxjs

解决方案

您可以使用 jsmap方法从 json 创建孤儿数组。rxjs然后使用map 运算符将您在 Observeable 的流中接收到的每条数据映射为 Orphanage 数组：

export interface Orphanage {
  name: string;
  latitude: number;
  longitude: number;
  directoryName: string;
  serverName: string;
}

 getOrphanages(): Observable<Orphanage[]> {
    return this.http.get<any[]>('http://localhost:3333/orphanages').pipe(
      map(this.transformJsonToOrphanages)
    );
  }


 transformJsonToOrphanages(json): Orphanage[] {
   return json.map((jsonObj): Orphanage[] => {
      return {
         name: jsonObj.name,
         latitude: jsonObj.latitude,
         longitude: jsonObj.longitude,
         directoryName: jsonObj.directory.directoryName,
         serverName: jsonObj.directory.server.serverName
      }
    })
 }

推荐阅读