a function that counts object from an array into a table

Question

I have made this function witch works fine, but I want it to have another look. I want a table around every single word but right now it's around the whole text. The reason is that the variable is short the short version so its gonna be much bigger. It has to work in HTML

I am new to coding so I would like something vanilla javascript, i hope somebody can help me! :)

  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],
      },
    ];

    function counter(){
    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);
    }
    counter();

Answer 1

If you want to have a "table-look", then you have multiply ways to do it -

1) Use some framework; 2) Do it by your own;

Some example for you:

import "./styles.css";

const 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]
  }
];


/* I split all drawing stuff to separate functions, to make it easier for you to watch progress */
// draw header
const drawHeader = data => {
  const headers = Object.keys(data[0]);
  const thead = document.createElement("thead");
  const tr = document.createElement("tr");
  thead.append(tr);
  headers.forEach(el => tr.append(drawCol(el)));
  return thead;
};

// draw column
const drawCol = data => {
  const td = document.createElement("td");
  td.innerHTML = data;
  return td;
};
// draw row
const drawRow = data => {
  const tr = document.createElement("tr");
  const keys = Object.keys(data);
  keys.forEach(el => tr.append(drawCol(data[el])));
  return tr;
};
// sraw it all together
const drawTable = data => {
  const table = document.getElementById("app");
  const theader = drawHeader(data);
  table.prepend(theader);
  const tableBody = document.getElementById("tbody");
  const rows = data.forEach(m => tableBody.append(drawRow(m)));
  return rows;
};

drawTable(markers);

html

<table border="1" id="app">
  <tbody id="tbody"></tbody>
</table>

some styles

body {
  font-family: sans-serif;
}

td {
  padding: 10px;
}

thead td {
  font-weight: bold;
}

And you'll get something like this:

Working example: https://codesandbox.io/s/mystifying-night-dbwvk

The main goal here, is to manipulate DOM by hands, that is pretty boring, and not too efficient (Thats btw, one of reasons, why frameworks so popular).

As we can see, we need to write pretty much code just to form a row and place result to table. If you decide to use filters as on your picture, worktime grows exponentially.