I am trying to loop through 2 arrays. The first array is the link name the second array is the links 'a' value. I want to loop through the two arrays attaching the value of the second array to the href of each link that is created / in the first array. This is what I have and it not working for me.

const links = ['Home', 'Contact', 'About'];
const hrefLinks = ['/', 'contact', 'about'];

for (let i = 0; i < links.length; i++) {
    for (let j = 0; j < hrefLinks.length; i++) {
        if (links.length === hrefLinks.length) {
            const li = document.createElement('li');
            const liLink = document.createElement('a');
            liLink.setAttribute('href', hrefLinks[i]);
            liLink.className = 'Test-Class';
            li.appendChild(liLink);
            li.className = 'nav-link';
            list.appendChild(li);
            li.innerHTML += links[i];
        }
    }
}

I do have it working with one forEach loop but got confused on how I would nest the second forEach;

const links = ['Home', 'Contact', 'About'];
const hrefLinks = ['/', 'contact', 'about'];

 links.forEach(function (link) {
     const li = document.createElement('li');
     const liLink = document.createElement('a');
     li.appendChild(liLink);
     li.className = 'nav-link';
     list.appendChild(li);
     li.innerHTML += link;
 });

Is this the proper way of doing this or is there an easier / cleaner way of doing this?

I am trying to loop through 2 arrays. The first array is the link name the second array is the links 'a' value. I want to loop through the two arrays attaching the value of the second array to the href of each link that is created / in the first array. This is what I have and it not working for me.

const links = ['Home', 'Contact', 'About'];
const hrefLinks = ['/', 'contact', 'about'];

for (let i = 0; i < links.length; i++) {
    for (let j = 0; j < hrefLinks.length; i++) {
        if (links.length === hrefLinks.length) {
            const li = document.createElement('li');
            const liLink = document.createElement('a');
            liLink.setAttribute('href', hrefLinks[i]);
            liLink.className = 'Test-Class';
            li.appendChild(liLink);
            li.className = 'nav-link';
            list.appendChild(li);
            li.innerHTML += links[i];
        }
    }
}

I do have it working with one forEach loop but got confused on how I would nest the second forEach;

const links = ['Home', 'Contact', 'About'];
const hrefLinks = ['/', 'contact', 'about'];

 links.forEach(function (link) {
     const li = document.createElement('li');
     const liLink = document.createElement('a');
     li.appendChild(liLink);
     li.className = 'nav-link';
     list.appendChild(li);
     li.innerHTML += link;
 });

Is this the proper way of doing this or is there an easier / cleaner way of doing this?

• javascript
• html
• for-loop
• foreach

• Can you make the third sentence in your first paragraph clearer? State more clearly what you want. – Robert Harvey Commented Dec 11, 2018 at 6:11
• are you using jquery? – Azad Commented Dec 11, 2018 at 6:12
• @RobertHarvey changed – Perry Craft Commented Dec 11, 2018 at 6:25
• @azad No I am not pure Js – Perry Craft Commented Dec 11, 2018 at 6:25

4 Answers 4

You don't want a nested loop - you simply need to link the ith item in links to the ith item of hrefLinks. With forEach, you can do this just by using the second argument to the callback, which will refer to the current index being iterated over:

const list = document.body.appendChild(document.createElement('ul'));


const links = ['Home', 'Contact', 'About'];
const hrefLinks = ['/', 'contact', 'about'];

links.forEach((linkName, i) => {
  const li = document.createElement('li');
  const a = document.createElement('a');
  a.href = hrefLinks[i];
  a.textContent = linkName;
  li.appendChild(a);
  li.className = 'nav-link';
  list.appendChild(li);
});

create an objects array which holds the link name and url, then you can iterate that object for add the anchor elements into you dom, as follows

//an object which hold navigation url and name
var navLinks = [{
  label: 'Home',
  href: '/'
}, {
  label: 'Contact',
  href: 'contact'
}, {
  label: 'About',
  href: 'about'
}]

navLinks.forEach(function(link) {

  var li = document.createElement('li');
  li.className = 'nav-link';

  var liLink = document.createElement('a');
  var linkText = document.createTextNode(link.label);
  liLink.appendChild(linkText);
  liLink.className = 'Test-Class';
  liLink.href = link.href;

  li.appendChild(liLink);
  document.body.appendChild(li)

});

Replace for-loops by this (we update document only once):

document.body.innerHTML += links.map( (link,i)=>`
    <li class="nav-link">
        <a class="Test-Class" href="${hrefLinks[i]}">${link}</a>
    </li> 
`).join('');

const links = ['Home', 'Contact', 'About'];
const hrefLinks = ['/', 'contact', 'about'];

document.body.innerHTML += links.map( (link,i) =>  `
    <li class="nav-link">
        <a class="Test-Class" href="${hrefLinks[i]}">${link}</a>
    </li> 
`).join('');

editable example here. If you need better performance use insertAdjacentHTML. I don't change input data but better approach is when you put href and link in single object like in azad answer, and then use map.

why don't you use an array of objects except for two arrays?

const anchors = [
  {
    name: 'Home',
    link: '/'
  },
  {
    name: 'Contact',
    link: 'contact'
  },
  {
    name: 'About',
    link: 'about'
  }
];

let ul = document.getElementById('list');

anchors.forEach(function(item) {
  let li = document.createElement('li');
  let a = document.createElement('a');
  a.className = 'nav-link';
  a.href = item.link;
  a.innerHTML = item.name;
  li.appendChild(a);
  ul.appendChild(li);
});

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Anchors</title>
</head>
<body>
  <ul id="list"></ul>
</body>
</html>

I think this is efficient.