Angular 4读取本地SpringBoot返回JSON及数据为空问题求助

看起来你在Angular 4项目里处理SpringBoot返回的JSON数据时遇到了两个小麻烦——不知道怎么操作JSON，还有MicrosoftResult为空的问题。我来帮你一步步解决：

一、先搞定MicrosoftResult为空的问题！ #

你仔细看一下后端返回的JSON：

{ "Microsoft ": { "name1": [ "link1", "link2", "link3" ], ... } }

注意到"Microsoft "这个键的末尾有个空格吗？如果你的代码里是用response.Microsoft（不带空格）去访问的话，肯定拿不到值，结果自然是空的！这大概率就是问题的根源。

二、在Angular中操作该JSON数据的完整步骤 #

1. 配置HTTP模块（前提步骤） #

首先要确保你的项目已经导入了HTTP相关模块：

• 如果是Angular 4.3及以上版本，用HttpClientModule，在AppModule中导入：

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    // ...其他模块
    HttpClientModule
  ]
})
export class AppModule { }

• 如果是Angular 4.3以下版本，用HttpModule：

import { HttpModule } from '@angular/http';

@NgModule({
  imports: [
    // ...其他模块
    HttpModule
  ]
})
export class AppModule { }

2. 组件中获取并处理数据 #

在你的组件里注入HTTP服务，发起请求并正确解析数据：

import { Component, OnInit } from '@angular/core';
// 根据Angular版本选择导入HttpClient或Http
import { HttpClient } from '@angular/common/http';
// import { Http } from '@angular/http'; // 低版本用这个

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponentComponent implements OnInit {
  microsoftData: any; // 用来存储处理后的数据

  constructor(private http: HttpClient) { }
  // constructor(private http: Http) { } // 低版本用这个

  ngOnInit() {
    // 替换成你的SpringBoot接口地址
    const apiUrl = 'http://localhost:8080/your-api-path';
    
    this.http.get(apiUrl)
      .subscribe((response: any) => {
        // 注意这里的键名要带空格！
        this.microsoftData = response['Microsoft '];
        console.log('获取到的数据:', this.microsoftData);
      }, (error) => {
        console.error('请求数据失败:', error);
      });

    // 低版本Angular的写法（需要用map解析JSON）
    // this.http.get(apiUrl)
    //   .map(res => res.json())
    //   .subscribe(response => {
    //     this.microsoftData = response['Microsoft '];
    //   });
  }
}

3. 在模板中展示数据 #

用Angular的*ngFor指令遍历数据，把内容展示出来：

<!-- 数据加载完成后展示 -->
<div *ngIf="microsoftData">
  <h2>Microsoft 相关链接</h2>
  <!-- 遍历所有name项 -->
  <div *ngFor="let nameKey of Object.keys(microsoftData)">
    <h3>{{ nameKey }}</h3>
    <ul>
      <!-- 遍历当前name下的所有链接 -->
      <li *ngFor="let link of microsoftData[nameKey]">
        <a href="{{ link }}" target="_blank">{{ link }}</a>
      </li>
      <!-- 如果没有链接，显示提示 -->
      <li *ngIf="microsoftData[nameKey].length === 0" style="color: #999;">暂无链接</li>
    </ul>
  </div>
</div>

<!-- 数据加载中提示 -->
<div *ngIf="!microsoftData" style="padding: 20px;">
  数据加载中...
</div>

额外建议 #

最好和后端开发人员沟通一下，把JSON里的"Microsoft "键名的空格去掉，改成"Microsoft"（无空格），这样更符合通用的命名规范，后续也不会再因为这种细节问题踩坑。

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