Angular2中使用Service调用API失败，本地JSON调用正常

问题背景 #

此前用Angular Service调用本地JSON文件完全正常，但切换到调用外部API时直接失败。原Service写法适配本地JSON结构，但因目标API返回结构不同，导致逻辑无法适用。

相关参考 #

• 目标数据表格样式：
• API返回结构：
• 当前Service代码：

解决思路 #

核心问题是本地JSON结构与API返回结构不匹配，需调整Service中的数据解析逻辑：

1. 明确API返回的层级结构（比如是否有外层包装对象、数组嵌套位置）
2. 修正HttpClient.get()后的映射逻辑，确保正确提取目标数据数组
3. 若涉及跨域，确认后端是否配置CORS，或Angular是否启用代理配置

示例调整方向（假设API返回外层有data字段包裹数组）：

// 原本地JSON调用逻辑（直接返回数组）
getLocalData(): Observable<YourDataType[]> {
  return this.http.get<YourDataType[]>('/assets/local-data.json');
}

// 适配API的调整逻辑（提取内层数组）
getApiData(): Observable<YourDataType[]> {
  return this.http.get<any>('your-api-url')
    .pipe(map(response => response.data)); // 根据实际API结构修改提取路径
}

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