How to dynamically add a class to an HTMLCollection (problem converting HTMLCollection into an array)?

Question

content = document.getElementsByClassName('outercontent'); 

produces an HTMLCollection of the targeted div element.

I'm trying to add a string at each index from the array admin1 to the classList of each div at each index.

for(var i = 0; i < content.length; i++) {
  content[i].classList.add(admin1[i]);
}

When I console.log content now, I can see the new class added - however it only displays the first string in the admin1 array for all divs.

I've read that you can't use a for loop on HTMLCollections, so I tried to convert content into an array here:

var contentarr = [...content];

But when I console.log contentarr, I see it only has a length of 1 (index 0).

(This may have something to do with the fact that only one of these divs exists in the html initially until it is multiplied ng-repeat (angularjs)?)

So how can I convert the HTMLCollection into an array and then add the classes from the admin1 array?

Thank you.

EDIT

More context-

var subdivs2 = [];
var subdivs2 = angular.element(document.querySelector('[ng- 
controller="mainCtrl"]')).scope().subdivisions2

for(var i = 0; i < subdivs2.length; i++) {
  subdivs2[i] = subdivs2[i]["province"];
}

var admin1 = [];
for(var i = 0; i < subdivs2.length; i++) {
  admin1[i] = subdivs2[i][0]["name"];
}

I have a nested array in my angular controller called subdivisions2. I put all values of the key called "name" into an the admin1 array.

admin1 looks like this:

0: "Adrar"
1: "Algiers"
2: "Annaba"
3: "Aïn Defla"
4: "Aïn Témouchent"
5: "Batna"
6: "Biskra"
7: "Blida"
8: "Bordj Bou Arréridj"
9: "Boumerdès"
10: "Bouïra"
11: "Béchar"
12: "Béjaïa"
13: "Chlef"
14: "Constantine"
15: "Djelfa"
16: "El Bayadh"
17: "El Oued"
18: "El Taref"
19: "Ghardaïa"
20: "Illizi"
21: "Jijel"
22: "Khenchela"
23: "Laghouat"
24: "M'Sila"
25: "Mascara"
26: "Mila"
27: "Mostaganem"
28: "Médéa"
29: "Naâma"
30: "Oran"
31: "Ouargla"
32: "Oum el-Bouaghi"
33: "Relizane"
34: "Saïda"
35: "Sidi Bel Abbès"
36: "Skikda"
37: "Souk Ahras"
38: "Sétif"
39: "Tamanghasset"
40: "Tiaret"
41: "Tindouf"
42: "Tipaza"
43: "Tissemsilt"
44: "Tizi Ouzou"
45: "Tlemcen"
46: "Tébessa"

Interestingly, when I view the HTMLCollection, it says 'length: 47' at the bottom (same length as admin1). But when I put console.log(content.length); it says 1. Why is this?

Answer 1

The problem is that you only have one loop and that loop is iterating over the HTML elements just fine, but as it goes over each (just one time), it only adds the style from the current loop index.

You need two loops here, one to go through the elements and another to go through the styles while still on the element.

Here's an example:

let classes = ["big","bold","blue"];

// First, get all the elements you'll want to work with.
// Don't use .getElementsByClassName! Use .querySelectorAll()
let els = document.querySelectorAll(".special");

// You can use regular counting loops on HTMLCollections, but
// Arrays offer more robust looping without you having to manage 
// indexes. So, we'll convert the collection to an array:
els = Array.prototype.slice.call(els);

// Loop over the elements array
els.forEach(function(el){
   
   // Now, while we are on just one of the elements,
   // start a second loop to go over the string array
   classes.forEach(function(cls){
      // Add the class to the element that we're currently looping over
      el.classList.add(cls);
   });

});

.big { font-size:2em; }
.bold { font-weight:bold; }
.blue { color:blue; }

<div class="special">Some Content</div>
<p>Some Content</p>
<div>Some Content</div>
<p class="special">Some Content</p>
<div class="special">Some Content</div>
<p>Some Content</p>
<div>Some Content</div>
<p>Some Content</p>

NOTE: Don't use .getElementsByClassName()!