Count object in array (HTML)

Question

I want to count the objects in an array, I have this code which does not work in HTML. It has to be shown in HTML.

I only want it to show one of the object at time:
Type: Chocolate: 1, Fruit: 2, Food: 3, Liquid: 2

//This is the variable, i need to count
var markers = [{
    type: "Chocolate",
    name: "KitKat",
    group: "candy",
    icon: "candy",
    coords: [5246, 8980],
  },
  {
    type: "Fruit",
    name: "Orange",
    group: "fruits",
    icon: "fruis",
    coords: [9012, 5493],
  },
  {
    type: "Fruit",
    name: "Banana",
    group: "fruits",
    icon: "fruis",
    coords: [9012, 5493],
  },
  {
    type: "Food",
    name: "Rice",
    group: "foods",
    icon: "foods",
    coords: [6724, 9556],
  },
  {
    type: "Food",
    name: "Meat",
    group: "foods",
    icon: "foods",
    coords: [6724, 9556],
  },
  {
    type: "Food",
    name: "Beam",
    group: "foods",
    icon: "foods",
    coords: [6724, 9556],
  },
  {
    type: "Liquid",
    name: "Water",
    group: "liquids",
    icon: "liquids",
    coords: [6724, 9556],
  },
  {
    type: "Liquid",
    name: "Coffe",
    group: "liquids",
    icon: "liquids",
    coords: [6724, 9556],
  },
]

var count = []

for (var i = 0; i < markers.length; i++) {
  count[markers[i].type] = count[markers[i].type] + 1 || 1;
}
document.getElementById('data').innerHTML = count;

<div id='data'></div>

It has to look like this

    Chocolate: 1, Fruit: 2, Food: 3, Liquid: 2

I hope somebody can help me, it has to be vanilla javascript

score 2 · Answer 1 · answered Jan 07 '20 at 16:33

You can use reduce too to count fruit types.

var markers = [
    {
      type:"Chocolate",
      name:"KitKat",
      group:"candy",
      icon:"candy",
      coords:[5246,8980],
    },
    {
      type:"Fruit",
      name:"Orange",
      group:"fruits",
      icon:"fruis",
      coords:[9012,5493],
    },
    {
      type:"Fruit",
      name:"Banana",
      group:"fruits",
      icon:"fruis",
      coords:[9012,5493],
    },
    {
      type:"Food",
      name:"Rice",
      group:"foods",
      icon:"foods",
      coords:[6724,9556],
    },
    {
      type:"Food",
      name:"Meat",
      group:"foods",
      icon:"foods",
      coords:[6724,9556],
    },
    {
      type:"Food",
      name:"Beam",
      group:"foods",
      icon:"foods",
      coords:[6724,9556],
    },
    {
      type:"Liquid",
      name:"Water",
      group:"liquids",
      icon:"liquids",
      coords:[6724,9556],
    },
    {
      type:"Liquid",
      name:"Coffe",
      group:"liquids",
      icon:"liquids",
      coords:[6724,9556],
    },
 ];


const countFruitTypes = markers.reduce((a, {type}) => {
    a[type] = (a[type] || 0) + 1;
    return a;
}, {});

console.log(countFruitTypes);

This is a great answer, and for further reading, this question has some good explanations on how reduce works. https://stackoverflow.com/questions/49934992/main-difference-between-map-and-reduce — Trevor, Jan 08 '20 at 13:38

vatz88 · Answer 2 · 2020-01-07T19:39:03.800

1) You'll have to make count an Object. It'll allow you to store count of different type unlike array.

2) You can't show Object directly onto the HTML page. You'll have to stringify it.

var markers = [
  {
    type:"Chocolate",
    name:"KitKat",
    group:"candy",
    icon:"candy",
    coords:[5246,8980],
  },
  {
    type:"Fruit",
    name:"Orange",
    group:"fruits",
    icon:"fruis",
    coords:[9012,5493],
  },
  {
    type:"Fruit",
    name:"Banana",
    group:"fruits",
    icon:"fruis",
    coords:[9012,5493],
  },
  {
    type:"Food",
    name:"Rice",
    group:"foods",
    icon:"foods",
    coords:[6724,9556],
  },
  {
    type:"Food",
    name:"Meat",
    group:"foods",
    icon:"foods",
    coords:[6724,9556],
  },
  {
    type:"Food",
    name:"Beam",
    group:"foods",
    icon:"foods",
    coords:[6724,9556],
  },
  {
    type:"Liquid",
    name:"Water",
    group:"liquids",
    icon:"liquids",
    coords:[6724,9556],
  },
  {
    type:"Liquid",
    name:"Coffe",
    group:"liquids",
    icon:"liquids",
    coords:[6724,9556],
  },
];

var count = {}

for (var i = 0; i < markers.length; i++) {
  count[markers[i].type] = count[markers[i].type] + 1 || 1 ;
}
document.getElementById('data').innerHTML = JSON.stringify(count);

<div id="data"></div>

Alternate solution without using JSON.stringify and using Object.entries

Also for your reference since you're new to coding, I have used Template literals to combine the key and value into a string.

var markers = [
  {
    type:"Chocolate",
    name:"KitKat",
    group:"candy",
    icon:"candy",
    coords:[5246,8980],
  },
  {
    type:"Fruit",
    name:"Orange",
    group:"fruits",
    icon:"fruis",
    coords:[9012,5493],
  },
  {
    type:"Fruit",
    name:"Banana",
    group:"fruits",
    icon:"fruis",
    coords:[9012,5493],
  },
  {
    type:"Food",
    name:"Rice",
    group:"foods",
    icon:"foods",
    coords:[6724,9556],
  },
  {
    type:"Food",
    name:"Meat",
    group:"foods",
    icon:"foods",
    coords:[6724,9556],
  },
  {
    type:"Food",
    name:"Beam",
    group:"foods",
    icon:"foods",
    coords:[6724,9556],
  },
  {
    type:"Liquid",
    name:"Water",
    group:"liquids",
    icon:"liquids",
    coords:[6724,9556],
  },
  {
    type:"Liquid",
    name:"Coffe",
    group:"liquids",
    icon:"liquids",
    coords:[6724,9556],
  },
];

var count = {}

for (var i = 0; i < markers.length; i++) {
  count[markers[i].type] = count[markers[i].type] + 1 || 1 ;
}

var countString = '';

for (let [key, value] of Object.entries(count)) {
  countString += `${key}: ${value} `;
}

document.getElementById('data').innerHTML = countString;

<div id="data"></div>

Thanks! Is there anything else I can use JSON.stringify? because it is a report and we have not learned about JSON.stringify - what about "toString() Method"? — , Jan 07 '20 at 16:51
No `toString()` won't work on `Object`. Alternatively, you can loop over the `object` using [entries](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries) and construct a string. — vatz88, Jan 07 '20 at 17:06
Sorry, how could i do that? thanks again for helping me, i am new to coding — , Jan 07 '20 at 18:23
@CodingWomen updated the answer with the alternate approach. — vatz88, Jan 07 '20 at 19:39

Count object in array (HTML)

2 Answers2