CODEWITHSUNDEEP
javascriptfor-loop
Matt
Matt

Reputation: 105

For loop within a for loop? - Javascript

newbie javascript question. I made sure to research as much as I could before posting here, I've tried many solutions but could be searching for the wrong thing.

I've attached an image below of the issue I have. I'm trying to retrieve everything in the dark blue boxes, but I can't identify those input tags as there is nothing unique about them, I can however identify their parent divs by the class 'f-active'. When the divs have that class they have been selected by the user which is what I am interested in. page structure

My attempt so far

var divArray = document.querySelectorAll('div.add-filter.f-active');
var arr = [];
  
  for(var i=0; i < divArray.length; i++){
    var childArray = divArray[i].children;
     // console.log(childArray);
    
    for(var i=0; i < childArray.length; i++){  
      if(childArray[i].tagName == "INPUT"){
        var catNameCollection = arr.push(childArray[i].name);
        // console.log(catNameCollection);
  }
 }
}

I tried to use a for loop to get all the parents, then use another for loop to select the children (input tags) and then grab the name attribute, however it is just outputing numbers. I did originally try to create 'divArray' as document.querySelectorAll('div.add-filter.f-active').children, but this and then grab the name attribute in the for loop, but this didn't return anything at all.

Any help anyone could offer would be greatly appreciated, I'd love to know what I'm doing wrong.

Thank you!

Upvotes: 2

Views: 636

Answers (2)

Andrew Faulkner
Andrew Faulkner

Reputation: 3930

Classic for-loops usually aren't the best tool for iterating through DOM elements - they add a lot of clutter and are error-prone, especially when you have to nest them.

In your case it'd be simpler to instead modify your query to directly grab all input elements with a div.f-active parent, then extract the names by iterating through them with a forEach. For example (using ES6 or higher):

const arr = [];
// Get list of all <input> elements that have <div> element parents with class f-active.
const nodes = document.querySelectorAll('div.add-filter.f-active > input');
// Extract name from each input element matched by your selector.
nodes.forEach(node => arr.push(node.name));

Or if you're stuck using ES5:

var arr = [];
var nodes = document.querySelectorAll('div.add-filter.f-active > input');
nodes.forEach(function(node) {
    arr.push(node.name);
});

Here's a quick JSFiddle I put together to demonstrate the concept for you. (You'll need to open the console to see the result)

Hopefully that helps :)

Upvotes: 2

haMzox
haMzox

Reputation: 2109

Your i is same for both loops. Use:

var divArray = document.querySelectorAll('div.add-filter.f-active');
var arr = [];

  for(var i=0; i < divArray.length; i++){
    var childArray = divArray[i].children;
     // console.log(childArray);

    for(var k=0; k < childArray.length; k++){  
      if(childArray[k].tagName == "INPUT"){
        var catNameCollection = arr.push(childArray[k].name);
        // console.log(catNameCollection);
  }
 }
}

Upvotes: 3

Related Questions