javascript - 将数组中的对象计数到表中的函数

Question

我已经让这个功能工作得很好，但我希望它有另一个外观。我想要一个围绕每个单词的表格，但现在它围绕整个文本。原因是变量在短版本中很短，所以它会更大。它必须在 HTML 中工作

我是编码新手，所以我想要一些普通的 javascript，我希望有人可以帮助我! :)

  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

如果你想拥有“桌面外观”，那么你有多种方法可以做到 -

1)使用一些框架；2)自己做；

给你一些例子:

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>

一些样式

body {
  font-family: sans-serif;
}

td {
  padding: 10px;
}

thead td {
  font-weight: bold;
}

你会得到这样的结果:

工作示例: https://codesandbox.io/s/mystifying-night-dbwvk

这里的主要目标是手动操作 DOM，这非常无聊，而且效率不太高(顺便说一句，这也是框架如此受欢迎的原因之一)。

正如我们所看到的，我们需要编写大量代码来形成一行并将结果放入表中。如果您决定像图片一样使用滤镜，则工作时间会呈指数级增长。