Choogy - Javascript Find Objects

Add Delete Find Filter ForEach IndexOf Map Chain Functions BrowserStorage Promise Back

Find Element In Array of Objects

Suppose you want to create a dropdown form that shows a person's name & phone number.

You can store the data in javascript object array & use Array.find to return the first matching element.

Copy the code below & save file as object.html:

<form>
Get Contact: 
<select id="h_name">
<option value="JOE">Joe</option>
<option value="ROSE">Rose</option>
<option value="ALL">Show All</option>
</select>
</form>

<h4>Details:</h4>
<h4 id="out"></h4>

let contacts = [
{ name: "JOE", contact: "123" },
{ name: "ROSE", contact: "456" }
];

function show() 
{
document.getElementById("out").innerHTML = "";

var h_name = document.getElementById("h_name").value;

if ( h_name === "ALL" ) 
{
for (let x in contacts)
{
  document.getElementById("out").innerHTML += "<li>" 
  + contacts[x].name + "</li>" + "<li>" 
  + contacts[x].contact + "</li><hr>";
}
}

let newC = contacts.find(function(e) 
{ return e.name === h_name.toUpperCase(); });
//Alternative shorthand: 
//let newC = contacts.find(newC => newC.name === h_name.toUpperCase());

//Alternative: if searching multiple values: 
//let newC = contacts.find(c => newC.name === "JOE" && newC.contact === "123");
document.getElementById("out").innerHTML = "<li>" + newC.name + "</li>" 
+ "<li>" + newC.contact + "</li><hr>";

}
</script>

Explaination:

newC is a new object array created natively by Javascript which we can access the object properties.