將字串轉換為矩陣以使用表格顯示

我最近遇到了一個問題，我需要使用這樣的字串。"5.0, 100, 5.5, 101, 6.0, 102:L10;5.0, 99, 5.5, 100, 6.0, 101:L20" 并將其轉換為矩陣，然后顯示為表格。矩陣看起來像這樣：

我知道開始我可以使用 split() 通過查看 , 來將字串分成不同的陣列,，:但是;我有點堅持如何將它放到可以輕松使用資料將其放入表中的位置. 我到了我把它分成這個的地方：

[ ["5.0", "100", "5.5", "101", "6.0", "102"], ["L10"], ["5.0", "99", "5.5", "100", "6.0", "101"], ["L20"] ]

我使用以下代碼來到這里。

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());

我將不勝感激任何幫助解決這個問題！

uj5u.com熱心網友回復：

這是你想要的（對不起在線）：

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'

uj5u.com熱心網友回復：

它并不優雅，但它可以讓您擁有一個具有您需要的所有值的物件，如下所示：

{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]] = []
}

const s222 = s22.map((curr) => curr[0].split(','))

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)

uj5u.com熱心網友回復：

決議您的資料

以下是我如何創建更有用的資料格式：

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);

它以這種形式轉換您的資料：

{
  "5.0": {
    "L10": "100",
    "L20": "99"
  },
  "5.5": {
    "L10": "101",
    "L20": "100"
  },
  "6.0": {
    "L10": "102",
    "L20": "101"
  }
}

展示您的資料

以下是您可以如何操作它來創建 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>

標籤：javascript

上一篇：在ReactNative中使用FetchAPI將資料發送到服務器

下一篇：從另一個檔案呼叫時JSON為空