如何将非常大的 table 转换为特定的 javascript 数组？

Question

我想制作一个在 this website 上找到的非常大的数据数组。我从那个网站复制了大 table 到我的项目中：

这是一个例子 table:

<tr>
  <td>Acid Rain</td>
  <td>
    rain, smoke / rain, smog / rain, sickness / cloud, smoke / cloud, smog
    / cloud, sickness / rain, city
  </td>
</tr>

我想将此 table 转换为 javascript 对象数组，如下所示：

[
  {
    name: "Acid Rain",
    elements: [
      ["rain", "smoke"],
      ["rain", "smog"],
      ["rain", "sickness"],
      ["cloud", "smoke"],
      ["cloud", "smog"],
      ["cloud", "sickness"],
      ["rain", "city"],
    ],
  },
  {...},
  {...}
];

我想转换它的原因是手动输入它会花费太多时间。

Answer 1

如果这只是一次性的事情，您可以使用 https://www.convertjson.com/html-table-to-json.htm 根据您的 table 生成 json 以使其更易于操作

Answer 2

您可以用 DOMParser 解析 HTML，然后按如下方式映射每个 table 行：

const html = `<table border="1" cellspacing="1" cellpadding="1" style="width:468px"><tbody><tr><td> <b>Resulting Element</b></td><td> <b>Ingredient Combination(s)</b></td></tr><tr><td> Acid Rain</td><td> rain, smoke / rain, smog / rain, sickness / cloud, smoke / cloud, smog / cloud, sickness / rain, city</td></tr><tr><td> Air</td><td> Available from start.</td></tr><tr><td> Airplane</td><td> metal, bird / steel, bird / bird, machine / bird, steam engine / bird, train / bird, car / bird, boat / bird, steamboat / bird, sailboat / metal, owl / steel, owl / steam engine, owl / metal, vulture / steel, vulture / metal, duck / steel, duck / metal, seagull / steel, seagull / metal, bat / steel, bat / metal, eagle / steel, eagle / steel, pigeon / metal, pigeon / metal, hummingbird / steel, hummingbird / metal, crow / steel, crow / owl, machine / vulture, machine / duck, machine / seagull, machine / bat, machine / eagle, machine / pigeon, machine / hummingbird, machine / crow, machine / pilot, container</td></tr><tr><td> Alarm Clock</td><td> clock, sound / clock, dawn / clock, bell / sound, watch / watch, dawn / watch, bell</td></tr><tr><td> Alchemist</td><td> human, gold / gold, philosophy</td></tr><tr><td> Alcohol</td><td> time, juice / wheat, fruit / wheat, juice / fruit, sun</td></tr><tr><td> Algae</td><td> water, plant / grass, pond / grass, lake / water, grass</td></tr><tr><td> Alien</td><td> life, space / life, galaxy / life, galaxy cluster / life, solar system / life, Mars / life, Venus / life, Mercury / life, Jupiter / life, Saturn</td></tr><tr><td> Allergy</td><td> dust, human / human, pollen</td></tr></tbody></table>`;

const {body} = new DOMParser().parseFromString(html, "text/html");

const result = Array.from(body.children[0].rows, ({cells: [a, b]}) => ({
    name: a.textContent.trim(),
    elements: b.textContent.trim().split(" / ").map(pair => pair.split(", "))
}));
result.shift(); // Ignore first (header) row
console.log(result);

Answer 3

你可以做的是，解析所有 tr 元素，然后遍历它们以获取第一个和第二个 children （它们是 td 元素）然后是的内容第一个 children 将是 name 值，对于 elements，您可以先拆分第二个 children 的内容用 / 然后用 ,。查看下面的示例片段了解更多详情

const trs = document.querySelectorAll("tr");

const items = Array.from(trs).map(tr => {
  const firstTd = tr.children[0].innerText;
  const secondTd = tr.children[1].innerText;
  
  const elements = secondTd.split(" / ").map(t => t.split(", "));
  
  return {
    name:firstTd,
    elements
  };
});

console.log(items)

<table>
  <tr>
    <td>Acid Rain</td>
    <td>
      rain, smoke / rain, smog / rain, sickness / cloud, smoke / cloud, smog
      / cloud, sickness / rain, city
    </td>
  </tr>
</table>

Answer 4

首先需要按行进行迭代，然后进行转换。

您可以使用 table.rows 获取行并对其进行迭代。要获取单元格，请使用 row.cells。 cells[0] - 将是行名称，cells[1] - 将是行元素。您需要拆分和转换元素，然后将其添加到结果对象，然后添加到数组。

const table = document.getElementById("table");
const result = [];

// iterate by rows
for (let i = 1; i < table.rows.length; i++) {
  const row = table.rows[i];
  const rowName = row.cells[0].textContent;
  const rowElements = row.cells[1].textContent;

  result.push({
    name: rowName,
    elements: splitRowElements(rowElements)
  });
}

function splitRowElements(rowElements) {
  const splitedByComma = rowElements.split(",");
  const splitedAlsoBySlash = splitedByComma.map((element) =>
    element.split("/")
  );
  const splitedAndTrimmed = splitedAlsoBySlash.map((element) =>
    element.map((elementOfElement) => elementOfElement.trim())
  );

  return splitedAndTrimmed;
}

我在codesandbox上做了一个功能示例：

https://codesandbox.io/s/blissful-feynman-559sw1?file=/src/index.js

如何将非常大的 table 转换为特定的 javascript 数组？

How to convert a very large table into a specific javascript array?

html

javascript

arrays

object