如何將制表符分隔的 CSV 轉換為 JSON 數據？

Question

我一直在嘗試創建一個單頁 html 它將制表符分隔的原始數據轉換為 JSON 對象數組。 我編寫了代碼，但我確信這不是最好的，因為我在代碼中嵌套了循環。 我正在尋求專家的建議，以使此代碼更好。

它假定第一行是列標題。

例子;

輸入：

name    age sex address mobile  email   pan
name1   age1    sex1    address1    mobile1 email1  pan1
name2   age2    sex2    address2    mobile2 email2  pan2
name3   age3    sex3    address3    mobile3 email3  pan3
name4   age4    sex4    address4    mobile4 email4  pan4

預期 OUTPUT：

{"name" : "name1","age" : "age1","sex" : "sex1","address" : "address1","mobile" : "mobile1","email" : "email1","pan" : "pan1"},
{"name" : "name2","age" : "age2","sex" : "sex2","address" : "address2","mobile" : "mobile2","email" : "email2","pan" : "pan2"},
{"name" : "name3","age" : "age3","sex" : "sex3","address" : "address3","mobile" : "mobile3","email" : "email3","pan" : "pan3"},
{"name" : "name4","age" : "age4","sex" : "sex4","address" : "address4","mobile" : "mobile4","email" : "email4","pan" : "pan4"},

這是代碼；

 const parse = document.getElementById("parse"); const clear = document.getElementById("clear"); const textarea = document.getElementById("textarea"); const result = document.getElementById("result"); clear.addEventListener("click", () => { textarea.value = ""; }); parse.addEventListener("click", () => { result.textContent = ""; let rawData = textarea.value; let allRows = rawData.split("\n"); let columnHeaders = allRows[0].split("\t"); let dataset = []; for (let i = 1; i < allRows.length; i++) { dataset.push(allRows[i].split("\t")); } dataset.map((row) => { if (row;= "") { let rowString = []. row,forEach((value. i) => { rowString:push(`"${columnHeaders[i]}"; "${value}"`); }). result.innerHTML += "{" + rowString,join(",") + "};<br/>"; } }); });

 html { width: 100vw; height: 98vh; font-family: monospace; font-size: 120%; } * { margin: 0; padding: 0.5em; box-sizing: border-box; } #top { display: block; width: 100%; height: 75px; } #top div { display: block; float: right; }.btn { display: inline-block; width: 100px; background-color: rgb(48, 122, 124); color: #fff; border: none; padding: 0.75em; cursor: pointer; transition: all 0.4s; border-radius: 8px; outline: none; }.btn:hover { margin-top: -0.1em; background-color: rgb(57, 142, 145); box-shadow: 0px 10px 20px #888; } #columnCount { margin-right: 2em; } #columns { width: 50px; margin-bottom: 1em; } #inpWrapper, #resultWrapper { display: block; margin: 0 auto; width: 100%; height: 300px; margin-bottom: 1em; border: solid 1px #777; } textarea { border: none; resize: none; outline: none; } textarea, #result { display: flex; width: 100%; height: 100%; padding: 1em; flex-wrap: wrap; transition: all 0.4s; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <title>Document</title> </head> <body> <div class="container"> <div class="row"> <div class="col"> <div id="top"> <div> <button class="btn" id="clear">Clear</button> <button class="btn" id="parse">Parse</button> </div> </div> <div id="inpWrapper"> <textarea name="textarea" id="textarea">Test Input</textarea> </div> <div id="resultWrapper"> <p id="result">Test</p> </div> <p id="result"></p> </div> </div> </div> </body> </html>

Answer 1

這是一個例子：

//var tsv is the TSV file with headers
function tsvJSON(tsv){
 
  var lines=tsv.split("\n");
 
  var result = [];
 
  var headers=lines[0].split("\t");
 
  for(var i=1;i<lines.length;i++){
 
      var obj = {};
      var currentline=lines[i].split("\t");
 
      for(var j=0;j<headers.length;j++){
          obj[headers[j]] = currentline[j];
      }
 
      result.push(obj);
 
  }
  
  //return result; //JavaScript object
  return JSON.stringify(result); //JSON
}

另請參閱此處

如何將制表符分隔的 CSV 轉換為 JSON 數據？

問題描述

1 個解決方案

解決方案1
0 2020-12-02 13:06:43

如何將制表符分隔的 CSV 轉換為 JSON 數據？

問題描述

1 個解決方案

解決方案1 0 2020-12-02 13:06:43

解決方案1
0 2020-12-02 13:06:43