How do I add HTML attributes to an array using Javascript

Question

I am trying to add attributes from three HTML elements to an array.

Here is some sample HTML:

<p x="30">Paragraph 1</p>
<p x="50">Paragraph 2</p>
<p x="100">Paragraph 3</p>

Here is the Javascript that has gotten me closest to the results I am looking for:

const paragraphs = document.querySelectorAll(`p`);
      let i;
      for (i = 0; i < paragraphs.length; i++) {
        let dataSetOne = paragraphs[i].getAttribute('x');
        let dataSetOneArray = Array.from(dataSetOne);

      }

When I console.log(dataSetOne), I get "30" "50" "100", which is what I hoped for.

When I try to add these attributes to an array using Array.from(dataSetOne), I end up with three arrays that look like this: Array(1) [ "3", "0" ]; Array(2) [ "5", "0" ] Array(3) [ "1", "0", "0" ].

The array I am looking for is this: Array ["30", "50", "100"]

I have tried a few other functions, but none of these are getting me any closer to the result I am looking for.

This is not for a specific project. I am trying to advance my understanding of arrays and object-oriented programming.

Thanks in advance for your help.

Mamun · Accepted Answer · 2020-03-16 00:28:08Z

1

Array.from()

The Array.from() method creates a new, shallow-copied Array instance from an array-like or iterable object.

Since you are using Array.from() inside of the for loop in each iteration new array is creating. You can simply declare the array (dataSetOneArray) outside of the loop and push the attribute value directly.

const paragraphs = document.querySelectorAll(`p`);
let dataSetOneArray = [];
let i;
for (i = 0; i < paragraphs.length; i++) {
  let dataSetOne = paragraphs[i].getAttribute('x');
  dataSetOneArray.push(dataSetOne);
}

Though, you can achieve that in a more simpler way using Array.prototype.map():

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

var elList = Array.from(document.querySelectorAll('p'));
var res = elList.map(el => el.getAttribute('x'));
console.log(res);

<p x="30">Paragraph 1</p>
<p x="50">Paragraph 2</p>
<p x="100">Paragraph 3</p>

edited Mar 16, 2020 at 0:28

answered Mar 16, 2020 at 0:03

Mamun

69k9 gold badges51 silver badges62 bronze badges

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

3 Comments

rguttersohn Over a year ago

Thanks for the response. Quick question regarding your first method using Array.from, is it hoisting that allows for the array to be used globally even though it is assembled within the for loop?

Mamun Over a year ago

@rguttersohn, no, Array.from() converts the nodelist returned by querySelectorAll() to array, which in turn allows array method map().

rguttersohn Over a year ago

Correction: I meant the array.push method used in the first method.

Alex - Tin Le · Accepted Answer · 2020-03-16 00:04:18Z

1

How about

let dataSetOneArray = [];
for (i = 0; i < paragraphs.length; i++) {
    let dataSetOne = paragraphs[i].getAttribute('x');
    dataSetOneArray.push(dataSetOne);
  }

answered Mar 16, 2020 at 0:04

Alex - Tin Le

2,0101 gold badge8 silver badges11 bronze badges

Collectives™ on Stack Overflow

How do I add HTML attributes to an array using Javascript

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related