ES6: Create Strings using Template Literals - Help me please

JavaScript
1

Hello, everyone, I got stuck with this hard lesson and its examples are really complex.
This is the code how should I fix it:

const result = {
  success: ["max-length", "no-amd", "prefer-arrow-functions"],
  failure: ["no-var", "var-on-top", "linebreak"],
  skipped: ["id-blacklist", "no-dup-keys"]
};
function makeList(arr) {
  "use strict";

  // change code below this line
  const resultDisplayArray = null;
  // change code above this line

  return resultDisplayArray;
}
/**
 * makeList(result.failure) should return:
 * [ <li class="text-warning">no-var</li>,
 *   <li class="text-warning">var-on-top</li>, 
 *   <li class="text-warning">linebreak</li> ]
 **/
const resultDisplayArray = makeList(result.failure);
2

Well, you’re right, it’s not so easy to understand^^
What you’re supposed to do is to add the code which will return the commented output below when you pass to the function the argument result.failure.

The output looks like you have the same string (<li class="text-warning">xxx</li>) repeated with a different element inside it (xxx) - actually with each element of the argument array.

So, what the challenge expect you to do is to find a way to iterate over the array to get each element of the array itself and put it dinamically into that ‘repeated string’.

If this doesn’t help feel free to ask again^^
Good luck!

1 Like
3 
// change code below this line
  const resultDisplayArray = 
   [ `<li class="text-warning">${arr[0]}</li>`,
     `<li class="text-warning">${arr[1]}</li>`, 
     `<li class="text-warning">${arr[2]}</li>` ];
  // change code above this line

I wrote this and i cannot pass the 3rd test (“template literals were used”), can someone explain what’s wrong?

4

The answer requires you to use a map function. It’s not in the text, there is git hub post about it.

This thread should help: Create Strings using Template Literals

2 Likes
5

Thanks a lot, i wish they’ve been more clear about it

1 Like
6

Hi All,

   Here is my code and I was wondering why it only passed the first test. Any suggestions?

const resultDisplayArray = [] ;

for (let i = 0; i < arr.length ; i++) 
{
    resultDisplayArray.push(`<li class ="text-warning">${arr[i]}</li>`);
}
7

Hi,
The space between class and = probably is the reason for failing one of the tests. Not sure about the other one though. You clearly used template strings.

EDIT: I think your logic is perfectly valid but maybe the testing logic is flawed. After researching this some more it appears that the test chokes on any use of template strings that employ bracket notation in a loop.

You can try some array methods like forEach or map to avoid this or change your loop to not use bracket notation with for…of loop

for(let errorMessage of arr){
    resultDisplayArray.push(`<li class="text-warning">${errorMessage}</li>`); 
}
2 Likes
8

If anyone still has troubles solving this, this works just fine: map through the failure array and return each text:

const resultDisplayArray = result.failure.map(text => (
<li class="text-warning">${text}</li>
))