如何访问模拟 json 服务器上的用户数据的角色属性

Question

这是我的 Json 数据

{
  "LoginData": [
    {
      "name": "Nick",
      "password": "123",
      "role": "employee"
    },
    {
      "name": "Ratan",
      "password": "123",
      "role": "manager"
    },
    {
      "name": "Rahul",
      "password": "123",
      "role": "admin"
    }
  ]
}

通过使用带有名称的文件管理器方法，我获取特定数据并将其存储在变量 userData 中

[{名称：'Rahul'，密码：'123'，角色：'admin'}]

但我无法使用它未定义的 userData.role 访问其角色

我应该做些什么改变才能给我 userData.role === "admin"

Answer 1

当你使用filter 函数时，你会在输出中得到array。您应该考虑使用find 方法。

另外，我建议你在 MDN Docs 上了解数组方法。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

Answer 2

根据docs，Array#filter返回：

包含通过测试的元素的新数组。如果没有元素通过测试，则返回一个空数组。

因此，您需要先访问返回数组中的第一个元素：

const data = {
  "LoginData": [
    { "name": "Nick", "password": "123", "role": "employee" },
    { "name": "Ratan", "password": "123", "role": "manager" },
    { "name": "Rahul", "password": "123", "role": "admin" }
  ]
}

const userData = data.LoginData.filter(({ name }) => name === 'Rahul');
const role = userData[0]?.role;

console.log(role);

如果总是最多匹配一项，Array#find 会更好：

const data = {
  "LoginData": [
    { "name": "Nick", "password": "123", "role": "employee" },
    { "name": "Ratan", "password": "123", "role": "manager" },
    { "name": "Rahul", "password": "123", "role": "admin" }
  ]
}

const userData = data.LoginData.find(({ name }) => name === 'Rahul');
const role = userData?.role;

console.log(role);