2b:null 2c:["$","title",null,{"children":"CSV to JSON by column | Steffen Hänsch | Observable"}] 31:T60b,viewof keySelect = { let wrapper = html`

`; wrapper.value = ''; let oldItem; const colors = { inactive: '#9c9c9c', active: '#FD5E44', hover: '#6e6e6e', }; const liStyle = ` padding: 1px 7px; background: ${colors.inactive}; margin: 2px; cursor: pointer; font-family: Roboto, sans-serif; font-size: 16px; color: white; border-radius: 3px; `; if (input.length > 0) { const data = CSVToArray(input); const cols = data[0]; const items = cols.map((col) => { const item = html`

${col}

`; item.addEventListener('mouseover', (ele) => { ele.target.style.backgroundColor = colors.hover; }); item.addEventListener('mouseout', (ele) => { if(ele.target === oldItem) { ele.target.style.backgroundColor = colors.active; } else { ele.target.style.backgroundColor = colors.inactive; } }); item.addEventListener('click', (ele) => { wrapper.value = col; wrapper.dispatchEvent(new CustomEvent('input')); ele.target.style.backgroundColor = colors.active; ele.target.style.fontWeight = 700; if (oldItem) { oldItem.style.backgroundColor = colors.inactive; oldItem.style.fontWeight = 400; } oldItem = ele.target; }); return item; }); wrapper = html`

${items}`; } return wrapper; }32:T88d,// SOURCE: https://www.bennadel.com/blog/1504-ask-ben-parsing-csv-strings-with-javascript-exec-regular-expression-command.htm function CSVToArray( strData, strDelimiter ){ // Check to see if the delimiter is defined. If not, // then default to comma. strDelimiter = (strDelimiter || ","); // Create a regular expression to parse the CSV values. var objPattern = new RegExp( ( // Delimiters. "(\\" + strDelimiter + "|\\r?\\n|\\r|^)" + // Quoted fields. "(?:\"([^\"]*(?:\"\"[^\"]*)*)\"|" + // Standard fields. "([^\"\\" + strDelimiter + "\\r\\n]*))" ), "gi" ); // Create an array to hold our data. Give the array // a default empty first row. var arrData = [[]]; // Create an array to hold our individual pattern // matching groups. var arrMatches = null; // Keep looping over the regular expression matches // until we can no longer find a match. while (arrMatches = objPattern.exec( strData )){ // Get the delimiter that was found. var strMatchedDelimiter = arrMatches[ 1 ]; // Check to see if the given delimiter has a length // (is not the start of string) and if it matches // field delimiter. If id does not, then we know // that this delimiter is a row delimiter. if ( strMatchedDelimiter.length && (strMatchedDelimiter != strDelimiter) ){ // Since we have reached a new row of data, // add an empty row to our data array. arrData.push( [] ); } // Now that we have our delimiter out of the way, // let's check to see which kind of value we // captured (quoted or unquoted). if (arrMatches[ 2 ]){ // We found a quoted value. When we capture // this value, unescape any double quotes. var strMatchedValue = arrMatches[ 2 ].replace( new RegExp( "\"\"", "g" ), "\"" ); } else { // We found a non-quoted value. var strMatchedValue = arrMatches[ 3 ]; } // Now that we have our value string, let's add // it to the data array. arrData[ arrData.length - 1 ].push( strMatchedValue ); } // Return the parsed data. return( arrData ); }33:[] 2f:{"id":"bc409a922823e3c4","slug":"csv-to-json-by-column","title":"CSV to JSON by column","thumbnail":"86fc499224fcda9b8a2b68267e1050c21e8eec289f54d02c180788129cf5cc51","access_level":"public","create_time":"$D2018-03-09T14:38:38.534Z","update_time":"$D2018-08-15T11:14:16.073Z","view_time":null,"first_public_time":"$D2018-03-12T11:22:42.305Z","fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"9f0a5778a9e93283","login":"s-haensch","name":"Steffen Hänsch","avatar_url":"https://avatars-next.observableusercontent.com/f8ae573e8ef3303795b5c307e85b49753b498e72abbb8e91b0f4ba73e7327515","tier":"starter_2024"},"version":280,"publish_version":280,"role":null,"authored":false,"authors":[{"type":"individual","id":"54a3b46988329fc4","login":"s-haensch","name":"Steffen Hänsch","avatar_url":"https://avatars-next.observableusercontent.com/f8ae573e8ef3303795b5c307e85b49753b498e72abbb8e91b0f4ba73e7327515","tier":null}],"members":[{"type":"individual","id":"54a3b46988329fc4","login":"s-haensch","name":"Steffen Hänsch","avatar_url":"https://avatars-next.observableusercontent.com/f8ae573e8ef3303795b5c307e85b49753b498e72abbb8e91b0f4ba73e7327515","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":9,"collection":null,"type":"notebook","body":{"title":"CSV to JSON by column","cells":[{"id":0,"value":"md`\n# CSV to JSON by column\nTurn CSV data into JSON format, sorted by duplicate entries of a column.\n1. Paste CSV data\n2. Choose column\n3. Choose pretty or minified output\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2,"value":"viewof input = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":171,"value":"md`### Select column to sort by`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":97,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":180,"value":"viewof pretty = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":87,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":258,"value":"output = {\n let data = null;\n\n if (input.length > 0 && keySelect.length > 0) {\n data = CSVToArray(input);\n const cols = data[0];\n const values = _.drop(data);\n const result = {};\n \n // get selection index\n const selectedIndex = cols.indexOf(keySelect);\n\n for (let i = 0; i < values.length; i += 1) {\n const row = values[i];\n const key = cols[selectedIndex];\n const rowObject = {}\n \n for (let ri = 0; ri < row.length; ri += 1) {\n if (ri !== selectedIndex) {\n rowObject[cols[ri]] = row[ri];\n }\n }\n \n if (!result[row[selectedIndex]]) result[row[selectedIndex]] = [];\n result[row[selectedIndex]].push(rowObject);\n }\n \n return result;\n } else {\n return '';\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":78,"value":"_ = require(\"lodash\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":33,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":208,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"