繁体   English   中英

将JSON object转换为JavaScript中的CSV格式

[英]Converting JSON object to CSV format in JavaScript

我正在尝试将 JavaScript object 设置为 CSV 格式

你可以得到关于我的想法 Javascript object,如果你把它放在在线 JSON 解析器https://jsonformatter.org/json-parser

这就是我试图解决的方法......但它失败了...... http://jsfiddle.net/fHQzC/11/

我正在尝试将与值“term”和相应标题对应的整个值转换为 CSV 格式

预期的 output 就像

Time,Dec 9, 2012 
News,Germany,election, Egypt,Revolution, Japan, Earthquake
Person,Obama, Beckham
Title,Pearce Snubs Beckham                                
Time,Dec 5, Birthday
Person, Lebron James
News,Italy,Euro 2012 Final
Title-Heats National Champions
                              

是否可以在 excel 表中下载 csv 文件,我在 Stackoverflow 中找到的文件对我来说并不是很有用......

你可以试试

$(document).ready(function () {

        // Create Object
        var items = [
              { name: "Item 1", color: "Green", size: "X-Large" },
              { name: "Item 2", color: "Green", size: "X-Large" },
              { name: "Item 3", color: "Green", size: "X-Large" }];

        // Convert Object to JSON
        var jsonObject = JSON.stringify(items);

        // Display JSON
        $('#json').text(jsonObject);

        // Convert JSON to CSV & Display CSV
        $('#csv').text(ConvertToCSV(jsonObject));
    });

和一个函数 ConvertToCSV

// JSON to CSV Converter
        function ConvertToCSV(objArray) {
            var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
            var str = '';

            for (var i = 0; i < array.length; i++) {
                var line = '';
                for (var index in array[i]) {
                    if (line != '') line += ','

                    line += array[i][index];
                }

                str += line + '\r\n';
            }

            return str;
        }

来源

这是我的解决方案

function arrayToCSV(objArray) {
     const array = typeof objArray !== 'object' ? JSON.parse(objArray) : objArray;
     let str = `${Object.keys(array[0]).map(value => `"${value}"`).join(",")}` + '\r\n';

     return array.reduce((str, next) => {
         str += `${Object.values(next).map(value => `"${value}"`).join(",")}` + '\r\n';
         return str;
        }, str);
 }

例子:

let arr = [{name: "Essa", age: 25}];
console.log(arrayToCSV(arr));

可能更优雅和最简单的解决方案

 function convertToCSV(arr) { const array = [Object.keys(arr[0])].concat(arr) return array.map(it => { return Object.values(it).toString() }).join('\\n') } console.log( convertToCSV( [ { id: 1, name: 'Foo', timestamp: new Date() }, { id: 2, name: 'Bar', timestamp: new Date() }, { id: 3, name: 'Baz', timestamp: new Date() } ] ) )

这是一个类似于mightybruno's answer的解决方案,它处理包含逗号的字符串。 其他答案似乎都没有考虑到这一点。

function objectsToCSV(arr) {
    const array = [Object.keys(arr[0])].concat(arr)
    return array.map(row => {
        return Object.values(row).map(value => {
            return typeof value === 'string' ? JSON.stringify(value) : value
        }).toString()
    }).join('\n')
}

这是一个快速而肮脏的方法,但可能适用于大多数情况:

const headers = Object.keys(objAry[0])
console.log(headers.join())

objAry.forEach(r => console.log(
   Object.values(r)
   .map(c => Array.isArray(c)? `"${c.join()}"` : c)
   .join())
)

下面的代码会将 JSON 数组作为文件转换并下载到 csv。

 function exportJSONToCSV(objArray) {
    var arr = typeof objArray !== 'object' ? JSON.parse(objArray) : objArray;
    var str =
      `${Object.keys(arr[0])
        .map((value) => `"${value}"`)
        .join(',')}` + '\r\n';
    var csvContent = arr.reduce((st, next) => {
      st +=
        `${Object.values(next)
          .map((value) => `"${value}"`)
          .join(',')}` + '\r\n';
      return st;
    }, str);
    var element = document.createElement('a');
    element.href = 'data:text/csv;charset=utf-8,' + encodeURI(csvContent);
    element.target = '_blank';
    element.download = 'export.csv';
    element.click();
  }

这是我的解决方案

https://jsfiddle.net/dhou6y3o/

function iterateObject(obj) {
  var value = '', header = '';
          for (name in obj) {
            if (obj.hasOwnProperty(name)) {
              if (isObject(obj[name])) {
                var out = iterateObject(obj[name]);
                value += out.value;
                header += out.header;
              } else {
                value += removeNewLine(obj[name]) + '; ';
                header += name + '; ';
              }
            }
          }
  return {
    "value":value,
    "header":header
  };
}
function isObject(obj) {
  return (typeof obj === 'object');
}
function removeNewLine(item) {
  return item.toString().replace(/(\r\n|\n|\r)/gm,"");
}

使用 papaparse 库将 JSON 转换为 CSV,反之亦然。 请参阅此链接 - https://www.papaparse.com/

类似于mightybruno 的回答,但如果需要,这将允许单独访问标题和内容(通过将join语句移到函数的后面)。

function objToCsv(data) {
    const headers = Object.keys(data[0]).join();
    const content = data.map(r => Object.values(r).join());
    return [headers].concat(content).join("\n");
}
    function objToCsv(arr) {
        let claves = Object.keys(arr[0]).sort();
        let rows = claves.join(";") + "\r\n";
        arr.forEach((row) => {
          let nrow = [];
          claves.forEach((clave) => {
            let valor = JSON.stringify(row[clave]);
            nrow.push(valor.split(";").join(" ").split(",").join(" "));
          });
          rows = rows + nrow.join(";") + "\r\n";
        });
        return rows;
    }

所有的答案都对我不起作用,因为我有一个错误的 object 内容不可预测,所以我必须实现自己的解决方案,在转换为 CSV 之前创建一个“标准化”数组:

function objToCSV(originalArray) {
    header = [];
    result = [];
    finalCSV = "";

    originalArray.forEach(
        a => { /// Parse all rows of input ///
            row = []; // Create for each row of the input an enpty row for the output
            for (const [key, value] of Object.entries(a)) {
                /// Parse all elements of input row ///
console.log(`${key}: ${value}`);
                if (header.indexOf(`${key}`) < 0) {
                    // Add field to header if not already present
                    header.push(`${key}`);
                }
                // Put value in the right position in the array depending on field name:
                row[header.indexOf(`${key}`)]=`${value}`;
            };
            result.push(row); // Add finished line to output array
console.log("--- row separator ---");
        }
    )

    // Prepare header of CSV file:
    header.forEach(fieldName => {
        finalCSV += fieldName + "\t";
    }
    );
    finalCSV += "\n";

    // Add all rows to CSV file:
    result.forEach(row => {
        /// parse all rows of created array //
        row.forEach(col => {
            /// parse all elements of row ///
            finalCSV += col + "\t"; // Add element to output CSV row
        }
        );
        finalCSV += "\n";
    }
    );

    return finalCSV;
}

精心制作,在 LibreOfice 中运行良好。

它确实检索键名来构建列 header。

 let example = [,,,,, { "Time": 1647672300000, "Open": 2937.37, "High": 2933.81, "Low": 2937.94, "Close": 2937.39, "Volume": 1547.5156 },,,,, ] const getCSV = (object) => { let csv = Object.entries(Object.entries(object)[0][1]).map((e) => e[0]).join(","); for (const [k,v] of Object.entries(object)) { csv += "\r\n" + Object.values(v).join(",") // \n is enough in linux to reduce the csv size } /* //Uncomment for file download let j = document.createElement("a") j.download = "example_"+Date.now()+".csv" j.href = URL.createObjectURL(new Blob([csv])) j.click() */ return csv; } console.log( getCSV(example) )

在此处输入图像描述

下面演示如何在 JavaScript 中快速将 JSON 转换为 CSV。

  function convertJsonToCsv(items) {
    const hdr = Object.keys(items[0]);
  
    const hadrString = hdr.join(",");
  
    // nned to handle null or undefined values here..
    const replacer = (key, val) => val ?? '';
  
    const rowItems = items.map((row) =>
      hdr.map((fieldNameVal) => JSON.stringify(row[fieldNameVal], replacer))
        .join(",")
    );
  
    // join hdr and body, and break into separate lines ..
    const csvFile = [hadrString, ...rowItems].join('\r\n');
  
    return csvFile;
  }
  
  const obj = [
    { color: 'gray', maxSpeed: 230, age: 10 },
    { color: 'blue', maxSpeed: 210, age: 8 },
    { color: 'green', maxSpeed: 220, age: 7 },
  ];
  
  const csvFile = convertJsonToCsv(obj);
  
  console.log(csvFile);

CSV output 会出现如下:

color,maxSpeed,age
"gray",230,10
"blue",210,8
"green",220,7

资源

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM