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
Visuals: captured from real browser rendering
<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>

  1. Separate the header row from data rows.

    The header line is isolated from the two data rows.
    Destructuring keeps the field names separate from data.

  2. Split the header row into field names.

    The two column names are ready to label data cells.
    Headers give each column a stable name.

  3. Map each data line into a record object.

    Rows can now be displayed by field name instead of numeric position.
    Object.fromEntries pairs each header with its matching value.

  4. Render the named records.

    A status table appears with ready and draft labels.
    Rendering named records makes the table less position-dependent.
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.