Problem accessing value from object in array with lodash find

Question

So I have an array like so

images = [ { "id":8471226, "base64Image":"encodedText" }, ... ]

But when I try to access the encodedText in my code I'm getting undefined

let id = 8480948
console.log( _.find(images, { id }) ); // undefined
console.log(id)
console.log(images)

 const images = [{id: 8471226, base64Image: "KAAAAGgAAAAAAAAwvnlmsC+LHdzl+WxWjRcE1u4G8K"}, {id: 8477463, base64Image: "KAAAAGgAAAAAAAAwvnlmsC+LHdzl+WxWjRcE1u4G8K"}, {id: 8479407, base64Image: "KAAAAGgAAAAAAAAwvnlmsC+LHdzl+WxWjRcE1u4G8K"}, {id: 8477961, base64Image: "KAAAAGgAAAAAAAAwvnlmsC+LHdzl+WxWjRcE1u4G8K"}, {id: 8470619, base64Image: "KAAAAGgAAAAAAAAwvnlmsC+LHdzl+WxWjRcE1u4G8K"}, {id: 8471233, base64Image: "KAAAAGgAAAAAAAAwvnlmsC+LHdzl+WxWjRcE1u4G8K"}, {id: 8471239, base64Image: "KAAAAGgAAAAAAAAwvnlmsC+LHdzl+WxWjRcE1u4G8K"}, {id: 8472382, base64Image: "KAAAAGgAAAAAAAAwvnlmsC+LHdzl+WxWjRcE1u4G8K"}, {id: 8473933, base64Image: "KAAAAGgAAAAAAAAwvnlmsC+LHdzl+WxWjRcE1u4G8K"}, {id: 8475149, base64Image: "KAAAAGgAAAAAAAAwvnlmsC+LHdzl+WxWjRcE1u4G8K"}, {id: 8475151, base64Image: "KAAAAGgAAAAAAAAwvnlmsC+LHdzl+WxWjRcE1u4G8K"}, {id: 8475222, base64Image: "KAAAAGgAAAAAAAAwvnlmsC+LHdzl+WxWjRcE1u4G8K"}, {id: 8475663, base64Image: "KAAAAGgAAAAAAAAwvnlmsC+LHdzl+WxWjRcE1u4G8K"}, {id: 8475791, base64Image: "KAAAAGgAAAAAAAAwvnlmsC+LHdzl+WxWjRcE1u4G8K"}, {id: 8476234, base64Image: "KAAAAGgAAAAAAAAwvnlmsC+LHdzl+WxWjRcE1u4G8K"}, {id: 8476399, base64Image: "KAAAAGgAAAAAAAAwvnlmsC+LHdzl+WxWjRcE1u4G8K"}, {id: 8476474, base64Image: "KAAAAGgAAAAAAAAwvnlmsC+LHdzl+WxWjRcE1u4G8K"}, {id: 8476923, base64Image: "KAAAAGgAAAAAAAAwvnlmsC+LHdzl+WxWjRcE1u4G8K"}, {id: 8477355, base64Image: "KAAAAGgAAAAAAAAwvnlmsC+LHdzl+WxWjRcE1u4G8K"}, {id: 8477425, base64Image: "KAAAAGgAAAAAAAAwvnlmsC+LHdzl+WxWjRcE1u4G8K"}, {id: 8477509, base64Image: "KAAAAGgAAAAAAAAwvnlmsC+LHdzl+WxWjRcE1u4G8K"}, {id: 8477520, base64Image: "KAAAAGgAAAAAAAAwvnlmsC+LHdzl+WxWjRcE1u4G8K"}, {id: 8478401, base64Image: "KAAAAGgAAAAAAAAwvnlmsC+LHdzl+WxWjRcE1u4G8K"}, {id: 8479315, base64Image: "KAAAAGgAAAAAAAAwvnlmsC+LHdzl+WxWjRcE1u4G8K"}, {id: 8480002, base64Image: "KAAAAGgAAAAAAAAwvnlmsC+LHdzl+WxWjRcE1u4G8K"}, {id: 8480948, base64Image: "KAAAAGgAAAAAAAAwvnlmsC+LHdzl+WxWjRcE1u4G8K"}] let id = 8480948 console.log( _.find(images, { id }) ); // undefined 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script> 

When I right click the array and store as global variable in chrome dev tools it is working as intended?

Here's an image of the output

What am I doing wrong?

[{"id": 8471226, "base64Image": "KAAAAGgAAAAAAAAwvnlmsC+LHdzl+WxWjRcE1u4G8K"},
{"id": 8477463, "base64Image": "KAAAAGgAAAAAAAAwvnlmsC+LHdzl+WxWjRcE1u4G8K"},
{"id": 8479407, "base64Image": "KAAAAGgAAAAAAAAwvnlmsC+LHdzl+WxWjRcE1u4G8K"},
{"id": 8477961, "base64Image": "KAAAAGgAAAAAAAAwvnlmsC+LHdzl+WxWjRcE1u4G8K"},
{"id": 8470619, "base64Image": "KAAAAGgAAAAAAAAwvnlmsC+LHdzl+WxWjRcE1u4G8K"},
{"id": 8471233, "base64Image": "KAAAAGgAAAAAAAAwvnlmsC+LHdzl+WxWjRcE1u4G8K"},
{"id": 8471239, "base64Image": "KAAAAGgAAAAAAAAwvnlmsC+LHdzl+WxWjRcE1u4G8K"},
{"id": 8472382, "base64Image": "KAAAAGgAAAAAAAAwvnlmsC+LHdzl+WxWjRcE1u4G8K"},
{"id": 8473933, "base64Image": "KAAAAGgAAAAAAAAwvnlmsC+LHdzl+WxWjRcE1u4G8K"},
{"id": 8475149, "base64Image": "KAAAAGgAAAAAAAAwvnlmsC+LHdzl+WxWjRcE1u4G8K"},
{"id": 8475151, "base64Image": "KAAAAGgAAAAAAAAwvnlmsC+LHdzl+WxWjRcE1u4G8K"},
{"id": 8475222, "base64Image": "KAAAAGgAAAAAAAAwvnlmsC+LHdzl+WxWjRcE1u4G8K"},
{"id": 8475663, "base64Image": "KAAAAGgAAAAAAAAwvnlmsC+LHdzl+WxWjRcE1u4G8K"},
{"id": 8475791, "base64Image": "KAAAAGgAAAAAAAAwvnlmsC+LHdzl+WxWjRcE1u4G8K"},
{"id": 8476234, "base64Image": "KAAAAGgAAAAAAAAwvnlmsC+LHdzl+WxWjRcE1u4G8K"},
{"id": 8476399, "base64Image": "KAAAAGgAAAAAAAAwvnlmsC+LHdzl+WxWjRcE1u4G8K"},
{"id": 8476474, "base64Image": "KAAAAGgAAAAAAAAwvnlmsC+LHdzl+WxWjRcE1u4G8K"},
{"id": 8476923, "base64Image": "KAAAAGgAAAAAAAAwvnlmsC+LHdzl+WxWjRcE1u4G8K"},
{"id": 8477355, "base64Image": "KAAAAGgAAAAAAAAwvnlmsC+LHdzl+WxWjRcE1u4G8K"},
{"id": 8477425, "base64Image": "KAAAAGgAAAAAAAAwvnlmsC+LHdzl+WxWjRcE1u4G8K"},
{"id": 8477509, "base64Image": "KAAAAGgAAAAAAAAwvnlmsC+LHdzl+WxWjRcE1u4G8K"},
{"id": 8477520, "base64Image": "KAAAAGgAAAAAAAAwvnlmsC+LHdzl+WxWjRcE1u4G8K"},
{"id": 8478401, "base64Image": "KAAAAGgAAAAAAAAwvnlmsC+LHdzl+WxWjRcE1u4G8K"},
{"id": 8479315, "base64Image": "KAAAAGgAAAAAAAAwvnlmsC+LHdzl+WxWjRcE1u4G8K"},
{"id": 8480002, "base64Image": "KAAAAGgAAAAAAAAwvnlmsC+LHdzl+WxWjRcE1u4G8K"},
{"id": 8480948, "base64Image": "KAAAAGgAAAAAAAAwvnlmsC+LHdzl+WxWjRcE1u4G8K"}]

Answer 1

Your syntax seems like 100% correct ES6.

It appears that the record you wish to find in your array simply does not exist.

Notice the IDs in your example differ:

8480948
8471226

Answer 2

I don't know what is the actual problem in your code. But this seems to be working for me. I've used array.find method. More info about Array.find is here .

 <html> <body> <script> var images = [{ "id":8471226, "base64Image":"encodedText" },{"id":234,"base64Image":"somethingelse"}]; console.log("Finding image of id 23:",findImage(234)); console.log("Finding image of id 8471226:",findImage(8471226)); function findImage(id){ var found = images.find(function(element) { return element.id == id; }); return found; } </script> </body> </html>