Create an array from 'for of' loop outputs

Question

I have a for of statement in JS that returns HTML element ids but they are in multiple outputs. I would like to take these outputs and put them in an array.

For example the HTML is:

<div>
    <button id="savebtn-1"></button>
</div>
<div>
    <button id="savebtn-2"></button>
</div>

and my JS is:

const elements = document.querySelectorAll("button");
for (const element of elements) {
    let id = elements.getAttribute("id");
}

console.log(id) will show:

savebtn-1

savebtn-2

How can I get these outputs into an array?

Thanks for any attention you may give this question.

You already have the elements in the list, why to mess with the ids ..? — Teemu, Sep 28 '22 at 05:54
The buttons save a a text area value to the local storage. I have nine buttons and all nine are working to that effect. I t's just a stupid amount of redundancy that I have written for each button. I want to iteratively apply the event listener to each button. — C Dub, Sep 28 '22 at 06:18
I'm thinking that looping through an array will achieve this — C Dub, Sep 28 '22 at 06:19
Umm ... You can iterate the NodeList, and add event listeners. It sounds like you could make your code much simple by using [event delegation](https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation). Ids are purposed to be used for elements not related to each other in any way, these savebuttons are more like a class of buttons. — Teemu, Sep 28 '22 at 06:23
Please take a look at [this jsFiddle](https://jsfiddle.net/8sfeo36g/). It shows you a simple event delegation example. The example uses `previousElementSibling` to find the target textarea in the click handler. If the structure is more complicated, you can use some other DOM method or property to get the textarea. The idea is to create a robust HTML structure, and then identify an element by its location in the structure, or with very complex and less regular structure, you can get the element using `querySelector` method of `e.target.parentElement`. — Teemu, Sep 28 '22 at 10:31
Teemu, I really appreciate your time. You have given me much to chew on. I am a mental infant in this space but I am enjoying the growing pains. You rock my friend! Keep making the world a better place. — C Dub, Sep 28 '22 at 16:44

John Mack · Answer 1 · 2022-09-28T06:00:13.780

3

Make another array and store all the id's inside that array.

const resultArray = [];
const elements = document.querySelectorAll("button");

for (const element of elements) {
    const id = element.getAttribute("id");
    resultArray.push(id);
}
console.log(resultArray);

<div>
<button id = "savebtn-1">Button 1</button>
</div>
<div>
<button id = "savebtn-2">Button 2</button>
</div>

edited Sep 28 '22 at 06:00

answered Sep 28 '22 at 05:58

John Mack

73
5

You rock Mr. Mack! Super helpful – C Dub Sep 28 '22 at 06:22
The question asks for a solution using a "for of" loop. And so this is the correct answer even though there are other (better) ways to do it without a for loop. +1 – Yogi Sep 28 '22 at 06:26
Thanks yogi. I had a supervisor tell me that I like to do things the hard way... yep. I appreciate you keeping to the context of the question. – C Dub Sep 28 '22 at 16:47

score 1 · Answer 2 · answered Sep 28 '22 at 05:55

1

Use Array.from() on the NodeList and a custom mapper to extract the IDs

const idArray = Array.from(
  document.querySelectorAll("button"),
  ({ id }) => id
);

console.log(idArray);

<div>
  <button id="savebtn-1">Button #1</button>
</div>
<div>
  <button id="savebtn-2">Button #2</button>
</div>

answered Sep 28 '22 at 05:55

Phil

157,677
23
242
245

Thanks a bunch phil! I was so close to this solution earlier but somehow I was get nine single arrays like: ["savebtn-1"] ["savebtn-2"] and so on. – C Dub Sep 28 '22 at 06:24
This would be the preferred solution even though the question asks specifically how to do it using a "for of" loop. +1 – Yogi Sep 28 '22 at 06:31

score 1 · Answer 3 · answered Sep 28 '22 at 05:57

You can create an empty array and push ids into that array.

const elements = document.querySelectorAll("button");

const idArray = [];

for (const element of elements) {
    let id = elements.getAttribute("id");
    idArray.push(id);
}

console.log('idArray ', idArray);

Create an array from 'for of' loop outputs

3 Answers3