JSFiddle - React, Tailwind, and code Playground
HTML
<div id="Results">
</div>
JavaScript
var selectedId = 2;
var userListArray = [
{
id: 0,
image: "https://www.gravatar.com/avatar/ed1c4f28bbd649aad6c7e1f088ecf3a2?s=32&d=identicon&r=PG&f=1",
name: "None"
},
{
id: 1,
image: "https://www.gravatar.com/avatar/ed1c4f28bbd649aad6c7e1f088ecf3a2?s=32&d=identicon&r=PG&f=1",
name: "User 1",
},
{
id: 2,
image: "https://www.gravatar.com/avatar/ed1c4f28bbd649aad6c7e1f088ecf3a2?s=32&d=identicon&r=PG&f=1",
name: "User 2",
},
{
id: 3,
image: "https://www.gravatar.com/avatar/ed1c4f28bbd649aad6c7e1f088ecf3a2?s=32&d=identicon&r=PG&f=1",
name: "User 3",
},
];
var result = userListArray.filter(function (el) {
return el.id == selectedId;
});
// DEBUG:
var resultsToText = "";
for(var i=0; i<result.length; i++) {
resultsToText += "<img src='" + result[i].image + "' /> " + result[i].id + " - " + result[i].name;
}
document.getElementById("Results").innerHTML = resultsToText;
var imageUrl = result[0] && result[0].image;
console.log('Image URL for User '+result[0].name+' === '+imageUrl);