Parse and Render

Header Mapping

CSV headers are read once and used to turn each data line into a record with named fields.

Program

Most CSV files put field names in the first row. Mapping those names to later cells makes row data easier to read and render.

header_mapping.html 
<script>
  const csv = "item,status\nBuild,ready\nDocs,draft";
  const [headerLine, ...dataLines] = csv.split("\n");
  const headers = headerLine.split(",");
  const records = dataLines.map(line => Object.fromEntries(
    line.split(",").map((value, index) => [headers[index], value])
  ));
  render(records);
</script>
header row A header row names the fields that each later row contains.
record A record is one row represented as named fields rather than raw cell positions.