Different output from .map() and .each()

Question

I cannot for the life of me figure out the difference between these two blocks of code:

var text = [];
$(".article-text p").each(function() {
    text.push( $(this).text() );
});

And

var text = $('.article-text p').map(function() {
    return $(this).text();
});

They look to me like they produce the same exact output when tested in console on the following page. However, the first one can be run by JSON.stringify, and the second cannot.

My error message in the crawler says

Error invoking user-provided 'pageFunction': Error: TypeError: JSON.stringify cannot serialize cyclic structures.

My error message in console says:

Uncaught DOMException: Blocked a frame with origin "http://yaledailynews.com" from accessing a cross-origin frame. at JSON.stringify () at :1:6

When I compare the two objects, they look exactly the same, except that the second has a context property. I have deleted this property but the errors still remain.

$.map() returns a jQuery object: "As the return value is a jQuery object, which contains an array, it's very common to call .get() on the result to work with a basic array." — Andreas
– Andreas, Commented Jan 12, 2017 at 20:08
When a jQuery method seems to be doing something unexpected, or unanticipated, look at the documentation. It's not perfect, but it's very good and clearly documents what the method does, what arguments it may expect and what it returns. — David Thomas
– David Thomas, Commented Jan 12, 2017 at 20:31
A bit late, but thank you so much! I didn't even know that they were jQuery methods, I am not so great at coding. — William J. Sun
– William J. Sun, Commented Apr 22, 2017 at 0:51

nem035 · Accepted Answer · 2017-01-12 20:41:22Z

From the docs for jQuery.map

Array-like objects — those with a .length property and a value on the .length - 1 index — must be converted to actual arrays before being passed to $.map(). The jQuery library provides $.makeArray() for such conversions.

Since $('.article-text p') will return an array-like collection (of jQuery objects), you must call $.makeArray on it:

function one() {
  var text = [];
  $(".test").each(function() {
    text.push($(this).text());
  });
  return text;
}

function two() {
  var text = $('.test').map(function() {
    return $(this).text();
  });
  return text;
}

console.log(one());
// use makeArray here
console.log($.makeArray(two()));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">A</div>
<div class="test">B</div>
<div class="test">C</div>

Docs also say

As the return value is a jQuery object, which contains an array, it's very common to call .get() on the result to work with a basic array.

function one() {
  var text = [];
  $(".test").each(function() {
    text.push($(this).text());
  });
  return text;
}

function two() {
  var text = $('.test').map(function() {
    return $(this).text();
  }).get(); // <--- call get here
  return text;
}

console.log(one());
console.log(two());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">A</div>
<div class="test">B</div>
<div class="test">C</div>

Collectives™ on Stack Overflow

Different output from .map() and .each()

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related