map map return flat array in jQuery

Question

I want to have array of arrays.

My code:

image_data = $('.post-entry').map(function() {
    return $(this).find('img').map(function() {
      var self = $(this);
      return {
        big: self.hasClass('big') || self.hasClass('medium'),
        offset: self.offset(),
        width: self.width(),
        height: self.height()
      };
    }).get();
  }).get();

but when I have two post-entry elements and each have 4 images I have array of 8 images. How can I get array of two elements of 4 elements each? Why I got flat array?

JSFIDDLE

Interesting...seems like it should work. Could you make a fiddle (swap images out for something else)? — tymeJV
– tymeJV, Commented Oct 3, 2013 at 13:22
try to switch the order of the call of your functions, first img.map then .post-entry.map ... — Oliboy50
– Oliboy50, Commented Oct 3, 2013 at 13:28

Frédéric Hamidi · Accepted Answer · 2013-10-03 13:30:02Z

6

That's because the documentation for map() says (emphasis mine):

The function can return an individual data item or an array of data items to be inserted into the resulting set. If an array is returned, the elements inside the array are inserted into the set.

Therefore, map() flattens the arrays you return, and this behavior is by design.

Try wrapping these arrays into another array, as I believe map() only flattens once:

image_data = $('.post-entry').map(function() {
    return [
        $(this).find('img').map(function() {
            var self = $(this);
            return {
                big: self.hasClass('big') || self.hasClass('medium'),
                offset: self.offset(),
                width: self.width(),
                height: self.height()
            };
        }).get()
    ];
}).get();

answered Oct 3, 2013 at 13:30

Frédéric Hamidi

264k42 gold badges497 silver badges486 bronze badges

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

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

You could create an empty array, and then add an index for each post-entry, containing the img objects. I suspect there could be a better way to do this, though:

var image_data = [];
$('.post-entry').each(function(i) {

  image_data[i] = $(this).find('img').map(function() {
    var self = $(this);
    return {
      big: self.hasClass('big') || self.hasClass('medium'),
      offset: self.offset(),
      width: self.width(),
      height: self.height()
    };
  }).get(); 

});

Here's a fiddle

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Oct 3, 2013 at 13:30

billyonecan

20.3k9 gold badges44 silver badges66 bronze badges

Collectives™ on Stack Overflow

map map return flat array in jQuery

2 Answers 2

Comments

Here's a fiddle

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