Как преобразовать JSON в формат CSV и сохранить в переменной

106

У меня есть ссылка, открывающая данные JSON в браузере, но, к сожалению, я не знаю, как их читать. Есть ли способ преобразовать эти данные с помощью JavaScript в формат CSV и сохранить их в файле JavaScript?

Данные выглядят так:

{
  "count": 2,
  "items": [{
    "title": "Apple iPhone 4S Sale Cancelled in Beijing Amid Chaos (Design You Trust)",
    "description": "Advertise here with BSA Apple cancelled its scheduled sale of iPhone 4S in one of its stores in China\u2019s capital Beijing on January 13. Crowds outside the store in the Sanlitun district were waiting on queues overnight. There were incidents of scuffle between shoppers and the store\u2019s security staff when shoppers, hundreds of them, were told that the sales [...]Source : Design You TrustExplore : iPhone, iPhone 4, Phone",
    "link": "http:\/\/wik.io\/info\/US\/309201303",
    "timestamp": 1326439500,
    "image": null,
    "embed": null,
    "language": null,
    "user": null,
    "user_image": null,
    "user_link": null,
    "user_id": null,
    "geo": null,
    "source": "wikio",
    "favicon": "http:\/\/wikio.com\/favicon.ico",
    "type": "blogs",
    "domain": "wik.io",
    "id": "2388575404943858468"
  }, {
    "title": "Apple to halt sales of iPhone 4S in China (Fame Dubai Blog)",
    "description": "SHANGHAI \u2013 Apple Inc said on Friday it will stop selling its latest iPhone in its retail stores in Beijing and Shanghai to ensure the safety of its customers and employees. Go to SourceSource : Fame Dubai BlogExplore : iPhone, iPhone 4, Phone",
    "link": "http:\/\/wik.io\/info\/US\/309198933",
    "timestamp": 1326439320,
    "image": null,
    "embed": null,
    "language": null,
    "user": null,
    "user_image": null,
    "user_link": null,
    "user_id": null,
    "geo": null,
    "source": "wikio",
    "favicon": "http:\/\/wikio.com\/favicon.ico",
    "type": "blogs",
    "domain": "wik.io",
    "id": "16209851193593872066"
  }]
}

Ближайшее, что я смог найти, было: Преобразование формата JSON в формат CSV для MS Excel.

Но он загружается в файл CSV, я сохраняю его в переменной, все преобразованные данные.

Также хотел бы знать, как изменить escape-символы: '\u2019'обратно в нормальное состояние.

Я пробовал этот код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>JSON to CSV</title>
  <script src="http://code.jquery.com/jquery-1.7.1.js" type="text/javascript"></script>
  <script type="text/javascript">
    var json3 = {
      "count": 2,
      "items": [{
          "title": "Apple iPhone 4S Sale Cancelled in Beijing Amid Chaos (Design You Trust)",
          "description": "Advertise here with BSA Apple cancelled its scheduled sale of iPhone 4S in one of its stores in China’s capital Beijing on January 13. Crowds outside the store in the Sanlitun district were waiting on queues overnight. There were incidents of scuffle between shoppers and the store’s security staff when shoppers, hundreds of them, were told that the sales [...]Source : Design You TrustExplore : iPhone, iPhone 4, Phone",
          "link": "http://wik.io/info/US/309201303",
          "timestamp": 1326439500,
          "image": null,
          "embed": null,
          "language": null,
          "user": null,
          "user_image": null,
          "user_link": null,
          "user_id": null,
          "geo": null,
          "source": "wikio",
          "favicon": "http://wikio.com/favicon.ico",
          "type": "blogs",
          "domain": "wik.io",
          "id": "2388575404943858468"
        },
        {
          "title": "Apple to halt sales of iPhone 4S in China (Fame Dubai Blog)",
          "description": "SHANGHAI – Apple Inc said on Friday it will stop selling its latest iPhone in its retail stores in Beijing and Shanghai to ensure the safety of its customers and employees. Go to SourceSource : Fame Dubai BlogExplore : iPhone, iPhone 4, Phone",
          "link": "http://wik.io/info/US/309198933",
          "timestamp": 1326439320,
          "image": null,
          "embed": null,
          "language": null,
          "user": null,
          "user_image": null,
          "user_link": null,
          "user_id": null,
          "geo": null,
          "source": "wikio",
          "favicon": "http://wikio.com/favicon.ico",
          "type": "blogs",
          "domain": "wik.io",
          "id": "16209851193593872066"
        }
      ]
    }
    //var objJson = JSON.parse(json3.items);

    DownloadJSON2CSV(json3.items);

    function DownloadJSON2CSV(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]) {
          line += array[i][index] + ',';
        }

        line.slice(0, line.Length - 1);

        str += line + '\r\n';
      }
      $('div').html(str);
    }
  </script>

</head>

<body>
  <div></div>
</body>

</html>

Но похоже, что это не работает. Может кто-нибудь помочь?

javascript json csv Praneybehl
источник
А как насчет zachhunter.com/2011/06/json-to-csv ?
ldiqual
у вас там хороший код. строка, которая загружается - window.open ("data: text / csv; charset = utf-8," + escape (str)) .. просто пропустите ее, если она вам не нужна. и строка csv хранится в этой переменной: str
zdrsh
CSV не может обрабатывать несколько уровней данных (а также), как JSON. Как вы ожидаете, что ваш JSON будет выглядеть как CSV? 2,Apple iPhone 4S Sale Cancelled in Beijing Amid Chaos (Design You Trust), ...?
Стефан
Я хотел бы, чтобы мои данные выглядели так: Продажа Apple iPhone 4S отменена в Пекине на фоне хаоса (дизайн, который вы доверяете), Рекламируйте здесь с BSA Apple отменила запланированную продажу iPhone 4S в одном из своих магазинов ... ,,,,, и т. Д. Я легко могу удалить эти начальные символы: "{" count ": 2," items ": [:"
praneybehl
@zdrsh да, но по какой-то причине я не могу заставить его работать.
praneybehl

Ответы:

159

Более элегантный способ конвертировать json в csv - использовать функцию карты без какой-либо структуры:

var json = json3.items
var fields = Object.keys(json[0])
var replacer = function(key, value) { return value === null ? '' : value } 
var csv = json.map(function(row){
  return fields.map(function(fieldName){
    return JSON.stringify(row[fieldName], replacer)
  }).join(',')
})
csv.unshift(fields.join(',')) // add header column
 csv = csv.join('\r\n');
console.log(csv)

Выход:

title,description,link,timestamp,image,embed,language,user,user_image,user_link,user_id,geo,source,favicon,type,domain,id
"Apple iPhone 4S Sale Cancelled in Beijing Amid Chaos (Design You Trust)","Advertise here with BSA Apple cancelled its scheduled sale of iPhone 4S in one of its stores in China’s capital Beijing on January 13. Crowds outside the store in the Sanlitun district were waiting on queues overnight. There were incidents of scuffle between shoppers and the store’s security staff when shoppers, hundreds of them, were told that the sales [...]Source : Design You TrustExplore : iPhone, iPhone 4, Phone","http://wik.io/info/US/309201303","1326439500","","","","","","","","","wikio","http://wikio.com/favicon.ico","blogs","wik.io","2388575404943858468"
"Apple to halt sales of iPhone 4S in China (Fame Dubai Blog)","SHANGHAI – Apple Inc said on Friday it will stop selling its latest iPhone in its retail stores in Beijing and Shanghai to ensure the safety of its customers and employees. Go to SourceSource : Fame Dubai BlogExplore : iPhone, iPhone 4, Phone","http://wik.io/info/US/309198933","1326439320","","","","","","","","","wikio","http://wikio.com/favicon.ico","blogs","wik.io","16209851193593872066"

Обновление ES6 (2016)

Используйте этот менее плотный синтаксис, а также JSON.stringify, чтобы добавлять кавычки к строкам, сохраняя при этом числа без кавычек:

const items = json3.items
const replacer = (key, value) => value === null ? '' : value // specify how you want to handle null values here
const header = Object.keys(items[0])
let csv = items.map(row => header.map(fieldName => JSON.stringify(row[fieldName], replacer)).join(','))
csv.unshift(header.join(','))
csv = csv.join('\r\n')

console.log(csv)
Кристиан Ландгрен
источник
3
Мне нравится лаконичность этого текста, но следует отметить, что он не обрабатывает некоторые вещи, которые некоторые могут найти идеальными. например, каждая запись в отдельной строке, числа и логические значения оставлены без кавычек и т. д.
scunliffe
2
Вы можете добавить + "\ r \ n" после fields.map (), чтобы получить по одной записи в строке. Чтобы получить числа без кавычек, вы можете использовать JSON.stringify (row [fieldName]) вместо этого, который будет заключать в кавычки только строки и оставлять числа без кавычек.
Кристиан Ландгрен,
1
@scunliffe: я обновил новый пример с помощью JSON.stringify - он должен обрабатывать описанные вами случаи.
Christian Landgren
1
@marathon, Хороший улов, обновил пример заменителем для обработки нулевых случаев отдельно. Если заменитель не используется, null будет выведен как null- теперь примеры должны правильно обрабатывать как null, так и undefined, и числа.
Кристиан Ландгрен,
5
Стоит отметить, что это \"позволяет ""избежать строк в кавычках, что позволяет некоторым полям «выскакивать» из своего столбца при просмотре в Excel (который, кажется, предпочитается в качестве escape-символа для кавычек). Это можно решить, добавив .replace(/\\"/g, '""')в конец, JSON.stringify(row[fieldName], replacer)как я отметил в своем ответе выше.
user1274820 03
54

Хорошо, я наконец получил этот код:

<html>
<head>
    <title>Demo - Covnert JSON to CSV</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="https://github.com/douglascrockford/JSON-js/raw/master/json2.js"></script>

    <script type="text/javascript">
        // 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;
        }

        // Example
        $(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));
        });
    </script>
</head>
<body>
    <h1>
        JSON</h1>
    <pre id="json"></pre>
    <h1>
        CSV</h1>
    <pre id="csv"></pre>
</body>
</html>

Большое спасибо за поддержку всем участникам.

Praney

Praneybehl
источник
1
Я пробовал это. У меня три столбца, но в Excel все будет происходить в одном столбце
Нитеш Нараянан
1
Nithesh, вы должны указать ',' в качестве разделителя
Jacer Omri
Спасибо, что поделились этим здесь. Просто использовал его, и он отлично работает.
Ramin Arabbagheri 03
Спасибо за это! Я добавил следующее, чтобы избежать наличия в строке «[object Object]», если ячейка содержит объект. if (_.isObject (array [i] [index])) {array [i] [index] = JSON.stringify (array [i] [index]); }. (использование подчеркивания, но вы могли бы изменить к ванили)
claytronicon
1
@Sunil Я обнаружил, что если значения содержат запятые, он ломается. Для своих нужд я просто сделал это: var re = new RegExp (',', 'g'); массив [I] [индекс] = массив [I] [индекс] .ToString () заменить (ре, ';').
claytronicon
18

Очень хорошее решение от praneybehl, но если кто-то хочет сохранить данные в виде csvфайла и использовать blobметод, они могут сослаться на это:

function JSONToCSVConvertor(JSONData, ReportTitle, ShowLabel) {     

//If JSONData is not an object then JSON.parse will parse the JSON string in an Object
var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;
var CSV = '';    
//This condition will generate the Label/Header
if (ShowLabel) {
    var row = "";

    //This loop will extract the label from 1st index of on array
    for (var index in arrData[0]) {
        //Now convert each value to string and comma-seprated
        row += index + ',';
    }
    row = row.slice(0, -1);
    //append Label row with line break
    CSV += row + '\r\n';
}

//1st loop is to extract each row
for (var i = 0; i < arrData.length; i++) {
    var row = "";
    //2nd loop will extract each column and convert it in string comma-seprated
    for (var index in arrData[i]) {
        row += '"' + arrData[i][index] + '",';
    }
    row.slice(0, row.length - 1);
    //add a line break after each row
    CSV += row + '\r\n';
}

if (CSV == '') {        
    alert("Invalid data");
    return;
}   

//this trick will generate a temp "a" tag
var link = document.createElement("a");    
link.id="lnkDwnldLnk";

//this part will append the anchor tag and remove it after automatic click
document.body.appendChild(link);

var csv = CSV;  
blob = new Blob([csv], { type: 'text/csv' }); 
var csvUrl = window.webkitURL.createObjectURL(blob);
var filename = 'UserExport.csv';
$("#lnkDwnldLnk")
.attr({
    'download': filename,
    'href': csvUrl
}); 

$('#lnkDwnldLnk')[0].click();    
document.body.removeChild(link);
}
Сэмюэл Джой
источник
Это решение работает, но имеет некоторые странные места - вы определяете var rowдважды (операторы if и циклы for не создают замыканий). Также цикл метки / заголовка, вероятно, можно было бы сократить до одной строки:Object.keys(arrData[0]).join(',')
ccnokes
Ваш ответ работает. Но в случаях, например, если какой-то столбец недоступен для какой-либо строки, он не будет учитывать отсутствующий столбец и не будет повторно выравнивать данные столбца для данных этой строки.
смс
Мне удалось заставить этот метод работать, но мне пришлось отредактировать часть кода, чтобы: 1. работать без JQuery: document.getElementById("lnkDwnldLnk").download = filename; document.getElementById("lnkDwnldLnk").href = csvUrl;2. работать в IE11: if (window.navigator && window.navigator.msSaveOrOpenBlob) { window.navigator.msSaveOrOpenBlob(blob, filename); } else { document.getElementById('lnkDwnldLnk').click(); }
Джейсон
17

Я просто хотел добавить сюда код для людей в будущем, так как я пытался экспортировать JSON в документ CSV и загрузить его.

Я использую $.getJSONдля извлечения данных json с внешней страницы, но если у вас есть базовый массив, вы можете просто использовать его.

При этом используется код Кристиана Ландгрена для создания данных CSV.

$(document).ready(function() {
    var JSONData = $.getJSON("GetJsonData.php", function(data) {
        var items = data;
        const replacer = (key, value) => value === null ? '' : value; // specify how you want to handle null values here
        const header = Object.keys(items[0]);
        let csv = items.map(row => header.map(fieldName => JSON.stringify(row[fieldName], replacer)).join(','));
        csv.unshift(header.join(','));
        csv = csv.join('\r\n');

        //Download the file as CSV
        var downloadLink = document.createElement("a");
        var blob = new Blob(["\ufeff", csv]);
        var url = URL.createObjectURL(blob);
        downloadLink.href = url;
        downloadLink.download = "DataDump.csv";  //Name the file here
        document.body.appendChild(downloadLink);
        downloadLink.click();
        document.body.removeChild(downloadLink);
    });
});

Изменить: стоит отметить, что JSON.stringifyкавычки будут добавлены в кавычки \". Если вы просматриваете CSV в excel, ему не нравится этот escape-символ.

Вы можете добавить .replace(/\\"/g, '""')до конца , JSON.stringify(row[fieldName], replacer)чтобы отобразить это правильно в Excel (это заменит \"с ""которой является то , что предпочитает первенствует).

Полная линия: let csv = items.map(row => header.map(fieldName => (JSON.stringify(row[fieldName], replacer).replace(/\\"/g, '""'))).join(','));

user1274820
источник
12

Если бы кто-нибудь тоже захотел его скачать.
Вот замечательная маленькая функция, которая преобразует массив объектов JSON в csv, а затем загрузит его.

downloadCSVFromJson = (filename, arrayOfJson) => {
  // convert JSON to CSV
  const replacer = (key, value) => value === null ? '' : value // specify how you want to handle null values here
  const header = Object.keys(arrayOfJson[0])
  let csv = arrayOfJson.map(row => header.map(fieldName => 
  JSON.stringify(row[fieldName], replacer)).join(','))
  csv.unshift(header.join(','))
  csv = csv.join('\r\n')

  // Create link and download
  var link = document.createElement('a');
  link.setAttribute('href', 'data:text/csv;charset=utf-8,%EF%BB%BF' + encodeURIComponent(csv));
  link.setAttribute('download', filename);
  link.style.visibility = 'hidden';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
};

Тогда назовите это так: 

this.downloadCSVFromJson(`myCustomName.csv`, this.state.csvArrayOfJson)
waz
источник
похоже, это не работает для вещей, когда в одном из элементов есть одиночная кавычка, напримерCap D'antibes
MidnightDataGeek
10

Существует несколько вариантов повторного использования существующих мощных библиотек, основанных на стандартах.

Если вы используете D3 в своем проекте, вы можете просто вызвать:

    d3.csv.formatили d3.csv.formatRowsфункции для преобразования массива объектов в строку csv.

    d3.csv.formatRows дает вам больший контроль над тем, какие свойства преобразуются в CSV.

    Пожалуйста, обратитесь к вики-страницам d3.csv.format и d3.csv.formatRows .

Доступны и другие библиотеки, такие как jquery-csv , PapaParse . Papa Parse не имеет зависимостей - даже jQuery.

Для плагинов на основе jquery проверьте это .

нагу
источник
1
Это отлично сработало для меня. Обратите внимание, что API D3 изменился с 2017 г. v3 (в настоящее время v4): github.com/d3/d3-dsv/blob/v1.2.0/README.md#csvFormat
aljabear
Благодарность! Я использовал PapaParse Papa.unparse (данные) ( papaparse.com/docs#json-to-csv ). Быстрое решение моих проблем!
Даниэль Валенсуэла
8

Попробуйте эти примеры

Пример 1:

JsonArray = [{
    "AccountNumber": "123",
    "AccountName": "abc",
    "port": "All",
    "source": "sg-a78c04f8"

}, {
    "Account Number": "123",
    "Account Name": "abc",
    "port": 22,
    "source": "0.0.0.0/0",
}]

JsonFields = ["Account Number","Account Name","port","source"]

function JsonToCSV(){
    var csvStr = JsonFields.join(",") + "\n";

    JsonArray.forEach(element => {
        AccountNumber = element.AccountNumber;
        AccountName   = element.AccountName;
        port          = element.port
        source        = element.source

        csvStr += AccountNumber + ',' + AccountName + ','  + port + ',' + source + "\n";
        })
        return csvStr;
}

Пример 2:

JsonArray = [{
    "AccountNumber": "1234",
    "AccountName": "abc",
    "inbound": [{
        "port": "All",
        "source": "sg-a78c04f8"
    },
    {
        "port": 22,
        "source": "0.0.0.0/0",
    }]
}]

JsonFields = ["Account Number", "Account Name", "port", "source"]

function JsonToCSV() {
    var csvStr = JsonFields.join(",") + "\n";

    JsonArray.forEach(element => {
        AccountNumber = element.AccountNumber;
        AccountName = element.AccountName;
        
        element.inbound.forEach(inboundELe => {
            port = inboundELe.port
            source = inboundELe.source
            csvStr += AccountNumber + ',' + AccountName + ',' + port + ',' + source + "\n";
        })
    })
    return csvStr;
}

Вы даже можете загрузить файл csv, используя следующий код:

function downloadCSV(csvStr) {

    var hiddenElement = document.createElement('a');
    hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csvStr);
    hiddenElement.target = '_blank';
    hiddenElement.download = 'output.csv';
    hiddenElement.click();
}
YouBee
источник
4 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>JSON to CSV</title>
    <script src="http://code.jquery.com/jquery-1.7.1.js" type="text/javascript"></script>
</head>
<body>
    <h1>This page does nothing....</h1>

    <script type="text/javascript">
        var json3 = {
          "count": 2,
          "items": [{
              "title": "Apple iPhone 4S Sale Cancelled in Beijing Amid Chaos (Design You Trust)",
              "description": "Advertise here with BSA Apple cancelled its scheduled sale of iPhone 4S in one of its stores in China’s capital Beijing on January 13. Crowds outside the store in the Sanlitun district were waiting on queues overnight. There were incidents of scuffle between shoppers and the store’s security staff when shoppers, hundreds of them, were told that the sales [...]Source : Design You TrustExplore : iPhone, iPhone 4, Phone",
              "link": "http://wik.io/info/US/309201303",
              "timestamp": 1326439500,
              "image": null,
              "embed": null,
              "language": null,
              "user": null,
              "user_image": null,
              "user_link": null,
              "user_id": null,
              "geo": null,
              "source": "wikio",
              "favicon": "http://wikio.com/favicon.ico",
              "type": "blogs",
              "domain": "wik.io",
              "id": "2388575404943858468"
            },
            {
              "title": "Apple to halt sales of iPhone 4S in China (Fame Dubai Blog)",
              "description": "SHANGHAI – Apple Inc said on Friday it will stop selling its latest iPhone in its retail stores in Beijing and Shanghai to ensure the safety of its customers and employees. Go to SourceSource : Fame Dubai BlogExplore : iPhone, iPhone 4, Phone",
              "link": "http://wik.io/info/US/309198933",
              "timestamp": 1326439320,
              "image": null,
              "embed": null,
              "language": null,
              "user": null,
              "user_image": null,
              "user_link": null,
              "user_id": null,
              "geo": null,
              "source": "wikio",
              "favicon": "http://wikio.com/favicon.ico",
              "type": "blogs",
              "domain": "wik.io",
              "id": "16209851193593872066"
            }
          ]
        };

        const items = json3.items
        const replacer = (key, value) => value === null ? '' : value // specify how you want to handle null values here
        const header = Object.keys(items[0])
        let csv = items.map(row => header.map(fieldName => JSON.stringify(row[fieldName], replacer)).join(','))
        csv.unshift(header.join(','))
        csv = csv.join('\r\n')

        var link = document.createElement("a");    
        link.id="lnkDwnldLnk";
        document.body.appendChild(link);
        blob = new Blob([csv], { type: 'text/csv' }); 
        var csvUrl = window.webkitURL.createObjectURL(blob);
        var filename = 'UserExport.csv';
        jQuery("#lnkDwnldLnk")
        .attr({
            'download': filename,
            'href': csvUrl
        });
        jQuery('#lnkDwnldLnk')[0].click();
        document.body.removeChild(link);
    </script>
</body>
</html>
agravat.in
источник
2

Адаптация от praneybehl answer для работы с вложенными объектами и разделителем табуляции

function ConvertToCSV(objArray) {
  let array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
  if(!Array.isArray(array))
      array = [array];

  let str = '';

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

      const item = array[i][index];
      line += (typeof item === 'object' && item !== null ? ConvertToCSV(item) : item);
    }
    str += line + '\r\n';
  }

  do{
      str = str.replace(',','\t').replace('\t\t', '\t');
  }while(str.includes(',') || str.includes('\t\t'));

  return str.replace(/(\r\n|\n|\r)/gm, ""); //removing line breaks: https://stackoverflow.com/a/10805198/4508758
}
DigaoParceiro
источник
1
Это идеально подходит для копирования и вставки прямо в Excel / Таблицы! Благодарность!
UP3,
1

Вот способ сделать это для динамически глубоких объектов объектно-ориентированным способом для новых версий js. вам может потребоваться изменить seperatortype после региона.

private ConvertToCSV(objArray) {
    let rows = typeof objArray !== "object" ? JSON.parse(objArray) : objArray;
    let  header = "";
    Object.keys(rows[0]).map(pr => (header += pr + ";"));

    let str = "";
    rows.forEach(row => {
        let line = "";
        let columns =
            typeof row !== "object" ? JSON.parse(row) : Object.values(row);
        columns.forEach(column => {
            if (line !== "") {
                line += ";";
            }
            if (typeof column === "object") {
                line += JSON.stringify(column);
            }  else {
                line += column;
            }
        });
        str += line + "\r\n";
    });
    return header + "\r\n" + str;
}
Никола Мунц slimxshady
источник
1

Иногда предметы имеют разную длину. Так что я столкнулся с той же проблемой, что и Кайл Пеннелл. Но вместо сортировки массива мы просто обходим его и выбираем самый длинный. Сложность времени снижается до O (n) по сравнению с O (n log (n)) при первой сортировке.

Я начал с кода из обновленной версии ES6 (2016) Кристиана Ландгрена .

json2csv(json) {
    // you can skip this step if your input is a proper array anyways:
    const simpleArray = JSON.parse(json)
    // in array look for the object with most keys to use as header
    const header = simpleArray.map((x) => Object.keys(x))
      .reduce((acc, cur) => (acc.length > cur.length ? acc : cur), []);

    // specify how you want to handle null values here
    const replacer = (key, value) => (
      value === undefined || value === null ? '' : value);
    let csv = simpleArray.map((row) => header.map(
      (fieldName) => JSON.stringify(row[fieldName], replacer)).join(','));
    csv = [header.join(','), ...csv];
    return csv.join('\r\n');
}
ctholho
источник
1

Я хотел отбросить ответ @Christian Landgren выше. Я был сбит с толку, почему в моем CSV-файле было только 3 столбца / заголовка. Это произошло потому, что первый элемент в моем json имел всего 3 ключа. Так что с const header = Object.keys(json[0])линией нужно быть осторожнее . Предполагается, что первый элемент массива является репрезентативным. У меня был беспорядочный JSON с некоторыми объектами, имеющими более или менее.

Итак, я добавил array.sortк этому, который упорядочит JSON по количеству ключей. Таким образом, ваш CSV-файл будет иметь максимальное количество столбцов.

Это также функция, которую вы можете использовать в своем коде. Просто накормите его JSON!

function convertJSONtocsv(json) {
    if (json.length === 0) {
        return;
    }

    json.sort(function(a,b){ 
       return Object.keys(b).length - Object.keys(a).length;
    });

    const replacer = (key, value) => value === null ? '' : value // specify how you want to handle null values here
    const header = Object.keys(json[0])
    let csv = json.map(row => header.map(fieldName => JSON.stringify(row[fieldName], replacer)).join(','))
    csv.unshift(header.join(','))
    csv = csv.join('\r\n')

    fs.writeFileSync('awesome.csv', csv)
}
Кайл Пеннелл
источник
1

Вот моя простая версия преобразования массива объектов в CSV (при условии, что все эти объекты имеют одинаковые атрибуты):

var csv = []
if (items.length) {
  var keys = Object.keys(items[0])
  csv.push(keys.join(','))
  items.forEach(item => {
    let vals = keys.map(key => item[key] || '')
    csv.push(vals.join(','))
  })
}

csv = csv.join('\n')
Нимрод
источник
0

Напишите CSV.

function writeToCsv(dataToWrite, callback) {
    var dataToWrite;
    var fs = require('fs');
    dataToWrite = convertToCSV(dataToWrite);
    fs.writeFile('assets/distanceInfo.csv', dataToWrite, 'utf8', function (err) {
      if (err) {
        console.log('Some error occured - file either not saved or corrupted file saved.');
      } else{
        console.log('It\'s saved!');
      }
      callback("data_saved | assets/distanceInfo.csv")
    });
}

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;
}
Ашиш Гупта
источник
2
Я не думаю, что это имеет большую ценность. Пожалуйста, отредактируйте, чтобы добавить некоторые объяснения того, как это помогает ответить на вопрос.
fedorqui 'SO, перестаньте причинять вред'
0

Забавно, что здесь ничего полного и не работает (IE или node.js). Ответ на аналогичный вопрос, немного структурированный JSON (предположим, что не нужно его снова копировать), также включен демонстрационный фрагмент. Преобразование JSON в CSV (JavaScript): Как правильно форматировать преобразование CSV Надеюсь, что не только преобразователь одного типа, но и в моем Github (упомянутом в профиле) аналогичен используемому для анализа неизвестной структуры JSON. Я являюсь автором кода в этом ответе и всего кода на моем Github (за исключением некоторых проектов, запущенных как fork / + перевод).

Том
источник
0

Лично я бы использовал для этого библиотеку d3-dsv . Зачем reinvent the wheel?


import { csvFormat } from 'd3-dsv';
/**
 * Based on input data convert it to csv formatted string
 * @param (Array) columnsToBeIncluded array of column names (strings)
 *                which needs to be included in the formated csv
 * @param {Array} input array of object which need to be transformed to string
 */
export function convertDataToCSVFormatString(input, columnsToBeIncluded = []) {
  if (columnsToBeIncluded.length === 0) {
    return csvFormat(input);
  }
  return csvFormat(input, columnsToBeIncluded);
}

С помощью встряхивания дерева вы можете просто импортировать эту конкретную функцию из d3-dsvбиблиотеки.

Анудж
источник