jQuery.map errors when returning a map of object properties

Question

In the following example:

HTML:

<ul>
  <li id="0"></li>
  <li id="213"></li>
  <li id="324"></li>
  <li id="764"></li>
</ul>

JS:

var map = $("ul").children().map(function(i, el) {
  return el.id;
});

console.log(Array.prototype.slice.call(map).join(":")); // 0:213:324:764 
console.log(map.join(":")); //error: Uncaught TypeError: undefined is not a function

The map function will error if trying to use native array methods,

if you parse the returned jq 'array' into a normal array - everything works.

What could be the reason to it?

Fiddle: http://jsfiddle.net/hQZqU/1/

A jquery object is not an array and therefore doesn't have a join method. Call .get() first to convert the an array from the jquery object. — Felix Kling
– Felix Kling, Commented Jun 16, 2014 at 14:16
jsfiddle.net/ue2zc use map.get().join(":") @FelixKling comments pretty much sums up thing — Satpal
– Satpal, Commented Jun 16, 2014 at 14:16
thank you, but what baffles me is that the structure is array like, i,e: [val, val, val]. Is it possible to mimic such structure in JS without it being an array? — silicakes
– silicakes, Commented Jun 16, 2014 at 14:18
Yes. Every object that has numeric properties and a .length property is an array-like object. And thinking about it, since a jquery object usually contains DOM elements, what should happen when you concatenate them with a string? — Felix Kling
– Felix Kling, Commented Jun 16, 2014 at 14:42
More on array like objects here: stackoverflow.com/questions/1483445/… — shem86
– shem86, Commented Jun 16, 2014 at 14:46

Samuel Caillerie · Accepted Answer · 2014-06-16 14:17:42Z

3

Your selector is a jQuery object ($("ul").children()), so map return this jQuery list of objects :

jQuery("0", "213", "324", "764")

In order to have an array, you have to use toArray :

console.log(map.toArray().join(":"));

You can look at this fiddle : http://jsfiddle.net/hQZqU/2/

answered Jun 16, 2014 at 14:17

Samuel Caillerie

8,2652 gold badges29 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Md Nazmoon Noor · Accepted Answer · 2014-06-16 14:46:51Z

0

.map() will return jquery object but .get() on the result to work with a basic array.

var map = $("ul").children().map(function(i, el) {
    return el.id;
}).get();

jsfiddle demo

answered Jun 16, 2014 at 14:46

Md Nazmoon Noor

3,3271 gold badge27 silver badges30 bronze badges

Collectives™ on Stack Overflow

jQuery.map errors when returning a map of object properties

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related