【jquery,js】表示されたcsvを並べ替える[sort,join,trim,split,each] [js10_20210302] #JavaScript

処理の概要

テキストエリアに表示された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