Angular中如何用TypeScript将API返回对象重构为指定格式

实现逻辑说明 #

核心是按多语言字段对原始数组做分组聚合，步骤如下：

• 初始化目标结构根节点，内置imagesList空对象作为语言分组容器
• 遍历接口返回的原始图片数组每一项
• 针对单条图片数据的多语言描述字段，提取language值作为分组键
• 若对应语言分组不存在则先初始化空数组，再将当前图片的路径、对应语言的文案推入分组数组
• 最终返回聚合完成的结构，直接供模板渲染使用

注意：上述逻辑自动兼容单张图片配置多语言描述的场景，会自动将同一张图片分配到所有匹配语言的分组下

完整实现代码 #

// 类型定义，约束原始数据和目标结构格式，避免类型错误
interface RawImageDesc {
  language: string;
  text: string;
}
interface RawImageItem {
  imagePath: string;
  imageDescription: RawImageDesc[];
}
interface FormattedImageItem {
  imagePath: string;
  text: string;
}
interface ConvertedImageData {
  imagesList: Record<string, FormattedImageItem[]>;
}

/**
 * 结构转换工具方法
 * @param rawList 接口返回的原始图片数组
 */
const transformImageData = (rawList: RawImageItem[]): ConvertedImageData => {
  const result: ConvertedImageData = {
    imagesList: {}
  };

  rawList.forEach(imageItem => {
    imageItem.imageDescription.forEach(descItem => {
      const currentLang = descItem.language;
      // 语言分组不存在时初始化
      if (!result.imagesList[currentLang]) {
        result.imagesList[currentLang] = [];
      }
      result.imagesList[currentLang].push({
        imagePath: imageItem.imagePath,
        text: descItem.text
      });
    });
  });

  return result;
};

// Angular组件中使用示例
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-image-gallery',
  template: `
    <section *ngIf="formattedData">
      <div *ngFor="let lang of getObjectKeys(formattedData.imagesList)">
        <h4>{{ lang.toUpperCase() }} 分区</h4>
        <div *ngFor="let img of formattedData.imagesList[lang]" class="img-card">
          <img [src]="img.imagePath" [alt]="img.text" loading="lazy">
          <p>{{ img.text }}</p>
        </div>
      </div>
    </section>
  `
})
export class ImageGalleryComponent implements OnInit {
  formattedData: ConvertedImageData;

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    // 替换为实际接口请求地址
    this.http.get<RawImageItem[]>('/api/image/list')
      .subscribe(res => {
        this.formattedData = transformImageData(res);
      });
  }

  // 模板遍历对象key的工具方法
  getObjectKeys(target: Record<string, any>): string[] {
    return Object.keys(target);
  }
}

效果验证 #

传入测试原始数据调用转换方法，输出结果完全匹配期望结构：

// 测试用原始数据
const mockRawData = [
  {
    imagePath: "",
    imageDescription: [{ language: "en", text: "Today's News Updated" }]
  },
  {
    imagePath: "",
    imageDescription: [{ language: "en", text: "test" }]
  },
  {
    imagePath: "",
    imageDescription: [{ language: "de", text: "test" }]
  }
];

console.log(transformImageData(mockRawData));
// 输出结果：
// {
//   imagesList: {
//     en: [
//       { imagePath: "", text: "Today's News Updated" },
//       { imagePath: "", text: "test" }
//     ],
//     de: [
//       { imagePath: "", text: "test" }
//     ]
//   }
// }

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