hising/json2table.html

## json2table.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JSON 2 Table</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        }

        table {
            width: 100%;
            border: 1px solid #eaeaea;
            border-collapse: collapse;
            margin: 20px 0;
        }

        table th,
        table td {
            text-align: left;
            padding: 6px 12px;
            font-size: 14px;
            border-bottom: 1px solid #eaeaea;

        }

        table tbody tr:nth-child(odd) {
            background-color: #f7f7f7;
        }
    </style>
    <script>

        //const quarterlyStats = "http://localhost:8001/api/cities/1201/quarterly";

        const getHeaders = (payload, options) => {
            let items = Object.keys(payload[0]);

            if (options.hasOwnProperty('only')) {
                items = items.filter((item) => {
                    return options.only.includes(item);
                });
            }

            if (options.hasOwnProperty('exclude')) {
                items = items.filter((item) => {
                    return !options.exclude.includes(item);
                });
            }

            return (items);
        };

        const appendRowToTbody = (row, tbody, options) => {
            const tr = document.createElement('tr');
            for (const key in row) {
                let showColumn = !options.hasOwnProperty('only');
                if (options.hasOwnProperty('only') && options.only.includes(key)) {
                    showColumn = true;
                }

                if (options.hasOwnProperty('exclude') && options.exclude.includes(key)) {
                    showColumn = false;
                }

                if (row.hasOwnProperty(key) && showColumn) {
                    const element = row[key];
                    const td = document.createElement('td');

                    let txt = typeof element === 'object' ? JSON.stringify(element) : element;

                    if (options.hasOwnProperty("filters") && options.filters.hasOwnProperty(key)) {
                        txt = options.filters[key](txt, row);
                    }

                    td.innerHTML = txt;
                    tr.appendChild(td);
                }
            }
            tbody.appendChild(tr);
        };

        const arrayToTable = (payload, options) => {
            const header = getHeaders(payload, options);
            const table = document.createElement('table');
            const thead = document.createElement('thead');
            const tbody = document.createElement('tbody');
            const tr = document.createElement('tr');

            header.forEach((label) => {
                const th = document.createElement('th');
                th.innerText = label;
                tr.appendChild(th);
            });

            thead.appendChild(tr);

            payload.forEach((row) => appendRowToTbody(row, tbody, options));
            table.appendChild(thead);
            table.appendChild(tbody);
            return table;

        };

        const fetchJSON = async (endpoint) => {
            const response = await fetch(endpoint);
            return await response.json();
        };

        const demo = async () => {
            const json = await fetchJSON("https://api.github.com/users/hising/gists");

            const options = {
                //only: ['description', 'created_at'],
                exclude: ['files', 'updated_at', 'owner', 'comments', 'public', 'comments_url', 'url', 'forks_url', 'commits_url', 'id', 'node_id', 'git_pull_url', 'git_push_url', 'html_url'],
                filters: {
                    'created_at': (txt, item) => {
                        return (new Date(txt)).toLocaleString('sv-se');
                    },
                    'description': (txt, item) => {
                        return `<a href="${item.html_url}">${txt}</a>`;
                    }
                }
            };

            const table = arrayToTable(json, options);
            document.getElementById('example1').appendChild(table);
        };


        document.addEventListener('DOMContentLoaded', (event) => {
            demo();
        });
    </script>
</head>

<body>
    <div id="example1">Table 1 from Gists <a href="https://api.github.com/users/hising/gists">https://api.github.com/users/hising/gists</a></div>

</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>JSON 2 Table</title>
	<style>
	body {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	}

	table {
	width: 100%;
	border: 1px solid #eaeaea;
	border-collapse: collapse;
	margin: 20px 0;
	}

	table th,
	table td {
	text-align: left;
	padding: 6px 12px;
	font-size: 14px;
	border-bottom: 1px solid #eaeaea;

	}

	table tbody tr:nth-child(odd) {
	background-color: #f7f7f7;
	}
	</style>
	<script>

	//const quarterlyStats = "http://localhost:8001/api/cities/1201/quarterly";

	const getHeaders = (payload, options) => {
	let items = Object.keys(payload[0]);

	if (options.hasOwnProperty('only')) {
	items = items.filter((item) => {
	return options.only.includes(item);
	});
	}

	if (options.hasOwnProperty('exclude')) {
	items = items.filter((item) => {
	return !options.exclude.includes(item);
	});
	}

	return (items);
	};

	const appendRowToTbody = (row, tbody, options) => {
	const tr = document.createElement('tr');
	for (const key in row) {
	let showColumn = !options.hasOwnProperty('only');
	if (options.hasOwnProperty('only') && options.only.includes(key)) {
	showColumn = true;
	}

	if (options.hasOwnProperty('exclude') && options.exclude.includes(key)) {
	showColumn = false;
	}

	if (row.hasOwnProperty(key) && showColumn) {
	const element = row[key];
	const td = document.createElement('td');

	let txt = typeof element === 'object' ? JSON.stringify(element) : element;

	if (options.hasOwnProperty("filters") && options.filters.hasOwnProperty(key)) {
	txt = options.filters[key](txt, row);
	}

	td.innerHTML = txt;
	tr.appendChild(td);
	}
	}
	tbody.appendChild(tr);
	};

	const arrayToTable = (payload, options) => {
	const header = getHeaders(payload, options);
	const table = document.createElement('table');
	const thead = document.createElement('thead');
	const tbody = document.createElement('tbody');
	const tr = document.createElement('tr');

	header.forEach((label) => {
	const th = document.createElement('th');
	th.innerText = label;
	tr.appendChild(th);
	});

	thead.appendChild(tr);

	payload.forEach((row) => appendRowToTbody(row, tbody, options));
	table.appendChild(thead);
	table.appendChild(tbody);
	return table;

	};

	const fetchJSON = async (endpoint) => {
	const response = await fetch(endpoint);
	return await response.json();
	};

	const demo = async () => {
	const json = await fetchJSON("https://api.github.com/users/hising/gists");

	const options = {
	//only: ['description', 'created_at'],
	exclude: ['files', 'updated_at', 'owner', 'comments', 'public', 'comments_url', 'url', 'forks_url', 'commits_url', 'id', 'node_id', 'git_pull_url', 'git_push_url', 'html_url'],
	filters: {
	'created_at': (txt, item) => {
	return (new Date(txt)).toLocaleString('sv-se');
	},
	'description': (txt, item) => {
	return `<a href="${item.html_url}">${txt}</a>`;
	}
	}
	};

	const table = arrayToTable(json, options);
	document.getElementById('example1').appendChild(table);
	};


	document.addEventListener('DOMContentLoaded', (event) => {
	demo();
	});
	</script>
	</head>

	<body>
	<div id="example1">Table 1 from Gists <a href="https://api.github.com/users/hising/gists">https://api.github.com/users/hising/gists</a></div>

	</body>

	</html>