Issues with Template Literals

JavaScript
#1

Tell us what’s happening:

// running tests

resultDisplayArray is a list containing result failure messages.

makeList(…).every is not a function

// tests completed

Your code so far


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 = `<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

  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);

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/es6/create-strings-using-template-literals

#2

your resultDisplayArray isn’t actually an array – it’s one big string – so each li element should be one item in the array. Additionally, I believe the tests expect that there’s no white space before or after ${result.failure} so within the element you should probably also remove that space.

#3

What @lekha wrote; and consider using one of the higher-order functions that loops through an array, does something to each item based on a callback you passed to it, and gives out a new array.

#4

i changed the code snippet to the following, there is still an issue where it commplains that element is not a function, using element as a parametre for each individual entry, below is the changed snippet:

  const resultDisplayArray = result.failure.map(`element => <li class="text-warning"> element </li>`);
  // change code above this line

  return resultDisplayArray();```
#5

First of all, you need to look at how this function you’re modifying is being called. Down at line 23 (the very bottom), your function is being called like this:

const resultDisplayArray = makeList(result.failure);

Meaning that the target array (result.failure) is being fed to your function already; thus no need for the result.failure part in your snippet.

Second, you are consuming map() wrong; the callback should take an array item as the argument and perform the logic required to complete this task. But what you’re doing is just passing a string to map().
Check MDN’s documentation on map() again to see how to consume it correctly.

Finally, you’re supposed to return an array; but instead, what you do in the snippet is returning whatever this function resultDisplayArray() returns; but this function does not exist in this program.

Btw, when posting code snippet that is more than one line, try keeping the triple back ticks on top of and beneath your code, like this:
```
Code snippet goes here
```
Otherwise you got the trailing back ticks, which makes the snippet kinda hard to read.

#6

here is what i have now:

  // change code below this line
  const resultDisplayArray = arr.map(arr => `<li class="text-warning"> ${arr} </li>`);
  // change code above this line

  return resultDisplayArray;
#7

Change this:

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

to this:

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

The source of the problem now is the two white spaces around ${arr} as the expected outcome should not have them.
By removing the white spaces, your solution works just fine; but for the sake of readability, I still suggest you to name the variable that refers to each array element something other than arr (like item, for example). Since arr is already taken as makeList()'s parameter name, this naming can be confusing.

#8

how strange it works when i remove the spaces in the last ${item} between the li

#9

Yeah in this case it’s more about the tests for the challenge :slightly_smiling_face:
They dictated that there shall be no white spaces around ${item}.

1 Like
#10