Skip to content

Instantly share code, notes, and snippets.

@WickyNilliams

WickyNilliams/index.html

Last active March 26, 2025 13:05
Show Gist options
  • Save WickyNilliams/9252235 to your computer and use it in GitHub Desktop.
Save WickyNilliams/9252235 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. WickyNilliams revised this gist Feb 22, 2023. 1 changed file with 29 additions and 22 deletions.
    51 changes: 29 additions & 22 deletions parseTable.js
    View file
    Original file line number Diff line number Diff line change
    @@ -25,26 +25,27 @@
    */

    /**
    * generates factory functions to convert table rows to objects,
    * based on the titles in the table's <thead>
    * @param {Array<String>} headings the values of the table's <thead>
    * @return {(row: HTMLTableRowElement) => Object} a function that takes a table row and spits out an object
    * @param {HTMLTableRowElement} row
    * @param {string[]} headings
    * @returns {Record<string, string | boolean>}
    */
    function mapRow(headings) {
    return function mapRowToObject({ cells }) {
    return [...cells].reduce(function(result, cell, i) {
    const input = cell.querySelector("input,select");
    var value;
    function parseRow(row, headings) {
    const rowData = {};

    if (input) {
    value = input.type === "checkbox" ? input.checked : input.value;
    } else {
    value = cell.innerText;
    }
    for (const cell of row.cells) {
    const input = cell.querySelector("input,select");
    let value;

    return Object.assign(result, { [headings[i]]: value });
    }, {});
    };
    if (input) {
    value = input.type === "checkbox" ? input.checked : input.value;
    } else {
    value = cell.innerText;
    }

    rowData[headings[cell.cellIndex]] = value;
    }

    return rowData;
    }

    /**
    @@ -53,12 +54,18 @@ function mapRow(headings) {
    * each object's key/value pairs correspond to a column's heading and the row's value for that column
    *
    * @param {HTMLTableElement} table the table to convert
    * @return {Array<Object>} array of objects representing each row in the table
    * @return {Array<Object>} array of objects representing each row in the table
    */
    function parseTable(table) {
    var headings = [...table.tHead.rows[0].cells].map(
    heading => heading.innerText
    );
    const headings = [];
    for (const heading of table.tHead.rows[0].cells) {
    headings.push(heading.innerText);
    }

    const data = [];
    for (const row of table.tBodies[0].rows) {
    data.push(parseRow(row, headings));
    }

    return [...table.tBodies[0].rows].map(mapRow(headings));
    return data;
    }
  2. WickyNilliams revised this gist Oct 8, 2019. 2 changed files with 105 additions and 84 deletions.
    132 changes: 77 additions & 55 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,57 +1,79 @@
    <!doctype html>
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>parseTable</title>
    </head>
    <body>
    <table>
    <thead>
    <tr>
    <th>name</th>
    <th>age</th>
    <th>eye colour</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>dave</td>
    <td>35</td>
    <td>blue</td>
    </tr>
    <tr>
    <td>sarah</td>
    <td>29</td>
    <td>brown</td>
    </tr>
    <tr>
    <td>john</td>
    <td>42</td>
    <td>green</td>
    </tr>
    </tbody>
    </table>
    <head>
    <meta charset="UTF-8" />
    <title>parseTable</title>
    </head>
    <body>
    <table>
    <thead>
    <tr>
    <th>name</th>
    <th>age</th>
    <th>eye colour</th>
    <th>coffee?</th>
    <th>food</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>dave</td>
    <td>35</td>
    <td>blue</td>
    <td><input type="checkbox" checked /></td>
    <td><input type="text" value="sandwich" /></td>
    </tr>
    <tr>
    <td>sarah</td>
    <td>29</td>
    <td>brown</td>
    <td><input type="checkbox" checked /></td>
    <td><input type="text" value="soup" /></td>
    </tr>
    <tr>
    <td>john</td>
    <td>42</td>
    <td>green</td>
    <td><input type="checkbox" /></td>
    <td><input type="text" value="stew" /></td>
    </tr>
    </tbody>
    </table>

    <script src="parseTable.js"></script>
    <script>
    var table = document.querySelector("table");
    var data = parseTable(table);
    console.log(data);
    // [
    // {
    // "name" : "dave",
    // "age" : "35",
    // "eye colour" : "blue"
    // }, {
    // "name" : "sarah",
    // "age" : "29",
    // "eye colour" : "brown"
    // }, {
    // "name" : "john",
    // "age" : "42",
    // "eye colour" : "green"
    // },
    // ]
    </script>
    </body>
    </html>
    <pre></pre>

    <script src="parseTable.js"></script>
    <script>
    var table = document.querySelector("table");
    var output = document.querySelector("pre");
    var data = parseTable(table);

    // OUTPUTS
    // =======
    //
    // [
    // {
    // name: "dave",
    // age: "35",
    // "eye colour": "blue",
    // "coffee?": true,
    // food: "sandwich"
    // },
    // {
    // name: "sarah",
    // age: "29",
    // "eye colour": "brown",
    // "coffee?": true,
    // food: "soup"
    // },
    // {
    // name: "john",
    // age: "42",
    // "eye colour": "green",
    // "coffee?": false,
    // food: "stew"
    // }
    // ]
    </script>
    </body>
    </html>
    57 changes: 28 additions & 29 deletions parseTable.js
    View file
    Original file line number Diff line number Diff line change
    @@ -2,19 +2,19 @@
    * @license
    *
    * The MIT License (MIT)
    *
    *
    * Copyright (c) 2014 Nick Williams
    *
    *
    * Permission is hereby granted, free of charge, to any person obtaining a copy
    * of this software and associated documentation files (the "Software"), to deal
    * in the Software without restriction, including without limitation the rights
    * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
    * copies of the Software, and to permit persons to whom the Software is
    * furnished to do so, subject to the following conditions:
    *
    *
    * The above copyright notice and this permission notice shall be included in
    * all copies or substantial portions of the Software.
    *
    *
    * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
    * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
    * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
    @@ -24,42 +24,41 @@
    * THE SOFTWARE.
    */


    /**
    * converts array-like object to array
    * @param collection the object to be converted
    * @return {Array} the converted object
    */
    function arrayify(collection) {
    return Array.prototype.slice.call(collection);
    }

    /**
    * generates factory functions to convert table rows to objects,
    * based on the titles in the table's <thead>
    * @param {Array[String]} headings the values of the table's <thead>
    * @return {Function} a function that takes a table row and spits out an object
    * @param {Array<String>} headings the values of the table's <thead>
    * @return {(row: HTMLTableRowElement) => Object} a function that takes a table row and spits out an object
    */
    function factory(headings) {
    return function(row) {
    return arrayify(row.cells).reduce(function(prev, curr, i) {
    prev[headings[i]] = curr.innerText;
    return prev;
    function mapRow(headings) {
    return function mapRowToObject({ cells }) {
    return [...cells].reduce(function(result, cell, i) {
    const input = cell.querySelector("input,select");
    var value;

    if (input) {
    value = input.type === "checkbox" ? input.checked : input.value;
    } else {
    value = cell.innerText;
    }

    return Object.assign(result, { [headings[i]]: value });
    }, {});
    }
    };
    }

    /**
    * given a table, generate an array of objects.
    * each object corresponds to a row in the table.
    * each object's key/value pairs correspond to a column's heading and the row's value for that column
    *
    *
    * @param {HTMLTableElement} table the table to convert
    * @return {Array[Object]} array of objects representing each row in the table
    * @return {Array<Object>} array of objects representing each row in the table
    */
    function parseTable(table) {
    var headings = arrayify(table.tHead.rows[0].cells).map(function(heading) {
    return heading.innerText;
    });
    return arrayify(table.tBodies[0].rows).map(factory(headings));
    }
    var headings = [...table.tHead.rows[0].cells].map(
    heading => heading.innerText
    );

    return [...table.tBodies[0].rows].map(mapRow(headings));
    }
  3. WickyNilliams revised this gist Jun 16, 2019. 1 changed file with 27 additions and 0 deletions.
    27 changes: 27 additions & 0 deletions parseTable.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,30 @@
    /**
    * @license
    *
    * The MIT License (MIT)
    *
    * Copyright (c) 2014 Nick Williams
    *
    * Permission is hereby granted, free of charge, to any person obtaining a copy
    * of this software and associated documentation files (the "Software"), to deal
    * in the Software without restriction, including without limitation the rights
    * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
    * copies of the Software, and to permit persons to whom the Software is
    * furnished to do so, subject to the following conditions:
    *
    * The above copyright notice and this permission notice shall be included in
    * all copies or substantial portions of the Software.
    *
    * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
    * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
    * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
    * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
    * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
    * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
    * THE SOFTWARE.
    */


    /**
    * converts array-like object to array
    * @param collection the object to be converted
  4. WickyNilliams created this gist Feb 27, 2014.
    57 changes: 57 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,57 @@
    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>parseTable</title>
    </head>
    <body>
    <table>
    <thead>
    <tr>
    <th>name</th>
    <th>age</th>
    <th>eye colour</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>dave</td>
    <td>35</td>
    <td>blue</td>
    </tr>
    <tr>
    <td>sarah</td>
    <td>29</td>
    <td>brown</td>
    </tr>
    <tr>
    <td>john</td>
    <td>42</td>
    <td>green</td>
    </tr>
    </tbody>
    </table>

    <script src="parseTable.js"></script>
    <script>
    var table = document.querySelector("table");
    var data = parseTable(table);
    console.log(data);
    // [
    // {
    // "name" : "dave",
    // "age" : "35",
    // "eye colour" : "blue"
    // }, {
    // "name" : "sarah",
    // "age" : "29",
    // "eye colour" : "brown"
    // }, {
    // "name" : "john",
    // "age" : "42",
    // "eye colour" : "green"
    // },
    // ]
    </script>
    </body>
    </html>
    38 changes: 38 additions & 0 deletions parseTable.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,38 @@
    /**
    * converts array-like object to array
    * @param collection the object to be converted
    * @return {Array} the converted object
    */
    function arrayify(collection) {
    return Array.prototype.slice.call(collection);
    }

    /**
    * generates factory functions to convert table rows to objects,
    * based on the titles in the table's <thead>
    * @param {Array[String]} headings the values of the table's <thead>
    * @return {Function} a function that takes a table row and spits out an object
    */
    function factory(headings) {
    return function(row) {
    return arrayify(row.cells).reduce(function(prev, curr, i) {
    prev[headings[i]] = curr.innerText;
    return prev;
    }, {});
    }
    }

    /**
    * given a table, generate an array of objects.
    * each object corresponds to a row in the table.
    * each object's key/value pairs correspond to a column's heading and the row's value for that column
    *
    * @param {HTMLTableElement} table the table to convert
    * @return {Array[Object]} array of objects representing each row in the table
    */
    function parseTable(table) {
    var headings = arrayify(table.tHead.rows[0].cells).map(function(heading) {
    return heading.innerText;
    });
    return arrayify(table.tBodies[0].rows).map(factory(headings));
    }