Angular如何遍历response.value获取含cityid等指定字段的列表

数据结构说明 #

你当前持有的两类数据属性如下：

• 城市数据：id、name、countryid（你原描述中的counteyid为笔误）
• 国家数据：id、name

核心处理逻辑 #

你需要的目标列表包含cityid、name、countryid三个字段，直接对response.value做数组映射遍历，把城市原有的id重命名为cityid，其余字段直接保留即可完成转换。

代码实现示例 #

基础TS转换逻辑 #

// 假设response.value是接口返回的原始城市数组
const targetList = response.value.map(city => {
  return {
    cityid: city.id,
    name: city.name,
    countryid: city.countryid
  }
})

Angular 完整业务场景写法 #

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

// 定义原始城市数据类型
interface RawCity {
  id: number;
  name: string;
  countryid: number;
}

// 定义目标结构数据类型
interface ProcessedCity {
  cityid: number;
  name: string;
  countryid: number;
}

@Component({
  selector: 'app-city-list',
  templateUrl: './city-list.component.html',
  styleUrls: ['./city-list.component.css']
})
export class CityListComponent implements OnInit {
  processedCityList: ProcessedCity[] = [];

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    this.http.get<{value: RawCity[]}>('你的业务接口地址').subscribe(res => {
      // 遍历转换数据
      this.processedCityList = res.value.map(item => ({
        cityid: item.id,
        name: item.name,
        countryid: item.countryid
      }))
    })
  }
}

如果你需求中的name字段需要取对应国家的名称，只需要提前把国家列表转成ID和名称的映射表，再关联查询即可，示例如下：

// 假设你已经拿到全量国家列表countryList
const countryMap = new Map(countryList.map(item => [item.id, item.name]));
const targetList = response.value.map(city => {
  return {
    cityid: city.id,
    name: countryMap.get(city.countryid) || '未知国家',
    countryid: city.countryid
  }
})

参考示意图 #

内容的提问来源于stack exchange，提问作者Kaicobad