Create Strings using Template Literals question

Create Strings using Template Literals question
0

#1

Tell us what’s happening:
I understand the model solution but I’m just curious to why my solution won’t work. Is there something obvious I’m missing?

Thanks in advance, I know my solution is not very robust but I’m just trying to ask questions to help me learn to think differently.

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">${arr[0]}</li>!
  <li class="text-warning">${arr[1]}</li>!
  <li class="text-warning">${arr[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 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36.

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


#2

You assigned a string to resultDisplayArray instead of an array.


#3

nevermind, figured it out - I’m just generating a list of strings rather than an array…but in theory ${arr[0]} should be a valid way to reference result array right?


#4

Actually, you were just creating a single string which looked like:

<li class="text-warning">no-var</li>!
  <li class="text-warning">var-on-top</li>!
  <li class="text-warning">linebreak</li>

Yes, you can refer to 1st element of arr as ${arr[0]}. How would you have solved this problem if you did not know how many elements arr had? See if you can you the Array.prototype map method to solve this problem instead.


#5

Thanks for the prompt response Randel, I knew my solution wasn’t robust to begin with lol I figured it out with the map function.