Array module active learning "Printing those products!"

MDN Learn
#1

Hello Chris!

For the Array exercise in the first module, “Printing those products!”, can I add a suggestion for clarity? (especially for those who have never had any background with programming languages)

for step two of the exercise, I think at the end of “We’d like you to replace this with a conditional test that stops the loop when i is no longer less than the products array’s length.” A suggestion to subtract 1 from the length as a safety net since the Number method will not be able to parse something thats undefined depending on the method a person would attempt to solve this problem. I saw the solution was done with sub arrays, many people (such as me) may complete it without the use of an sub array.

Bests,
Air3s

"Mozilla splash page" assessment
#2

hi there! I am not 100% sure what you want me to do here :wink:

Can you rephrase it, and perhaps show me which line of code you’d want to change, and what you would change it to?

In terms of doing this without a subarray, yes you could do it quite easily, for example:

for(var i = 0; i < products.length; i++) {
  var colon = products[i].indexOf(':');
  var name = products[i].slice(0,colon);
  var price = products[i].slice(colon);
  
  total += price;
  itemText = name + ' — $' + price;

  var listItem = document.createElement('li');
  listItem.textContent = itemText;
  list.appendChild(listItem);
}

But I’m not convinced this is much easier :wink:

1 Like
#3

This is exactly how I did it, however in my version, I am converting price to a number using the Number() object in an additional line.

When I convert price to a number, I got an error when the loop reached the end of the array. I am guessing it is because that the length property returns the length of the array plus one(?)
When I subtracted 1 from the length, the Number object did not have any issues.

#4

This is interesting. Can you pass me your code so I can have a look?

#5

Yep Yep!

edit 10-11-17 I think its the manner of how I inserted the data into an array. I used the split method, so possibly the Number method is accounting for an extra separator(?) edit 10-11-17

code

var list = document.querySelector(’.output ul’);
var totalBox = document.querySelector(’.output p’);
var total = 0;
list.innerHTML = ‘’;
totalBox.textContent = ‘’;

// number 1

var dataList = ‘Underpants:6.99 Socks:5.99 T-shirt:14.99 Trousers:31.99 Shoes:23.99’;
var dataArray = dataList.split(’ ');

for (var i = 0; i <= dataArray.length - 1; i++) { // number 2

// number 3

var productList = dataArray[i];
var colon = productList.indexOf(’:’);
var nameOfProduct = productList.slice(0,colon);

var price = productList.slice(colon + 1);
var priceNumber = Number(price);

total += priceNumber;

// number 5

itemText = nameOfProduct + ‘\t’ + ‘-’ +’\t’ + ‘$’ + price;

var listItem = document.createElement(‘li’);
listItem.textContent = itemText;
list.appendChild(listItem);
}

totalBox.textContent = ‘Total: $’ + total.toFixed(2);

code

#6

Nah, you’re basically doing the same thing as in my original solution (I also use number — press the show solution button to see it in action).

I think the problem is that you are doing

i <= dataArray.length - 1

which is the same thing as

i < dataArray.length

This is the equivalent of what I do in my code.

1 Like
#7

Good lord, I did not notice that equals sign haha.

You’re super sharp, thank you!

#8

I do try :wink:

Seriously though, it is easy to miss things like this — usually when I’m writing a new script, the most common thing to stop it working tends to be a stupid typo rather than a significant logic error!

#12 
<h2>Live output</h2>
  <div class="output">
    <ul></ul>
    <p>Total no:</p>
  </div>

html page for accessing output query selector

#13

Hi @Israr_Afridi and welcome to the community :wave:

I don’t quite understand what you are trying to say. If you have a question for this (or any other) task, feel free to create a new topic and describe your problem.

Have a nice day! :slightly_smiling_face:
Michael