{"id":3120,"date":"2023-03-06T09:33:10","date_gmt":"2023-03-06T09:33:10","guid":{"rendered":"https:\/\/www.toolkit.keywordfinder.us\/?page_id=3120"},"modified":"2023-03-06T09:33:10","modified_gmt":"2023-03-06T09:33:10","slug":"csv-reader","status":"publish","type":"page","link":"https:\/\/tools.billionsideas.com\/pt\/csv-reader\/","title":{"rendered":"CSV Reader"},"content":{"rendered":"<!DOCTYPE html>\n<html lang=\"en\">\n    <head>\n        <meta charset=\"UTF-8\">\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n      \n    \n    <\/head>\n    <body>\n     <section>        <h1>CSV Data render App<\/h1>\n\n        \n        <label for=\"inputTag\">\n          Load CSV File\n          <br\/>\n          <input id=\"csvFileData\"                 type=\"file\"\/>\n        <\/label>\n    <\/div>\n        <table id=\"csvFormData\"><\/table>\n      <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/papaparse@5.2.0\/papaparse.min.js\"><\/script>\n<\/section> \n    <\/body>\n<\/html>\n<style>\ntable {\n  border: 2px solid orchid;\n  border-radius: 5px;\n  box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);\n  overflow: hidden;\n  font-family: \"Times New Roman\", Times, serif\n  font-weight: bold;\n  font-size: 16px;\n}\n\n\nth {\n  background: #527495;\n  color: #ffffff;\n  text-align: left;\n}\n\nth,\ntd {\n  padding: 10px 20px;\n}\n\nsection{\n         margin-top:60px;\n        width: 100%;\n        max-width: 970px;\n        background-color: #fff;\n        border: 1px solid #ddd;\n        padding: 25px;\n      }\n<\/style>\n\n<script>\nclass CsvDataToTable {\n \n  constructor(root) {\n    this.root = root;\n  }\n\n \/\/ Function to update data and table header\n  update(data, headerColumns = []) {\n    this.clear();\n    this.setHeader(headerColumns);\n    this.setBody(data);\n  }\n\n \/\/ to clear the input file data\n  clear() {\n    this.root.innerHTML = \"\";\n  }\n\n \n  setHeader(headerColumns) {\n    this.root.insertAdjacentHTML(\n     \"afterbegin\",`<thead><tr>                 ${headerColumns.map((text) =>           `<th>${text}<\/th>`).join(\"\")}<\/tr>\n       <\/thead>`\n    );\n  }\n\n \n  setBody(data) {\n    const rowsHtml = data.map((row) => {\n    return `<tr>${row.map((text) =>         `<td>${text}<\/td>`).join(\"\")}<\/tr>`;\n  });\n\n    this.root.insertAdjacentHTML(\n      \"beforeend\",`\n       <tbody>${rowsHtml.join(\"\")}\n       <\/tbody>`\n    );\n  }\n}\n\n\nconst tableRoot = document.querySelector(\"#csvFormData\");\nconst csvFileInput = document.querySelector(\"#csvFileData\");\nconst csvToTable = new CsvDataToTable(tableRoot);\n\ncsvFileInput.addEventListener(\"change\", (e) => {\n  Papa.parse(csvFileInput.files[0], {\n    delimiter: \",\",\n    skipEmptyLines: true,\n    complete: (results) => {\n      csvToTable.update(results.data.slice(1), results.data[0]);\n    }\n  });\n});\n\n<\/script>","protected":false},"excerpt":{"rendered":"<p>CSV Data render App Load CSV File<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","footnotes":""},"class_list":["post-3120","page","type-page","status-publish"],"taxonomy_info":[],"featured_image_src_large":false,"author_info":{"display_name":"Billions Ideas","author_link":"https:\/\/tools.billionsideas.com\/pt\/author\/loginbillionsideas-com\/"},"comment_info":0,"jetpack-related-posts":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/tools.billionsideas.com\/pt\/wp-json\/wp\/v2\/pages\/3120","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tools.billionsideas.com\/pt\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tools.billionsideas.com\/pt\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tools.billionsideas.com\/pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tools.billionsideas.com\/pt\/wp-json\/wp\/v2\/comments?post=3120"}],"version-history":[{"count":0,"href":"https:\/\/tools.billionsideas.com\/pt\/wp-json\/wp\/v2\/pages\/3120\/revisions"}],"wp:attachment":[{"href":"https:\/\/tools.billionsideas.com\/pt\/wp-json\/wp\/v2\/media?parent=3120"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}