2a:null 2b:["$","title",null,{"children":"CSV stats | rednafi | Observable"}] 31:Ta2f,{ // create file input elements for the two files const fileInput1 = html``; const fileInput2 = html``; // create empty HTML tables for the two files const table1 = html`

`; const table2 = table1.cloneNode(true); // function to handle file load event and display stats in table const handleFileLoad = (table) => async (event) => { const file = event.target.files[0]; const reader = new FileReader(); // read the file contents as text reader.readAsText(file); // create a promise to wait for the file to load and parse const fileLoaded = new Promise((resolve, reject) => { reader.onload = () => { const contents = reader.result; const lines = contents.trim().split("\n"); const headers = lines[0].split(","); const numColumns = headers.length; const numRows = lines.length - 1; // create a row for the number of rows const numRowsRow = html` Number of rows: ${numRows} `; // create a row for the number of columns const numColsRow = html` Number of columns: ${numColumns} `; // create a row for the column names const headerRow = html` Column names: ${headers.map((h, i) => `${i}: ${h}`).join(", ")} `; // add the rows to the table body const tableBody = html` ${numRowsRow}${numColsRow}${headerRow} `; table.replaceChild(tableBody, table.lastChild); // resolve the promise with the parsed data resolve({ numRows, numColumns, headers }); }; reader.onerror = () => { reject(reader.error); }; }); // wait for the promise to resolve before displaying the results in the table try { const { numRows, numColumns, headers } = await fileLoaded; console.log( `File loaded: ${file.name}, Rows: ${numRows}, Columns: ${numColumns}, Headers: ${headers}` ); } catch (err) { console.error(err); } }; // add event listeners to the file input elements fileInput1.addEventListener("change", handleFileLoad(table1)); fileInput2.addEventListener("change", handleFileLoad(table2)); // display the file input and table elements in the notebook return html`${fileInput1} ${table1} ${fileInput2} ${table2}`; }32:[] 2e:{"id":"25e4a6e1488bf32b","slug":"compare-two-csv-files","title":"CSV stats","thumbnail":"bc2f4145ae730922c1d9fb5ec7a0b5de046d27fec5b430788b92ff9e37b7dc3e","access_level":"public","create_time":"$D2023-04-09T16:41:44.551Z","update_time":"$D2023-04-09T21:45:52.040Z","view_time":null,"first_public_time":"$D2023-04-09T16:41:44.551Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"90a7bdabe104edea","login":"rednafi","name":"rednafi","avatar_url":"https://avatars-next.observableusercontent.com/a83dd36e03f45b2c4e62b6a7643fe9b3a4fb9018c9787622859ca2e56f59b426","tier":"starter_2024"},"version":265,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"cdb02198665fad12","login":"rednafi","name":"rednafi","avatar_url":"https://avatars-next.observableusercontent.com/a83dd36e03f45b2c4e62b6a7643fe9b3a4fb9018c9787622859ca2e56f59b426","tier":null}],"members":[{"type":"individual","id":"cdb02198665fad12","login":"rednafi","name":"rednafi","avatar_url":"https://avatars-next.observableusercontent.com/a83dd36e03f45b2c4e62b6a7643fe9b3a4fb9018c9787622859ca2e56f59b426","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"CSV stats","cells":[{"id":0,"value":"# CSV stats","pinned":false,"hidden":false,"mode":"md"},{"id":258,"value":"Compare basic stats on two uploaded CSV files with ease.","pinned":false,"hidden":false,"mode":"md"},{"id":223,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2f:"$2e:body"