Create Strings using Template Literals_2

Tell us what’s happening:
I don’t know what this challenge wants. I followed the example, but the error states I’m not using template strings. I don’t know what else I could add to get the object values.

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

ERROR

// running tests
Template strings were used
// tests completed

Your browser information:

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

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

Why are you referencing the global object result, when an argument was passed to the function which you could be using instead? Try using what is passed into the function.

1 Like

Thanks again. I used arr[0], arr[1], etc. I neglected to consider the function parameter and what was actually being passed.

FYI - Your solution does not scale at all. For example, what if the result.failure array had 10000 strings. Would you really write arr[0], arr[1], … arr[9999]. Think about how you could use a loop or better yet an array method such as map to create resultDisplayArray.

I’m still confused about this. Since the map function works on each element in succession I thought this would work since I’m working on an array of strings. I’m not sure about the ${e}, but I couldn’t think of anything else although I did try arr{i] since the map function has the index as a parameter, but that didn’t work. In all cases I created an array of undefined values. I tried using the following code:

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

I received the following error, but the other two requirements were met.

// running tests
resultDisplayArray is the desired output.
// tests completed

OUTPUT

[ undefined, undefined, undefined ]

The requirements that were met were:

  1. resultDisplayArray is an array containing result failure messages.
  2. Template strings were used

Your function does not have a return statement, so JavaScript returns the value undefined during each iteration.

I put a return statement in and it worked, but I didn’t think the map function needed a return statement. I thought whatever was put inside the braces was automatically returned. Obviously I was wrong. Thanks.

The callback function is just like any other function. You may be confusing using arrow function syntax with normal function syntax.

Normal Function Syntax

function timesTen(num) {
  return num * 10;
}

OR

const timesTen = function(num) {
  return num * 10;
}

Arrow Function Syntax

const timesTen = num => num * 10;

Thanks, thanks, thanks.