如何在SPFx Web Part中遍历Microsoft Graph返回的JSON数据？

你从Graph API获取到的响应里，用户列表都存放在value数组中，直接遍历这个数组就能处理每个用户的数据，以下是几种常用的遍历方式：

1. forEach 遍历（最常用） #

// 遍历value数组中的每个用户对象
theADUsers.value.forEach(user => {
  console.log(`用户名: ${user.displayName}, 邮箱: ${user.mail}, ID: ${user.id}`);
  // 这里可根据需求执行其他操作，比如存储用户数据、渲染页面元素等
});

2. for...of 循环 #

for (const user of theADUsers.value) {
  console.log(`姓氏: ${user.surname}, 邮箱: ${user.mail}`);
}

3. 数组方法链式处理（过滤/映射场景） #

如果需要筛选特定用户或提取指定字段，可结合map、filter等数组方法：

// 提取所有用户邮箱到新数组
const userEmails = theADUsers.value.map(user => user.mail);
console.log('所有用户邮箱:', userEmails);

// 筛选姓氏为Doe的用户
const doeUsers = theADUsers.value.filter(user => user.surname === 'Doe');
console.log('姓氏为Doe的用户:', doeUsers);

防错处理 #

为避免空指针错误，建议先判断value数组是否存在且非空：

if (theADUsers?.value && theADUsers.value.length > 0) {
  theADUsers.value.forEach(user => {
    // 执行处理逻辑
  });
} else {
  console.log('未获取到用户数据');
}

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