配列を1行目をKeyとした連想配列に変換

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

  view source
  JavaScript
  ?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94 $(function(){
  var gdriveUrl = 'https://sheets.googleapis.com/v4/spreadsheets/1AbQ2MhkuMdDTWdrAV-cW_mJTEsKI8KGcQJDN92KaoXU/values/manga?key=AIzaSyCMrclHzmEjCXJPgFu0DLJq04jgsvNoCKQ';
  $.getJSON(gdriveUrl, (data) => {
    console.log(data.values);
    $('#area').val(JSON.stringify(data.values));
  });
});
 
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 data = reader.result;
        //csv = Encoding.detect(csv, 'UTF8');
        convert(data);
      };
      reader.readAsText(file, 'shift-jis');
      //reader.readAsDataURL(file);
   };
}
 
function convert(ary){
 
  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);
 
 json = aryToKeyHash(ary);
 
  if(has_indent){
    str_json = JSON.stringify(json, null, '\t');
  } else {
    str_json = JSON.stringify(json);
  }
   
  $('#reslut').text(str_json);
   
}
 
 
 
function aryToKeyHash(ary){
  var array = [];
 
  var keys = ary.shift();
  ary.forEach(function(cols){
    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(){
  //localStorage.setItem('csv', 'sss');
 
  $('button').on('click', function(e){
    var v = $('#area').val();
    var ary = JSON.parse(v);
    convert(ary);
  });
 
  $('#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
  ?
1
2
3
4
5
6
7
8
9
10 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-array-to-key-hash/
  
  ABOUT
  
    hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。
    プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。
    必要な機能の関数をコピペ利用したり勉強に活用できます。
    プログラムの動作サンプル結果は画面上部に出力表示されています。
    環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。
    画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。
    動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。
    途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。