【问题标题】:Convert CSV data into JSON format using Javascript使用 Javascript 将 CSV 数据转换为 JSON 格式
【发布时间】:2015-01-16 07:15:25
【问题描述】:

我有 CSV 格式的数据,想用 Javascript 转换成 JSON 格式。

以下是csv格式:

[Test.csv] 
id;name;author
integer;string;authors:n
1;To Kill an Angry Bird;1

[authors.csv] 
id;name
integer;string
1;Harper Lee
2;JRR Tolkien
3;William Shakespeare

我想和他们的作者一起得到所有的书。那么请问如何使用Javascript实现它。

【问题讨论】:

  • 欢迎来到 StackOverflow。到目前为止,您尝试过什么吗?您是否可以展示您的代码,即使它不起作用?
  • 使用 jquery-csv,特别是 toArrays() 将 CSV 转换为内存数据。然后调用 JSON.stringify() 将其转换为 JSON。这是 jquery-csv github.com/evanplaice/jquery-csv 的链接

标签: javascript jquery asp.net-mvc-4


【解决方案1】:

以下内容应该适合您。

感谢http://techslides.com/convert-csv-to-json-in-javascript

//var csv is the CSV file with headers
function csvJSON(csv){

  var lines=csv.split("\n");

  var result = [];

  // NOTE: If your columns contain commas in their values, you'll need
  // to deal with those before doing the next step 
  // (you might convert them to &&& or something, then covert them back later)
  // jsfiddle showing the issue https://jsfiddle.net/
  var headers=lines[0].split(",");

  for(var i=1;i<lines.length;i++){

      var obj = {};
      var currentline=lines[i].split(",");

      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
}

【讨论】:

  • 如果任何分隔符之间的字符串是带有这些分隔符的引号字符串,这将出错。就像带逗号的引号句子一样,因为它将在字符串内的逗号处拆分,而不是忽略引号内的逗号。
  • @matthew-e-brown 确实会。良好的观察力。
  • 也许看看我的回答here,首先是这个问题导致我来到这里?我并不完全希望复制粘贴我的答案,因为这个答案在大多数情况下都适用,但我认为如果他们处于这种边缘情况,将这个链接留在 cmets 中可能会在未来帮助其他人。 :-)
【解决方案2】:

我会查看PapaParse。他们有一个名为papaparse.min.js 的文件,如果需要,您可以将其放入您的项目中。 PapaParse 没有依赖项。

我自己使用过它,并且可以验证它是否有效、方便且有据可查。

【讨论】:

    【解决方案3】:

    基于@DelightedD0D,我会添加if (!lines[i]) continue,这样它就可以忽略任何空行和尾随行。

    function csvJSON(csv) {
        const lines = csv.split('\n')
        const result = []
        const headers = lines[0].split(',')
    
        for (let i = 1; i < lines.length; i++) {        
            if (!lines[i])
                continue
            const obj = {}
            const currentline = lines[i].split(',')
    
            for (let j = 0; j < headers.length; j++) {
                obj[headers[j]] = currentline[j]
            }
            result.push(obj)
        }
        return result
    }
    

    【讨论】:

    • 这是我从我的 CSV 检索到的结果...我想你忘了计算引号格式的 CSV 文件 [ { '"foo"': '"bar"', '"created"': '"2021-08-09 13:44:42"', '"price"': '"10.00"', }, ]
    【解决方案4】:

    我认为,我有一个更好的解决方案,这也有一个问题,即值不应包含逗号(,)。否则这是最好的解决方案。

     // convert csv to json
    csvJSON(csvText) {
    let lines = [];
    const linesArray = csvText.split('\n');
    // for trimming and deleting extra space 
    linesArray.forEach((e: any) => {
        const row = e.replace(/[\s]+[,]+|[,]+[\s]+/g, ',').trim();
        lines.push(row);
    });
    // for removing empty record
    lines.splice(lines.length - 1, 1);
    const result = [];
    const headers = lines[0].split(",");
    
    for (let i = 1; i < lines.length; i++) {
    
        const obj = {};
        const currentline = lines[i].split(",");
    
        for (let j = 0; j < headers.length; j++) {
        obj[headers[j]] = currentline[j];
        }
        result.push(obj);
    }
    //return result; //JavaScript object
    // return JSON.stringify(result); //JSON
    return result;
    }
    
    // For Reading CSV File
    readCSV(event) {
    const reader = new FileReader();
    reader.readAsText(event.files[0]);
    reader.onload = () => {
        const text = reader.result;
        const csvToJson = this.csvJSON(text);
        console.log(csvToJson);
    };
    }
    

    谢谢

    【讨论】:

      【解决方案5】:

      这是我对您的具体示例的尝试。我知道这是一个老问题,但我使用了当前的方法

      const titlesCsv = `id;name;author
      integer;string;authors:n
      1;To Kill an Mockingbird;1
      2;Lord of the Rings;2
      3;Hamlet;3`
      
      const authorsCsv = `id;name
      integer;string
      1;Harper Lee
      2;JRR Tolkien
      3;William Shakespeare`
      
      const parseCsv = csv => {
        let lines = csv.split("\n");
        const header = lines.shift().split(";")
        lines.shift(); // get rid of definitions
        return lines.map(line => {
          const bits = line.split(";")
          let obj = {};
          header.forEach((h, i) => obj[h] = bits[i]); // or use reduce here
          return obj;
        })
      };
      const titles = parseCsv(titlesCsv)
      const authors = parseCsv(authorsCsv)
      const books = titles.map(title => {
        return {
          id: title.id,
          name: title.name,
          author: authors.find(author => author.id === title.author).name
        }
      })
      
      console.log(books)

      【讨论】:

        【解决方案6】:

        我有类似@DelightedD0D 的答案,但我的代码可以直接与 Excel 结合使用(从 Excel 复制并粘贴到文本区域)。

        function csvUpload(csvText){
                //Split all the text into seperate lines on new lines and carriage return feeds
                var allTextLines = csvText.split(/\r\n|\n/);
                //Split per line on tabs and commas
                var headers = allTextLines[0].split(/\t|,/);
                var lines = [];
                var locations = [];
        
                for (var i=1; i<allTextLines.length; i++) {
                    var data = allTextLines[i].split(/\t|,/);
        
                    if (data.length == headers.length) {
        
                    var location = {"device_id":data[0], "address":data[1], "city":data[2]};
                    locations.push(location);
        
                    }
        
                }
                return locations;
            }
        

        这样您就可以使用复制到 Excel 中的 CSV。 Excel 将删除 , 等分隔符,并插入换行符等。

        使用我的代码,您可以将所有内容直接从 Excel 传递到文本字段,然后使用它来创建 json。

        我在这里命名了静态字段,但您可以使用@DelightedD0D 的代码动态设置标题:

         for(var j=0;j<headers.length;j++){
                  obj[headers[j]] = currentline[j];
              }
        

        【讨论】:

          猜你喜欢
          • 2020-08-25
          • 2020-11-11
          • 2019-03-09
          • 1970-01-01
          • 2015-03-26
          • 1970-01-01
          • 1970-01-01
          • 2021-07-24
          • 1970-01-01
          相关资源
          最近更新 更多