Create Strings using Template Literals using forEach Method

February 25, 2022

Can someone help me please fix my code? I was using forEach method in this exercise

I think I’m close but it’s still giving me undefined, it’s already inside the result.failure because I checked by adding another string/num.

const result = {
  success: ["max-length", "no-amd", "prefer-arrow-functions"],
  failure: ["no-var", "var-on-top", "linebreak",],
  skipped: ["no-extra-semi", "no-dup-keys"]
};
function makeList(arr) {
  // Only change code below this line
  const failureItems = [];

  const results = arr.forEach(k => failureItems.push(`<li class="text-warning">${arr[k]}</li>`));


  // Only change code above this line

  return failureItems;
}

const failuresList = makeList(result.failure);
console.log(failuresList);

it should be resulted to this

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

but in this code my result is this

[ '<li class="text-warning">undefined</li>',
  '<li class="text-warning">undefined</li>',
  '<li class="text-warning">undefined</li>' ]

>Solution :

You want to concatenate k. Also as mentioned in the comments, Array#forEach returns undefined.

To fix the above:

arr.forEach(k => failureItems.push(`<li class="text-warning">${k}</li>`));

Another solution using Array#map:

function makeList(arr) {
  return arr.map(k => `<li class="text-warning">${k}</li>`);
}

const result = {
  success: ["max-length", "no-amd", "prefer-arrow-functions"],
  failure: ["no-var", "var-on-top", "linebreak",],
  skipped: ["no-extra-semi", "no-dup-keys"]
};

const failuresList = makeList(result.failure);

console.log(failuresList);