I've this piece of code, it retrieves a list of 'Client' where FULL_NAME like a KEY I input.
[
{
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
}
]
Now I learn that you can make use of object by doing this:
const zoo = {
lion: '🦁',
panda: '🐼',
};
Object.keys(zoo);
// ['lion', 'panda']
Object.values(zoo);
// ['🦁', '🐼']
Object.entries(zoo);
// [ ['lion', '🦁'], ['panda', '🐼'] ]
Until there, everything is fine on my mind. What I would like to do is having this type of result from that object:
const full_name = [
"James Marius Bolord",
"Carl Barard",
"Tony Falape",
];
So every time I type a key in, it should create an array of the full_name Key of the Client Table. I would appreciate the suggestion and ideas.
Ignoring the typo in your desired result, if all you want is to extract full names from your array of objects, then use Array.prototype.map:
const full_name = data.map(entry => entry.full_name);
If you want to implement some kind of autocomplete/autosuggest feature, <datalist> is a very good candidate for your use-case:
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>