JavaScript: Is this possible? using array value to display the quantity

Question

Given this JavaScript array:

var list = [1,1,1,2,2,2,2]

I want to know how I can produce an HTML list below that has each unique item in the array and number of times that they appear in the array. I just want to know the JavaScript to produce the data, I can generate the HTML.

• 1 is x3
• 2 is x4

I'm confused about how to achieve this. Basically, similar to shopping cart quantity functionality, but using the array.

http://jsfiddle.net/37ab3k00/

Answer 1

Use .reduce to reduce your array to an object of quantities.

var list = [1, 1, 1, 2, 2, 2, 2];

var quantities = list.reduce(function(obj, n) {
  if (obj[n]) obj[n]++;
  else        obj[n] = 1;
  return obj;
}, {});

var ul = document.querySelector("ul");

for (var n in quantities) {
  ul.appendChild(document.createElement("li")).textContent = n + " has a quantity x" + quantities[n];
}

<ul></ul>

The first argument to .reduce() is a function that gets invoked for each member in the Array.

The second argument is an object that we're going to pass along to each iteration. It gets passed as the first argument to the function we provided, and we always return it so that it always gets passed as that argument. This is called the accumulator.

The n argument to the function we provided is the value of the current member in the list. So what we do is first see if our obj has a truthy n member. If so, it must have been encountered already, so we increment it. If not, we assign it the initial value of 1 to represent the first n that was found for that value.

Answer 2

var list = [1,1,1,2,2,2,2]

var counts = {};
for (var i = 0; i < list.length; i++) {
    counts[list[i]] = 1 + (counts[list[i]] || 0);
}

Demo: http://jsfiddle.net/famn4zcL/2/

Add to HTML

var li = '';

for (var el in counts) {
    li += '<li>' + el + ' is x' + counts[el] + '</li>';  
} 

document.getElementById('list').innerHTML = li;

Demo: http://jsfiddle.net/famn4zcL/3/

Answer 3

Another way would be using array of objects (those can be easily upgraded with additional data that you probably would need building products), like so:

HTML:

<span id="display"></span>

JS (plain, no Framework):

var objects = [
    {prod:0,quant:00},
    {prod:1,quant:11},
    {prod:2,quant:22},
    {prod:3,quant:33},
    {prod:4,quant:44},
    {prod:5,quant:55}
];

var list_of_objects = "", display_id = document.getElementById("display");

for (var key in objects) {
  if (objects.hasOwnProperty(key)) {
    console.log(key);
    list_of_objects += '<li>'+objects[key].prod + ' has a qtty x ' + objects[key].quant+'</li>';
  }
}
console.log(list_of_objects);
display_id.innerHTML = list_of_objects;

So you could easily upgrade product data with new info, like:

var objects = [
    {prod:0,quant:00,url:"http://url00"},
    {prod:1,quant:11,url:"http://url11"},
    {prod:2,quant:22,url:"http://url22"},
    {prod:3,quant:33,url:"http://url33"},
    {prod:4,quant:44,url:"http://url44"},
    {prod:5,quant:55,url:"http://url55"}
];

JSfiddle to play with: http://jsfiddle.net/7hokfmdu/