Recientemente me encontré con un problema en el que necesitaba tomar una cadena como esta. "5.0, 100, 5.5, 101, 6.0, 102:L10;5.0, 99, 5.5, 100, 6.0, 101:L20" y conviértalo en una matriz para que luego se muestre como una tabla. La matriz se vería algo así:
| L10 | L20 | |
|---|---|---|
| 5.0 | 100 | 99 |
| 5.5 | 101 | 100 |
| 6.0 | 102 | 100 |
Sé, para empezar, que podría usar split() para dividir la cadena en diferentes arreglos mirando los , , : y ; pero estaba un poco atascado sobre cómo llevarlo a donde pudiera usar fácilmente los datos para ponerlos en una tabla. Llegué a donde lo tenía dividido en esto:
[ ["5.0", "100", "5.5", "101", "6.0", "102"], ["L10"], ["5.0", "99", "5.5", "100", "6.0", "101"], ["L20"] ]Llegué aquí con el siguiente código.
var input = "5.0, 100, 5.5, 101, 6.0, 102:L10;5.0, 99, 5.5, 100, 6.0, 101:L20" function test(){ let firstSplit = input.split(';'); let secondSplit = []; let thirdSplit = []; firstSplit.forEach((item) => { let splitArray = item.split(':') secondSplit.push(splitArray) }) secondSplit.forEach((array) => { let split2 = array.forEach((item) => { let secondSplit = item.split(',') thirdSplit.push(secondSplit) }) } ) return thirdSplit; } console.log(test());¡Agradecería mucho cualquier ayuda para resolver esto!
¿Es esto lo que quieres (perdón por estar en línea):
function parse(s) { let r = {}; s.split(';').map(e => { e = e.split(':'); r[e[1].trim()] = e[0].split(/(.+?,.+?,)/).map(e => e.trim()).filter(e => e).reduce((a,e,i)=>{ e = e.split(',').map(e=>e.trim()); a[e[0]] = e[1]; return a; }, {}) }) return r; } var result = parse('5.0, 100, 5.5, 101, 6.0, 102:L10;5.0, 99, 5.5, 100, 6.0, 101:L20'); console.log(result['L10']['5.5']); // Return '101' console.log(result['L20']['5.0']); // Return '99' console.log(result) /* Return : { "L10": { "5.0": "100", "5.5": "101", "6.0": "102" }, "L20": { "5.0": "99", "5.5": "100", "6.0": "101" } }*/No es elegante, pero funciona para que tengas un objeto que tenga todos los valores que necesitas, así:
{points: Array(3), L10: Array(3), L20: Array(3)} const tablestring = "5.0, 100, 5.5, 101, 6.0, 102:L10;5.0, 99, 5.5, 100, 6.0, 101:L20" const obj = { points : [] } const s2 = tablestring.split(';') const s22 = s2.map(s => s.split(':')); for(let arr of s22){ obj[arr[1]] = [] } s22.map(curr => { curr[0].split(',') .map((val, idx) => idx % 2 === 0 ? !obj['points'].some(exists => exists === val) && obj['points'].push(val) : obj[curr[1]].push(val) )}) console.log(obj)Así es como crearía un formato de datos mucho más útil:
const str = "5.0, 100, 5.5, 101, 6.0, 102:L10;5.0, 99, 5.5, 100, 6.0, 101:L20"; const data = {}; str.split(/;/) .map(row => row.split(/:/)) .forEach(([row, key]) => { row.match(/[^, ]+, [^, ]+/g) .map(r => r.split(/, /)) .forEach(([item, value]) => data[item] = { ...(data[item] || {}), [key]: value }); }); console.log(data);Transforma tus datos de esta forma:
{ "5.0": { "L10": "100", "L20": "99" }, "5.5": { "L10": "101", "L20": "100" }, "6.0": { "L10": "102", "L20": "101" } }Y así es como podrías manipularlo para crear una tabla HTML:
const str = "5.0, 100, 5.5, 101, 6.0, 102:L10;5.0, 99, 5.5, 100, 6.0, 101:L20"; const data = {}; str.split(/;/) .map(row => row.split(/:/)) .forEach(([row, key]) => { row.match(/[^, ]+, [^, ]+/g) .map(r => r.split(/, /)) .forEach(([item, value]) => data[item] = { ...(data[item] || {}), [key]: value }); }); // everything below is only to create a proper HTML table const headers = str.match(/(?<=:)([^\s;]+)/g); document.body.querySelector('thead').append(document.createElement('th'), ...headers.map(header => elem('th', header))); document.body.querySelector('tbody').append(...Object.entries(data).map(([item, props]) => row(item, ...headers.map(header => props[header])))); function elem(type = 'td', text) { const e = document.createElement(type); e.innerText = text; return e; } function row(...items) { const r = document.createElement('tr'); r.append(...items.map(item => elem('td', item))); return r; } table { font-family: sans-serif; background: #eee; } td { padding: 2px .5em; } td:first-child { font-weight: bold; } <table> <thead></thead> <tbody></tbody> </table>