jQuery each and map to a new object based on data-attribute

Question

I'm trying to extract all IDs from multiple elements based on data-attribute.

Here is my html:

<div class="row">
  <div class="item" data-element='{"id":1, "name":"John"}'>John</div>
  <div class="item"></div>
</div>
<div class="row">
  <div class="item"data-element='{"id":2, "name":"Peter"}'>Peter</div>
  <div class="item"></div>
</div>

and javascript:

var result = [];
$('[data-element]').each(function() {
    result = $(this).data('element');
}); 

$.map(result, function( val, i ) {
   console.log(val)
});

The problem is that I only get the last element. Console log shows 2 Peter.

What I would like to be the final result is all id's as well as names extracted in form of an array like:

id = [1,2]
name = ['John', 'Peter']

Does this answer your question? JQuery get all data attributes from a list — Kevin C
– Kevin C, Commented Sep 18, 2021 at 0:59

charlietfl · Accepted Answer · 2016-12-18 02:47:36Z

2

Start with empty arrays and push each value into corresponding array within one loop. You seem to be over complicating it

var arrObj={ id:[], name:[] };

$('[data-element]').each(function() {
   var data = $(this).data('element');
   arrObj.id.push(data.id);
   arrObj.name.push(data.name);
});

console.log(JSON.stringify(arrObj,null,' '))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="row">
  <div class="item" data-element='{"id":1, "name":"John"}'>John</div>
  <div class="item"></div>
</div>
<div class="row">
  <div class="item"data-element='{"id":2, "name":"Peter"}'>Peter</div>
  <div class="item"></div>
</div>

If you had a lot of properties and wanted each property value in an array you could run another internal loop over the properties instead of manually writing each push, something like:

$.each(data, function(key, value){
   arrObj[key].push(value);
})

edited Dec 18, 2016 at 2:47

answered Dec 18, 2016 at 2:30

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

1 Comment

Alko Over a year ago

Thank you perfect.

Dekel · Accepted Answer · 2016-12-18 02:39:18Z

You should use the map inside the each function you have:

var result = [];
var id = [];
var name = [];
$('[data-element]').each(function() {
  result = $(this).data('element');
  
  id[id.length] = result.id;
  name[name.length] = result.name;
  
  $.map(result, function( val, i ) {
    console.log(val)
  });
  
});

console.log(id)
console.log(name)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="item" data-element='{"id":1, "name":"John"}'>John</div>
  <div class="item"></div>
</div>
<div class="row">
  <div class="item"data-element='{"id":2, "name":"Peter"}'>Peter</div>
  <div class="item"></div>
</div>

Otherwise - the each function walk over all your elements, and when the loop is done - the value in result is the value of the last element that has [data-element] attribute (and you map the function to that result).

Based on what you want to get - I'm not sure you even need the map function there. Check the usage of result.id and result.name in my code.

cstad · Accepted Answer · 2016-12-18 03:20:12Z

0

You are setting an empty array to the value of $(this).data('element') on every iteration of your forEach loop. So, the last iteration will always be the value of result when you evaluate it. Use the Array methods to add items to the array instead of setting it; so instead of result = $(this).data('element'); it should be result.push($(this).data('element'));

answered Dec 18, 2016 at 3:20

cstad

11 bronze badge

Collectives™ on Stack Overflow

jQuery each and map to a new object based on data-attribute

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related