Need assistance in create-strings-using-template-literals

JavaScript
#1

Challenge Name

create-strings-using-template-literals has an issue.

Issue Description

I’m using template literals and it says I’m not…

Browser Information

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 9901.77.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.97 Safari/537.36.

Screenshot

screenshot

Your Code



"use strict";
const result = {
  success: ["max-length", "no-amd", "prefer-arrow-functions"],
  failure: ["no-var", "var-on-top", "linebreak"],
  skipped: ["id-blacklist", "no-dup-keys"]
};
// change code below this line
const resultDisplayArray = result.failure.map(x => `<li class="text-warning">${x}</li>`);                                   
// change code above this line
console.log(resultDisplayArray);
/**
 * should look like this
 * <li class="text-warning">no-var</li>
 * <li class="text-warning">var-on-top</li>
 * <li class="text-warning">linebreak</li>
 **/
2 Likes
#2

Thank you for being a beta tester. The correct way to report bugs in the beta curriculum is as GitHub Issues.

#3

Thanks for the hint on using map. I was able to get it working with the code below. Notice that I’m using arr.map, instead of result.failure.

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(x => `<li class="text-warning">${x}</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);```
3 Likes
#4

I’m confused how your map function works. Ultimately, we want the following objects within “li” elements: result.failure[0], result.failure[1] and result.failure[2]. Initially I tried creating an array with this notation, but the .map seems much faster. However, can you explain how your .map() function understands to ONLY use objects within result.failure? (i.e. why doesn’t this return eight “li” elements from result.success, result.failure and result.skipped?)

#5

Ohhhh, this is because you pass “result.failure” (not just “result”) into your function :smiley:

#6

This is still having problem
3rd case not passing

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(x => `<li class="text-warning">${x}</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);

Check it out

#7