Angular 2中如何访问复杂JSON对象？（附相关代码片段）

先看看你提供的代码片段，已经通过服务成功获取到后端返回的JSON数据，并且把data.data.result赋值给了this.items对吧？接下来咱们聊聊怎么访问这个复杂的JSON对象：

首先先把你给出的代码贴出来方便参考：

你的代码片段 #

component.ts #

public items: any;
getResult(){
  var jsonBody = {};
  jsonBody['activity'] = this.activity;
  jsonBody['seatnumber'] = this.seatNo;
  this.localService.postCall(jsonBody)
    .subscribe( data => {
      if (data.message === 'ok') {
        this.items = data.data.result;
        console.log(data.data);
        // window.localStorage.setItem('result',data);
      }
    }, error => { })
}

localService.ts #

postCall(jsonBody){
  const headers = new Headers({
    'Content-Type': 'application/json',
    'Source': 'WEB'
  });
  return this.http.post('你的接口地址', jsonBody, { headers: headers })
    .map(res => res.json());
  // 补全你代码里没写完的http调用部分
}

访问复杂JSON的几种方法 #

1. 直接通过属性链访问 #

首先得明确data.data.result的具体结构，假设返回的JSON是类似这样的复杂结构：

{
  "message": "ok",
  "data": {
    "result": {
      "userInfo": {
        "name": "Lakhan",
        "details": {
          "age": 28,
          "address": {
            "city": "Delhi"
          }
        }
      },
      "purchases": [
        {"id": 101, "item": "Laptop"},
        {"id": 102, "item": "Phone"}
      ]
    }
  }
}

那你可以直接用点语法或者方括号语法访问深层属性：

// 访问用户名
console.log(this.items.userInfo.name);
// 用方括号写法也可以
console.log(this.items['userInfo']['details']['address']['city']);

// 访问数组里第一个商品的名称
console.log(this.items.purchases[0].item);

2. 避免空值报错：用可选链操作符 #

如果JSON里某些属性可能不存在（比如用户没填地址），直接访问会报错，这时候用?.可选链操作符就很实用，它会在属性不存在时返回undefined而不是抛出错误：

// 即使address不存在也不会报错
console.log(this.items.userInfo.details.address?.city);

3. 类型安全：定义接口（推荐） #

你现在把items定义成any类型，虽然灵活但没有类型提示，容易写错属性名。咱们可以定义对应的数据接口，让代码更严谨：

// 先定义嵌套的接口
interface Address {
  city: string;
}

interface UserDetails {
  age: number;
  address?: Address; // 可选属性，可能不存在
}

interface UserInfo {
  name: string;
  details: UserDetails;
}

interface Purchase {
  id: number;
  item: string;
}

// 最终的Result接口对应data.data.result的结构
interface Result {
  userInfo: UserInfo;
  purchases: Purchase[];
}

// 把items的类型改成Result
public items: Result;

这样之后你访问this.items时，编辑器会自动给出属性提示，还能提前发现拼写错误，维护起来更方便。

4. 遍历数组类型的复杂结构 #

如果data.data.result是一个数组（比如返回的是多条数据），那在组件里可以用forEach遍历，模板里用*ngFor：

// 组件内遍历
this.items.forEach(item => {
  console.log(item.userInfo.name);
});

模板中：

<div *ngFor="let item of items">
  <h3>{{item.userInfo.name}}</h3>
  <p>城市：{{item.userInfo.details.address?.city}}</p>
  <p>购买商品：{{item.purchases[0].item}}</p>
</div>

小提示：关于localStorage的使用 #

你代码里注释的window.localStorage.setItem('result',data);有个小问题：localStorage只能存储字符串，直接存对象会变成[object Object]，正确的做法是先用JSON.stringify转成字符串，取出来时再用JSON.parse解析：

// 存储数据
window.localStorage.setItem('result', JSON.stringify(data));
// 取出数据
const savedData = JSON.parse(window.localStorage.getItem('result') || '{}');

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