I have the following list.
<div class="taco" data-id="2"></div>
<div class="taco" data-id="3"></div>
<div class="taco" data-id="4"></div>
<div class="taco" data-id="23"></div>
<div class="taco" data-id="55"></div>
and I use the following code to get all of them in a list.
let tacos = document.querySelectorAll(".taco");
Then I use the following code to get all the datasets
let tacosArray = [];
for (let i = 0; i < tacos.length; index++) {
tacosArray.push(tacos[i].dataset.id);
}
I now have an array of datasets, but there has to be a better way.
One possibility is Array.from with its mapper function.
const tacos = Array.from(
document.querySelectorAll('.taco'),
div => div.dataset.id
);
console.log(tacos);<div class="taco" data-id="2"></div>
<div class="taco" data-id="3"></div>
<div class="taco" data-id="4"></div>
<div class="taco" data-id="23"></div>
<div class="taco" data-id="55"></div>The spread operator ... and .map()
const ids = [...document.querySelectorAll('.taco')].map(id => id.dataset.id);
console.log(JSON.stringify(ids));<div class="taco" data-id="2"></div>
<div class="taco" data-id="3"></div>
<div class="taco" data-id="4"></div>
<div class="taco" data-id="23"></div>
<div class="taco" data-id="55"></div>