HTMLからJSに配列データを渡す(C#を使ったASP.NET MVCとEntityFrameworkでの応用もちょこっと）

HTML上のデータを配列で取得する方法。

大きく分けて2種類紹介します。
下記のデータをk=["ss","ss","ss"]と取得する方法を２種類紹介します。
結論から言うとgetElementsByClassNameだけでいい気もします。

getElementsByClassNameを用いて取得する方法

こちらで取得するのがよいそうです。

test.html

    <input class="hiddata" value="ss" />
    <input class="hiddata" value="ss" />
    <input class="hiddata" value="ss" />

tes.js

    var k = [];
    for (var i = 0; i < 3; i++) {
        k.push(document.getElementsByClassName('hiddata')[i].value);
    }

getElementByIdを用いて取得する方法

idは一意であることが好ましいらしいとのことなので、idを配列のように記述し取得する方法です。

test.html

    <input id="hiddata3[0]" value="ss" />
    <input id="hiddata3[1]" value="ss" />
    <input id="hiddata3[2]" value="ss" />

tes.js

    var k = [];
    for (var i = 0; i < 3; i++) {
        k.push(document.getElementById('hiddata3['+i+']').value);
    }

解説

上記の方法は仕組みが少し異なります。
"getElementsByClassName"で取得を試みると、同名のクラスが自動的に配列になります。
"getElementById"で取得を試みると、同名の値を１つだけ取得します。（idは一意であるという原則があるから）
そこで、ループを用いてidの名前を書き換えることで複数の値を取得しています。

補足１：なぜvalueを付けなければいけないのか？

getElement●●で取得したばかりのものはHTMLCollectionという形式で保存されており、直接値の取得はできません。
試しに以下のように記述し、取得を試みると、画像のようにHTMLCollectionという型のデータであることが分かります。

test.html

    <input class="hiddata" value="ss" />
    <input class="hiddata" value="ss" />
    <input class="hiddata" value="ss" />

tes.js

    var example = document.getElementsByClassName('hiddata');

よって、hiddata[0].valueとすることによって"ss"というデータを取得できます。
これをループによって繰り返し取得し、k=["ss","ss","ss"]の取得ができるようになります。

補足2：ASP.NET MVC+EntityFrameworkでの取得例

"getElementById"での取得は違う名前のidをたくさん取得する必要があるので、多少手間です。
ASP.NET MVC+EntityFrameworkを活用すればDBの情報を下記のように取得できます。

１．DBの情報をリストにしてViewBagに詰める

tes.cs

        public ActionResult Test()
        {
            var tes = db.Cleaner.Select(m=>m.Cgroup).Where(m=>m.HasValue).Distinct().ToList();
            ViewBag.tes = tes;
            return View();
        }

２．隠しデータ(type="hidden")という形でこっそり渡す

tes.cshtml

@using (Html.BeginForm("Test", "Index"))
{
    var s = 0;
    foreach (var item in @ViewBag.tes)
    {
        <input type="hidden" id='hiddata[@(s)]' value="@item" />
        s += 1;
    }
}

３．jsで取得

tes.js

    var k = [];
    for (var i = 0; i < 3; i++) {
        k.push(document.getElementById('hiddata['+i+']').value);
    }

後記

四苦八苦しながら習得した方法なので、使うならgetElementsByClassNameさえ使えれば大丈夫です。