How to fix for loop isn’t getting results in string array in JavaScript

Question

I’m creating a music player, and I ran into a problem with a for loop and an array. I have the following function in my main.js file

function CreateDatabaseArtists() {
  for (n = 0; n < DatabaseArtists.length+1; n++) {
    if (DatabaseArtists[n.toString()].name === "") {} else {      
      let NewArtistBtn = document.createElement("div");
      NewArtistBtn.id = DatabaseArtists[n].artistgroup;
      // NewArtistBtn.onclick = function() {OpenArtist(NewArtistBtn.id);};
      NewArtistBtn.classList.toggle("column");
      NewArtistBtn.setAttribute("style", "word-wrap: break-word; float: none; width: 150px; text-align:center;align-items:center; display: inline-block; white-space: nowrap; overflow: hidden; text-overflow:ellipsis;");           
      let ArtistIMG = document.createElement("img");
      if (DatabaseArtists[n].ArtistArt == "") {
        ArtistIMG.src = "https://iplock.weebly.com/uploads/9/5/7/3/95731436/p298.png";
        ArtistIMG.style.borderRadius = "50%";
      } else {
        ArtistIMG.src = DatabaseArtists[n].ArtistArt;
        ArtistIMG.style.borderRadius = "50%";
      }
      ArtistIMG.style.width = "150px"; ArtistIMG.style.height = "150px";
      NewArtistBtn.appendChild(ArtistIMG);
      let text = document.createElement("p");
      text.innerHTML = "ahhh-humbug";
      // DatabaseArtists[b].name;
      ArtistIMG.setAttribute("aria-label", text.innerHTML);
      NewArtistBtn.appendChild(text);
      document.getElementById("artists").appendChild(NewArtistBtn);
    }
  }
}

And the part with

for (n = 0; n < DatabaseArtists.length+1; n++) {
        if (DatabaseArtists[n.toString()].name === "") {}

Keeps failing, I get an error message saying that it cant find the variable for “name” even though in the array it is "name": "AJR", "explicit": false, "artistgroup": "ajr", "ArtistArt": "" What am i supposed to do?

Can you post the actual error message? And the output for console.log(DatabaseArtists[n.toString()])? — Samsquanch
– Samsquanch, Commented Dec 20, 2018 at 15:24
Have you initialised the ‘n’ var somewhere else in your code? That could be your issue if you haven’t. var n = 0; — Lloyd Nicholson
– Lloyd Nicholson, Commented Dec 20, 2018 at 15:39
@LloydNicholson no I haven’t, its is the first and only “n” variable in my code. — Ridley Nelson
– Ridley Nelson, Commented Dec 20, 2018 at 18:44
@Samsquanch the error code is just “cant find variable DatabaseArtists[n].name” — Ridley Nelson
– Ridley Nelson, Commented Dec 20, 2018 at 18:45
@RidleyNelson initialise it in the for loop then. var n = 0; — Lloyd Nicholson
– Lloyd Nicholson, Commented Dec 20, 2018 at 18:49

Gabriel Negut · Accepted Answer · 2018-12-20 15:27:08Z

3

for (n = 0; n < DatabaseArtists.length+1; n++)

You are iterating past the end of the array, so the last loop will try to access the name property on undefined. The index should go from 0 to length - 1.

answered Dec 20, 2018 at 15:27

Gabriel Negut

14k4 gold badges40 silver badges47 bronze badges

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

Comments

user10816254 · Accepted Answer · 2018-12-20 15:39:05Z

1

Honest bit of advice, why don't you break up the application, it's just easier to maintain that way. Also if you use a forEach method, you don't have to worry about index to the same extent as you would if you used a tradtitional for loop.

const defaultStyle = "word-wrap: break-word; float: " +
  "none; width: 150px; text-align:center;align-items:center; " +
  "display: inline-block; white-space: nowrap; " +
  "overflow: hidden; text-overflow:ellipsis;";
const defaultImg = 'https://iplock.weebly.com/uploads/9/5/7/3/95731436/p298.png';
const appRoot = document.getElementById("artists");


const createImage = artist => {
  const img = document.createElement("img");
  const source = artist.ArtistArt === '' ? defaultImg : artist.ArtistArt;

  img.src = source;
  img.style.borderRadius = "50%";
  img.style.width = "150px";
  img.style.height = "150px";

  return img;
};


const createButton = artist => {
  const btn = document.createElement("div");
  const img = createImage(artist);
  const ptag = document.createElement("p");

  ptag.innerHTML = "ahhh-humbug";
  btn.id = artist.artistgroup;
  btn.classList.toggle("column");

  btn.setAttribute("style", defaultStyle);
  btn.appendChild(img);
  btn.appendChild(ptag);

  return btn;
};


const createDatabaseArtists = () => {
  databaseArtists.forEach(artist => {
    if (artist.name !== '') {
      appRoot.appendChild(createButton(artist));
    }
  });
};

answered Dec 20, 2018 at 15:39

user10816254

3 Comments

Ridley Nelson Over a year ago

Thank you! If it weren’t for you, I probably wouldn’t of even thought about using a forEach statement.

user10816254 Over a year ago

@RidleyNelson it's fine, I'm glad that I was of help! :) I've been trying to get myself into writing my JavaScript in a more functional style for some time now, and usign methods such as forEach or map, etc, makes life a lot easier.

Ridley Nelson Over a year ago

Cool. I just ran into a problem, what is the value of artist?

Collectives™ on Stack Overflow

How to fix for loop isn’t getting results in string array in JavaScript

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related