Array module active learning "Printing those products!"


(Adeseyeair3s) #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
(Chris Mills) #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:


(Adeseyeair3s) #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.


(Chris Mills) #4

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


(Adeseyeair3s) #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


(Chris Mills) #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.


(Adeseyeair3s) #7

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

You’re super sharp, thank you!


(Chris Mills) #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!