処理の概要
テキストエリアに表示されたcsvデータを読みの順で並べ替えを行います。
処理のフロー：
(1)初期化メソッドでテキストエリアにcsvテキストを表示します。
(2)実行ボタンを押下するとテキストを取得します。
(3)指定の文字列を取得し、任意のカラムで比較を行います。
(4)テキストエリア2にソートしたテキストを表示する
画面イメージ
画像１
画像２
ソースコード
index.html
<body onload="init()">
<!-- テキストエリア表示内容はタブ入力されるので、インデント注意 -->
<textarea id="beforeUserInput"></textarea>
<br>
<input type="button" id="execSortButton" value="並べ替え">
<br>
<textarea id="afterUserInput"></textarea>
</body>
リファクタリングする前
main.js
function init(){
var lobjText = ""
var defaultStr = [
["蜜柑","みかん",80],
["西瓜","すいか",300],
["葡萄","ぶどう",280]
]
$.each(defaultStr,function(){
lobjText = lobjText + this + "\n";
});
$("#beforeUserInput").val(lobjText)
};
$(function() {
$("#execSortButton").click(function(){
var sortItem = $("#beforeUserInput").val();
sortItem = sortItem.trim();
var sortArray = sortItem.split("\n");
// 列数を指定
var sortColumnNum = 2;
sortArray.sort(function(sortName1,sortName2){
//ソートする対象となる列数を格納する
var strNumber = sortColumnNum - 1
var compareNameA = sortName1.split(",")[strNumber];
var compareNameB = sortName2.split(",")[strNumber];
if (compareNameA < compareNameB) return -1;
if (compareNameA > compareNameB) return 1;
return 0;
});
outputText = sortArray.join("\n")
$("#afterUserInput").val(outputText);
});
});
ポイント
html：
(1)特になし
js：
(1)sortItemの前後に無駄な改行や、タブ文字、半角スペースが存在しないように除去する。
この方法は、「trim()」を利用する
(2)ソート処理は、sort()関数の引数に関数を指定することで複雑な条件でソートが行える。
(3)join()は配列に対して、セパレーターをドッキングさせて文字列とする。
引数がない場合は、カンマでドッキング。
[a,b,c].join() => "a,b,c"
(4)split()は引数を入力すると、セパレータを排除して、配列に変換する。
"a\nb\nc".split(\n) => [a,b,c] 便利！
参考資料
JavaScript(仕事の現場でサッと使える！デザイン教科書) p210