ES6 - Create Strings using Template Literals

JavaScript
1

So the I have an error of:

// failuresList should be an array containing result failure messages.

on my following code:

const result = {
  success: ["max-length", "no-amd", "prefer-arrow-functions"],
  failure: ["no-var", "var-on-top", "linebreak"],
  skipped: ["no-extra-semi", "no-dup-keys"]
};
function makeList(arr) {
  // Only change code below this line
  for(let i = 0; i < arr.length; i++) {

  const failureItems = [];
  failureItems.push(`<li class="text-warning">${arr[i]}</li>`);
  return failureItems;
  }
  // Only change code above this line
  
}

const failuresList = makeList(result.failure);

I know I’m close to the answer, but I’m missing the other 2 li items:
var-on-top && linebreak.

So I think my problem is I’m breaking the iteration of my for loop with the return statement, but I’m not sure how to keep from doing so.

I tried:

const result = {
  success: ["max-length", "no-amd", "prefer-arrow-functions"],
  failure: ["no-var", "var-on-top", "linebreak"],
  skipped: ["no-extra-semi", "no-dup-keys"]
};
function makeList(arr) {
  // Only change code below this line
  for(let i = 0; i < arr.length; i++) {

  const failureItems = [];
  
  
  }
  // Only change code above this line
  failureItems.push(`<li class="text-warning">${arr[i]}</li>`);
  return failureItems;
}

const failuresList = makeList(result.failure);

which gives me error of:

failure should be an array containing result failure messages 
failure should be equal to the specified output

&& I tried:

const result = {
  success: ["max-length", "no-amd", "prefer-arrow-functions"],
  failure: ["no-var", "var-on-top", "linebreak"],
  skipped: ["no-extra-semi", "no-dup-keys"]
};
function makeList(arr) {
  // Only change code below this line
  for(let i = 0; i < arr.length; i++) {

  const failureItems = [];
  
  failureItems.push(`<li class="text-warning">${arr[i]}</li>`);
  }
  // Only change code above this line
  
  return failureItems;
}

const failuresList = makeList(result.failure);

Which gives me error of:

failuresList should be an array containing result failure messages. 
failuresList should be equal to the specified output.

I’m really trying not to guess at this and rather understand what I’m trying to code, but I’m just not seeing what to do or how to think this out.

If someone could please help me reason this out so I see my own folly.

Thanks in advance!

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36

Challenge: ES6 - Create Strings using Template Literals

Link to the challenge:

2

In your first try, as you correctly saw, you were breaking the loop in the first iteration when you returned.
In your second try, you moved 2 lines out of the loop. The line that did the pushing into the array and the return. So the loop did nothing in effect. And your array was empty because of that.
In your third try, you push into the array but then you promptly forget about that array as soon as the for loop has ended and thus you get the error since failureItems is scoped to the for loop only.

Move the array definition outside the loop and see how that helps.

1 Like
3

Nevermind I figured it out.
Sorry @hbar1st
I guess you were sending me help right when I was typing I figured it out.
Should I just delete this post?