如何访问fetch请求返回的JSON数组内的单个对象？

结构确认 #

你拿到的响应确实是数组嵌套JSON对象的结构：最外层为数组，数组每一项是对应用户数据的独立JSON对象，每个用户对象下的email/naam/hoeveelheid zoekopdrachten字段本身也是结构化的JSON值对象。

现有代码问题说明 #

你贴的前端代码存在两个直接影响运行的错误：

• 变量名拼写不一致：声明解析结果时写的是responseSjon，后续调用JSON.stringify时传入的是未定义的responseJson，会直接触发引用错误
• 异步逻辑处理错误：response.json()返回的是Promise对象，你不能在当前同步流程里直接拿到解析结果，必须等待Promise状态变更为fulfilled后才能拿到实际的数组数据

正确访问数组内对象的实现 #

修正后的前端请求代码如下，你可以直接参考访问单个/遍历所有数组元素：

fetch('restservices/users/', fetchOptions)
  .then(function (response) {
    if (!response.ok) {
      throw new Error('请求异常，状态码：' + response.status)
    }
    // 返回json解析的Promise，交给下一个链式then接收
    return response.json()
  })
  .then(function (userList) {
    // 此处userList就是解析完成的用户数组
    console.log('完整用户列表：', userList)

    // 按下标访问单个对象，例如取第一个用户
    const firstUser = userList[0]
    console.log('第一个用户完整对象：', firstUser)
    console.log('第一个用户的邮箱：', firstUser.email.string)
    console.log('第一个用户的名称：', firstUser.naam.chars)

    // 遍历访问数组内所有对象
    userList.forEach((user, index) => {
      console.log(`第${index + 1}个用户数据：`, user)
    })
  })
  .catch(err => {
    console.error('请求或解析失败：', err)
  })

后端代码隐患提示 #

你贴的Java后端代码存在逻辑bug：JsonObjectBuilder实例被定义在了forEach循环外部，每次循环都是在修改同一个对象的属性，最终生成的数组里所有元素都会重复指向最后一个用户的数据，还会出现属性重复累加的问题。需要把对象构建器的初始化移到循环内部，修正后代码如下：

Map<String, User> commune = Community.getUserMap();
JsonArrayBuilder jab = Json.createArrayBuilder();

commune.forEach((key, user) -> {
    // 每次遍历新建一个对象构建器
    JsonObjectBuilder job = Json.createObjectBuilder();
    job.add("email", user.getEmail());
    job.add("naam", user.getNaam());
    job.add("role", user.getRole());
    job.add("hoeveelheid zoekopdrachten", user.getAlleZoekertjes().size());
    jab.add(job);
});
return ok(jab.build()).build();

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