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

Question

I want to make a very large array of data that I found on this website. I copied the large table from that website in to my project:

This is an example of that table:

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

I want to convert this table in to a javascript array of objects like this:

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

The reason I want to convert this is because it would take way too much time to input this by hand.

https://stackoverflow.com/questions/9927126/how-to-convert-the-following-table-to-json-with-javascript — Roberto Zvjerković, Apr 13 '22 at 10:14

score 2 · Accepted Answer · answered Apr 13 '22 at 10:31

What you can do is, parse all the tr elements then loop through them to get the first and the second children (which are td elements) then the content of the first children would be the name value and for the elements, you can split the content of second children first with a / then with a ,. Check the below example snippet for more details

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>

score 1 · Answer 2 · answered Apr 13 '22 at 10:19

1

if it's just a one time thing you could use https://www.convertjson.com/html-table-to-json.htm to generate json based on your table to make it easier to manipulate

answered Apr 13 '22 at 10:19

Damien

614
4
9

But I actually want to convert this to a javascript array, if that is possible – Emiel VdV Apr 13 '22 at 10:22
@EmielVdV If you have a valid json, you can convert it in any programming language. For javascript, just use `JSON.parse()` – Michel Apr 13 '22 at 10:32
Although a link to an external resource may be useful, the answer should really show how to code it, providing the essential information needed. Links can break over time and this is about programming. – trincot Apr 13 '22 at 10:34

score 1 · Answer 3 · answered Apr 13 '22 at 10:31

You can parse the HTML with DOMParser and then map each table row as follows:

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);

Paprika · Answer 4 · 2022-04-13T10:44:28.537

You first need to iterate by rows, and then transform them.

You can get rows using table.rows, and iterate by them. To get cells use row.cells. cells[0] - would be row name and cells[1] - would be row elements. You need to split and transform your elements, then add it to result object then array.

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

I made functioning example on codesandbox:

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

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

4 Answers4