Want help with "ES6: Create Strings using Template Literals"

JavaScript
#1

Tell us what’s happening:
An iterator should be used.
failuresList should be equal to the specified output.
failuresList should be an array containing result failure messages.

Your code so far


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 = [`['<li class="text-warning">${result.failure[0]}</li>',\n<'li class="text-warning">${result.failure[1]}</li>',\n'<li class="text-warning">${result.failure[2]}</li>'\n]`];
  // Only change code above this line
console.log(failureItems)
  return failureItems;
}

const failuresList = makeList(result.failure);

Your browser information:

User Agent is: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:83.0) Gecko/20100101 Firefox/83.0.

Challenge: Create Strings using Template Literals

Link to the challenge:

#2

This is not the way you should do the challenge. In this case only 3 elements are there in the failure array, but there may be hundreds of elements. Therefore, you should always use an iterator(loop).

This is not an array, but the list. You’ve to create an array containing the strings with <li>...</li>.

1 Like
#3

How do you make the loop?

#4

By loop, I mean regular for and while loop.
Just like below, if you didn’t understand what I mean

for(let i=0; i<result.failure.length; i++){
    // Do something
}

Or using While loop as below

let i=0;
while(i<result.failure.length){
    i++;
    // Do something
}
1 Like
#5

My current code looks like this

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
 for (let i=0; i < result.failure.length; i++){
 arr = i;
 }
  const failureItems = [`<li class="text-warning">${result.failure[arr]}</li>`];
  
  // Only change code above this line
console.log(failureItems)
  return failureItems;
}

const failuresList = makeList(result.failure);

How do you make so the failure: ["no-var", "var-on-top", "linebreak"], gets to the function so you get all failure, the instruction is:

failuresList should be equal to the specified output.
failuresList should be an array containing result failure messages.

#6

do not overwrite your function parameter, doing this you have lost the passed in value

1 Like
#7

what do I use the arr for?

#8

it’s array from which you take the error messages

the function is called like this, in this case arr is equal to result.failure

1 Like
#9

I took away the arr from the loop (The arr = i; I deleted), but I don’t know what I should write instead.

#10

You’ve used result.failure.length or arr.length in your array. why?

Because, you wanted to use the items from this array using index.

In above snippet, you’ve used nothing but the index of the required text.

You just have to create an empty array, then in the loop, create new string using string literals and the index and then push the string to the array.
In this way, you didn’t know the length of array. The program will always work if any entries from the original array(result are are changed)
Hope I am clear!!

1 Like
#11

I should create an empty array to failureItems?
const failureItems = [];

#12

Going in right direction.
I believe you’ve already solved the challenge.

1 Like
#13

I didn’t understand what you mean, I misunderstood your instructions and code looks like this

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
 for (let i=0; i < result.failure.length; i++){
 arr.push(`<li class="text-warning">${[]}</li>'`);
 }
  const failureItems = [];
  
  // Only change code above this line
console.log(failureItems)
  return failureItems;
}

const failuresList = makeList(result.failure);
#14
Think on what you want to return

Array containing the text <li .....</li>, for each element in arr

Why you initialized this array

Because you have to add the text mentioned above in this array

Why are you pushing the text to `arr`

You don’t have to add elements in this arr, instead you’ve to add them in the array you’ve initialized as empty, i.e. failureItems.

Why are you using `${}` here

You’ve to add items from the arr here, such as ${arr[0]} for the first one, ${arr[1]} for the second one.
You can’t do above thing for multiple times, if there are more than 10, 100 or maybe 1000 elements in the arr, Hence you need to use the loop.

Please think upon, above questions and their answers.
Hope, it’ll be clear now.

1 Like
#15

I don’t know how you push the string literals and the index to the array in the loop, because I don’t know how the index and the array looks like.

#17

You know how to push the items in array…
You have to do it as below

failureItems.push(string);

And you can index the arr items using arr[i]

2 Likes
#18

In the loop? I did it in the loop but it says

TypeError: failureItems is undefined

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
 for (let i=0; i < result.failure.length; i++){
 failureItems.push(`<li class="text-warning">${arr[i]}</li>`);
 }
  const failureItems = [];
  
  // Only change code above this line
console.log(failureItems)
  return failureItems;
}

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

Exactly. You’ll have to declare the empty array, before adding the elements in it…
You’ve declared the array using const failure items=[],but after the loop…
Just declare it before the loop, so that you can use it.

1 Like
#20

Thanks, I replaced the loop under it and it worked!

1 Like
#21