Get value from array of JavaScript objects breaks when id is wrapped in quotes

Question

I have this JavaScript code below which gets me a value from an Array of Objects using an object Key to lookup another object keys value.

JSFiddle Demo http://jsfiddle.net/jasondavis/h5qnwb12/

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;
});
var imageUrl = result[0] && result[0].image;
console.log('Image URL for User '+result[0].name+' === '+imageUrl);

The above demo works just great but in my real app my userListArray has my id values wrapped in quotes which breaks the code and makes it return undefined

Demo of my id wrapped in quotes looks like this...

var userListArray = [
    {
      id: "0",
      image: "https://www.gravatar.com/avatar/ed1c4f28bbd649aad6c7e1f088ecf3a2?s=32&d=identicon&r=PG&f=1",
      name: "None"
    },
]

is there a way to make my code work when the id is wrapped in quotes?

Just change `return el.id === selectedId;` to `return el.id == selectedId;` and don't do strict comparison, problem solved. — adeneo, Dec 02 '15 at 23:52

Alex · Accepted Answer · 2015-12-02T23:51:56.707

If your quote your id value, the below statement will return false as you are comparing an string to an integer.

return el.id === selectedId;

You need to change the code to:

return el.id === selectedId.toString();

Or alternatively use == to prevent types being compared. I have include a code example to illustrate this:

var num = 0
document.write("0" === num)
document.write('<br/>')
document.write("0" == num)
document.write('<br/>')
document.write("0" === num.toString())

vergilius · Answer 2 · 2015-12-03T00:03:31.537

2

you could cast your id to integer:

var result = userListArray.filter(function (el) {
  return parseInt(el.id, 10) === selectedId;
});

or use ~~el.id instead of parseInt

edited Dec 03 '15 at 00:03

answered Dec 02 '15 at 23:45

vergilius

390
2
15

I'm all for the `parseInt` approach. Using type coercion seems brittle and converting both sides to strings seems strange when the comparison is numeric (certainly from OPs POV). – spender Dec 03 '15 at 00:00
However, an explicit radix of 10 can be omitted. It's 10 by default. – spender Dec 03 '15 at 00:01
Sack that last comment... [MDN has in bold ***Always specify this parameter***](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt). The 10 should stay. – spender Dec 03 '15 at 00:02

score 1 · Answer 3 · edited May 23 '17 at 12:23

1

You should use:

var result = userListArray.filter(function (el) {
  return el.id == selectedId; // instead of ===
});

JSFiddle Upgrade: http://jsfiddle.net/h5qnwb12/3/

I added debug information.

This is because "3" == 3 is true, and "3" === 3 is false according to the underlying type.

You might be interested by this: Difference between == and === in JavaScript

edited May 23 '17 at 12:23

Community

1
1

answered Dec 02 '15 at 23:56

Didier Aupest

3,227
2
23
35

Get value from array of JavaScript objects breaks when id is wrapped in quotes

3 Answers3