js-csv-to-json CSVの文字列をJSON形式に変換し、文字列として出力

File API

1行目の列名をkeyとした連想配列にする インデント・タブを有効にする

(連想配列時、表記順はアルファベット順になる様子)

view source

JavaScript

var $files = [];
//jQuery.event.props.push('dataTransfer');

function filesSelected(files) {
  for (var i = 0; i < files.length; i++) {
      var file = files[i];
      $files.push(file);

      var reader = new FileReader();
      reader.onload = function(event){
        //console.log(reader.result);
        $('#area').text(reader.result);
        var csv = reader.result;
        //csv = Encoding.detect(csv, 'UTF8');
        convert(csv);
      };
      reader.readAsText(file, 'shift-jis');
      //reader.readAsDataURL(file);
   };
}

function convert(csv){

  localStorage.setItem('csv', csv);

  console.log(csv);
  var json = {};
  var str_json = '';
  var has_key = $('input[name="key"]').prop('checked');
  var has_indent = $('input[name="indent"]').prop('checked');
  //console.log(has_key);
  if(has_key){
    json = csvToKeyJson(csv);
  } else {
    json = csvToArrayJson(csv);
  }

  if(has_indent){
    str_json = JSON.stringify(json, null, '\t');
  } else {
    str_json = JSON.stringify(json);
  }
  
  $('#reslut').text(str_json);
  
}


function csvToArrayJson(csv){
  var array = [];
  var lines = csv.split('\n');
  
  //console.log(lines);
  for(var i=0;i<lines.length;i++){
    cols = lines[i].split(/\t|,/);
    var line = {};
    line = cols;
    array.push(line);
  }
  console.log(array);
  return array;
}

function csvToKeyJson(csv){
  var array = [];
  var lines = csv.split('\n');

  var head = lines.shift();
  var keys = head.split(/\t|,/);
  for(var j=1;j<keys.length;j++){
    keys[j] = keys[j].replace('\r', '');
  }

  for(var i=0;i<lines.length;i++){
    cols = lines[i].split(/\t|,/);
    var line = {};
    for(var j=0;j<cols.length;j++){
      cols[j] = cols[j].replace('\r', '');
      line[keys[j]] = cols[j];
    }
    array.push(line);
  }
  console.log(array);
  return array;
}

$(function(){
  console.log(localStorage);
  var csv = localStorage.getItem('csv');
  //localStorage.setItem('csv', 'sss');
  $('#area').val(csv);

  $('button').on('click', function(e){
    var csv = $('#area').val();
    convert(csv);
  });

  $('#area').on('dragover', function(e){
    e.preventDefault();
    e.stopPropagation();
    $(this).addClass('drag');
  });
  $('#area').on('dragleave', function(e){
    e.preventDefault();
    e.stopPropagation();
    $(this).removeClass('drag');
  });
  $('#area').on('drop', function(e){
    console.log(e);
    e.stopPropagation();
    e.preventDefault();
    $(this).removeClass('drag');
    filesSelected(e.dataTransfer.files);
  });
});

CSS

textarea{
  width:100%;
  height:240px;
  background-color:#eeeeee;
  border:1px solid #000000;
  box-sizing:border-box;
}
textarea.drag{
  background-color:#ee9999;
}

HTML

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-js/js-csv-to-json/

ABOUT

hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。

プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

必要な機能の関数をコピペ利用したり勉強に活用できます。

プログラムの動作サンプル結果は画面上部に出力表示されています。

環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。

途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。