ES6 - Create Strings using Template Literals

JavaScript
1

I am not understanding why its not passing the test cases.
I’m using template strings.

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 = arr.map((item) => {
        return `<li class ="text-warning">${item}</li>`;
    });
  // 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 Likes
2

I think there is an extra space in return statement
<li class ="text-warning">${item}</li> Right after class you have an extra space. Would that help?

2 Likes
3

Thanks . Didn’t notice that. It surely takes every precision.

4

No worries. It is hard to notice every little detail. I was staring at your code and thought that it should work. Then I myself went to the challenge and wrote solution which ended up being exactly the same as yours. And was like WTF it is all the same :smiley: Sometimes just re-writing the same thing from the scratch can help.

5

Hi people!
I don’t know if is correct write here or open other post.

Why my code is not valid in this way:

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

and is valid this:

const resultDisplayArray = arr.map(x =>`<li class="text-warning">${x}</li>`);

Is not the same result? I have complete the challenge but i want resolve my doubt.

Thanks people!

7

Thanks for reply @camperextraordinaire.
But for the challenge, is not the same? Because the challenge objetive is:

 * **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> ]
 **/

here i left the challenge link:
https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/es6/create-strings-using-template-literals/

Thanks again!

9

I’m an stupid xD. I have not pay attention to the brackets.
Thanks @camperextraordinaire :slight_smile:

1 Like
10

Hi, I’ve got this in the code:

const resultDisplayArray = arr.map(item => <li class="text-warning">${item}</li> );

but I keep getting invalid regular expression flags? I have backticks around the li class and /li but they are not showing properly for some reason here.

Everything displays properly on my Visual Studio program but getting an error in FCC challenge. Any help? Thanks.

I made a screenshot, for some reason looks like the program is not recognizing the template string. Everything recognizes fine in my Visual Studio. Or am I missing something else?

freecodecamptemplateliterals
freecodecamptemplateliterals1733×847 80.3 KB

11

do you solve this problem?
if yes then help us.

12

I’m not sure what that code is jsharda39. Still working on this challenge.

13

Same here. I can’t figure out why it says invalid regular expression flags even though I used template literals in my code. My solution is very similiar to yours as you can see below.

const resultDisplayArray = arr.map(element => `<li class="text-warning">${element}</li>`);

Any clue to why this doesn’t pass all the test cases? @vaidotasp

14

It seems that you have been doing everything right, but there is a bug with the challenge itself. I would move on from the time being and work on other challenges while this one is fixed.

Here is a thread you can follow work updates on this issue:

1 Like
15

Just saw this thread…They are asking for work using backticks. It’s pretty simple. The format is layed out below the code. It’s backticks practice. I realize my answer is the bug-answer. Yep.

The answer is:

const resultDisplayArray = [ <li class="text-warning">no-var</li>,
<li class="text-warning">var-on-top</li>,
<li class="text-warning">linebreak</li> ]

surround each list item listing line with backticks. I’m such a newb, I don’t know how to right that on here.

16

Hi all, I’m a newb to this. But here’s my understanding with the requirements. Thought I should share this to help you as a newb-point-of-view.

Understanding the requirements:

  • resultDisplayArray should be an array containing result failure messages.
    The result should be an “array” with the elements from result.failure.
    (This should be not limited to .failure, should work also to other elements of result object)

  • resultDisplayArray should be equal to the specified output.
    Nothing much of it, we’re pretty much aware what is the specified output. The <li> output as an element of an “array”.

  • Template strings and expression interpolation should be used.
    Apply the template strings - back tick and the ${variable}
    (This is what the lesson is for so it should not be missing as a requirement.)

  • An iterator should be used.
    This was explained in the problem. To use some sort of loop.

Creating the solution:

  1. Turn the declaration into an array. Since the array has no element yet, I use [ ].
  2. Check the specified output. I should return the <li> as a string element (assumed, due the presence of single quotes) of the array.
  3. Just use the “back tick” (instead of “quote” type of string). With that, I could use ${variable} too.
  4. Just check the pattern of every elements. Create a loop for this. (Coding for each element one by one is the first solution I could think. But it will not pass the #4 requirement. Loop should make your code neat and simple as one of its functions - but bruh, seriously?!)
17

you are to use backtick (`) not single quote(’). That’s what solves the problem for me. Goodluck