toArray() and keeping data attributes

Question

How is it possible to pass an array of elements as well as keeping the data attributes using jQuery? currently I've got the following:

$('body').on('click', '.selectItem', function() {
    data: {
        'hash': $(this).data("hash"),
        'id': $(this).data("id"),
        'inspect': $(this).data("inspect"),
        'stickers': $(this).data("stickers")
    }
});

How would I be able to do something like this?

$('.getItems').click(function(event) {
    data: {
        'items': $('.selectItem').andAttributes().toArray()
    }
});

I'm guessing I could do something like a foreach & then add them into an array for each element, but doesn't jQuery have a simple solution?

My expected result from doing something like this $('.selectItem').andAttributes().toArray() would be something like:

{
    0: {
        'hash': $(this).data("hash"),
        'id': $(this).data("id"),
        'inspect': $(this).data("inspect"),
        'stickers': $(this).data("stickers")
    },
    1: {
        'hash': $(this).data("hash"),
        'id': $(this).data("id"),
        'inspect': $(this).data("inspect"),
        'stickers': $(this).data("stickers")
    }
    2: {
        'hash': $(this).data("hash"),
        'id': $(this).data("id"),
        'inspect': $(this).data("inspect"),
        'stickers': $(this).data("stickers")
    }
    etc....
}

possible duplicate of: (https://stackoverflow.com/questions/14645806/get-all-attributes-of-an-element-using-jquery) — Ryan Wilson, Mar 22 '18 at 18:40
*"I've got the following"* Which has syntax errors, and trying to read past them, doesn't seem to do anything. What do you want it to do? That's not at all clear from the question. — T.J. Crowder, Mar 22 '18 at 18:42
This code makes no sense. Is there supposed to be a `$.ajax()` call around the object with the `data:` property? — Barmar, Mar 22 '18 at 18:43
@T.J.Crowder it's pretty clear what I want it to do? gather the data attributes for each `.selectItem` and put them into an array so I can pass across to Ajax. — Curtis, Mar 22 '18 at 18:43
@Barmar yes, I just didn't think it was necessary to clog up the full question with an Ajax function — Curtis, Mar 22 '18 at 18:44
What are you expecting to send to the server in the `items` parameter? `$('.selectItem').toArray()` returns an array of DOM elements, they can't be serialized. — Barmar, Mar 22 '18 at 18:45
No. If it had been clear, I would have understood it. Your *comment* is clear. — T.J. Crowder, Mar 22 '18 at 18:45
If you just want data attributes, you can use `.data()`, which returns an object that maps every data attribute to its value. — Barmar, Mar 22 '18 at 18:47

T.J. Crowder · Accepted Answer · 2018-03-22T18:52:02.827

You're probably looking for map (jQuery's, not Array's) combined with get (to get the actual array). You can also use the no-arguments version of data to get an object to pick those properties from:

var a = $(/*...selector for elements...*/).map(function() {
    var data = $(this).data(); // Get the data as an object
    // Grab the properties from it you want
    return {
        'hash': data.hash,
        'id': data.id,
        'inspect': data.inspect,
        'stickers': data.stickers
    }
}).get();

a will be an array of objects with properties hash, id, etc.

(BTW: No need to put those property names in quotes.)

Live Example (with just a couple of attrs):

var a = $(".stuff").map(function() {
    var data = $(this).data();
    return {
        hash: data.hash,
        id: data.id/*,
        inspect: data.inspect,
        stickers: data.stickers*/
    }
}).get();
console.log(a);

.as-console-wrapper {
  max-height: 100% !important;
}

<div class="stuff" data-id="one" data-hash="hash one"></div>
<div class="stuff" data-id="two" data-hash="hash two"></div>
<div class="stuff" data-id="three" data-hash="hash three"></div>
<div class="stuff" data-id="four" data-hash="hash four"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

@Curtis: No worries! As I was doing the live example I remembered you can get the data in a somewhat more concise way, see the update. :-) — T.J. Crowder, Mar 22 '18 at 18:52

score 0 · Answer 2 · answered Mar 22 '18 at 18:50

The .data() method with no arguments will return an object containing all the data attributes. Use .map() to iterate over all the elements matching the selector, and .get() to convert the resulting collection to an array.

data: $('.selectItem').map(function() {
    return $(this).data();
}).get()

toArray() and keeping data attributes

2 Answers2