时间戳

首页 > 解决方案 > 将对象值存储到数组中

javascript - 将对象值存储到数组中

问题描述

我有这段代码，它检索“客户端”列表，其中 FULL_NAME 就像我输入的 KEY 一样。

[
  {
    id(pin):1
    full_name(pin):"James Marius Bolord"
    email(pin):"mariusjames32@gmail.com"
    phone(pin):"9832910293"
    dob(pin):"1981-05-05"
    location(pin):"REXDALE"
    user_id(pin):1
  },
  {
    id(pin):23
    full_name(pin):"Carl Barard"
    email(pin):"mariusjames32@gmail.com"
    phone(pin):"9832910293"
    dob(pin):"1981-05-05"
    location(pin):"REXDALE"
    user_id(pin):1
  },
  {
    id(pin):9
    full_name(pin):"Tony Falape"
    email(pin):"mariusjames32@gmail.com"
    phone(pin):"9832910293"
    dob(pin):"1981-05-05"
    location(pin):"REXDALE"
    user_id(pin):1
  }
]

现在我知道你可以通过这样做来使用对象：

const zoo = {
  lion: '',
  panda: '',
};

Object.keys(zoo);
// ['lion', 'panda']

Object.values(zoo);
// ['', '']

Object.entries(zoo);
// [ ['lion', ''], ['panda', ''] ]

在那之前，我认为一切都很好。我想做的是从该对象中获得这种类型的结果：

const full_name = [
    "James Marius Bolord",
    "Carl Barard",
    "Tony Falape",
   
  ];

所以每次我输入一个键时，它应该创建一个客户端表的全名键数组。我会很感激你的建议和想法。

标签： javascriptarraysobject

解决方案

忽略所需结果中的错字，如果您只想从对象数组中提取全名，请使用Array.prototype.map：

const full_name = data.map(entry => entry.full_name);

如果您想实现某种自动完成/自动建议功能，<datalist>那么对于您的用例来说是一个非常好的候选者：

const data = [{
    id: 1,
    full_name: "James Marius Bolord",
    email: "mariusjames32@gmail.com",
    phone: "9832910293",
    dob: "1981-05-05",
    location: "REXDALE",
    user_id: 1
  },
  {
    id: 23,
    full_name: "Carl Barard",
    email: "mariusjames32@gmail.com",
    phone: "9832910293",
    dob: "1981-05-05",
    location: "REXDALE",
    user_id: 1
  },
  {
    id: 9,
    full_name: "Tony Falape",
    email: "mariusjames32@gmail.com",
    phone: "9832910293",
    dob: "1981-05-05",
    location: "REXDALE",
    user_id: 1
  }
];

const full_name = data.map(entry => entry.full_name);
console.log(full_name);

// Populate datalist as a UI/UX feature
const datalist = document.querySelector('#fullnames');
data.forEach(entry => {
  const option = document.createElement('option');
  option.value = entry.full_name;
  
  datalist.appendChild(option);
});
<input list="fullnames" />
<datalist id="fullnames"></datalist>

推荐阅读