今回は、JavascriptでCSVを読み込んで、CSVデータの指定した列だけを抜き出して配列化してみます。 これも前回の投稿、JavascriptでCSV(ヘッダー項目あり)をJSON形式に変換する方法【Underscore.js使用】で定義した、「csvToJson関数」を使用します。

csvToJson関数内で使っている、「csvToArray関数」の解説は、前々回の記事の、Underscore.jsを使ってCSVを配列化する方法【_.reduce関数の解説付】を参照あれ〜。

↓一応、全部のコードを記載。

実際のコード


/*
 # CSVを配列に変換する関数
*/
const csvToArray = (str) => {
  return _.reduce(String.prototype.split.call(str, '\n'), (table, row) => { 
    if (!!row) { // 空白行を除外するため、行(row)がある場合だけ処理.
      table.push(_.map(row.split(','), (col) => { // 行(row)をカンマ毎に分解した配列をテーブル(table)にpush().
        return col.trim(); // 列(col)をトリムして返す.
      }));
    }
    return table;
  }, []);
};

/*
 # CSV(ヘッダー項目付)をJSON形式に変換する関数
*/
const csvToJson = (csv) => {
  // CSVを配列形式に変換.
  let csvArr = csvToArray(csv);

  // ここで、任意のヘッダー行を追加したり変更してもいいんじゃないかな?
  // csvArr.shift();
  // csvArr.unshift(hogehoge...);

  // _.rest()で、csvArrの最初の配列を除外
  return _.rest(csvArr).map((row, idx, arr) => {
     // _.object関数で配列をオブジェクト形式に変換
     // _.first(arr)は、配列の最初の要素を返す.
    return _.object(_.first(csvArr).map((__colTitle, __idx, __arr) => {
      // ヘッダー行タイトル項目と同じインデックスにある各行の項目をペアにして返す.
      return [__colTitle, row[__idx]];
    }));
  });
};

/*
 # CSVデータの指定したヘッダー列(複数key可能)だけを抜き出して配列(JSON形式)として返す関数(pick(keys))を返す関数
*/
const extractCol = (csv) => {
  // CSVデータをJSON形式に変換
  const json = csvToJson(csv); // プライベートな変数

  // クロージャー
  return {
    pick: (keys) => {
      //JSONデータの各行から、ヘッダー行の指定したkeysだけをピックアップして返す.
      return _.map(json, (row) => {
        return _.pick(row, ...keys);
      });
    }
  };
};

実行結果


const csv = 'title,desc\nタイトル1,デスク1\nタイトル2,デスク2';
const col = extractCol(csv);

console.log('title列とdesc列を含む行の配列(JSON形式)', col.pick(['title', 'desc']));
/*
# 結果
# [
#   {title: "タイトル1", desc: "デスク1"},
#   {title: "タイトル2", desc: "デスク2"}
# ]
*/

console.log('title列だけを含む行の配列(JSON形式)', col.pick(['title']));
/*
# 結果
# [
#   {title: "タイトル1"},
#   {title: "タイトル2"}
# ]
*/

console.log('title列のみ抽出',  _.pluck(col.pick(['title', 'desc']), 'title'));
/*
# 結果
# ["タイトル1", "タイトル2"]
*/

console.log('desc列のみ抽出', _.pluck(col.pick(['title', 'desc']), 'desc'));
/*
# 結果
# ["デスク1", "デスク2"]
*/

解説

CSVを配列化 → JSON化 → 指定ヘッダー列(複数key可能)だけを抜き出して配列(JSON形式)で出力 → 必要なkeyを持つ値のみを配列化しました。

参考資料

クロージャーについては、Qiitaにあったのでこちらを参照あれ! → JavaScriptでクロージャ入門。関数はすべてクロージャ?

Underscore.jsの配列操作系メソッドについてはこちらのQiita!! → 遅すぎたUnderscore.js詳述 – Collections編

まとめ

うーむ、Underscore.js便利!毎回w ネットショップ運営なんかでCSVを取り扱う場面が多いとかだと重宝しそうだなぁ〜。

以上。

この記事を書いた人

こうへい

マーケティングをアーキテクトする、マーケテクトです。PDCAが趣味です。Web developer && 映像クリエイター.