■JavaScript
[2025/01/18] [PR] (No.)
[2020/04/10] JavaScript jQuery w2ui.grid を使ったグリッド処理・セルの書式設定（render） (No.162)
[2020/04/09] JavaScript jQuery w2ui.grid を使ったグリッド処理・外部データへ登録（save） (No.161)
[2020/04/03] JavaScript jQuery w2ui.grid を使ったグリッド処理・外部データの取り込み（url） (No.160)
[2020/04/02] JavaScript jQuery w2ui.grid を使ったグリッド処理方法の紹介 (No.159)
[2020/03/31] JavaScript 配列と Object.keys 、Object.values 及び Object.entries について (No.158)
[2020/04/10] JavaScript jQuery w2ui.grid を使ったグリッド処理・セルの書式設定（render） (No.162)
[2020/04/09] JavaScript jQuery w2ui.grid を使ったグリッド処理・外部データへ登録（save） (No.161)
[2020/04/03] JavaScript jQuery w2ui.grid を使ったグリッド処理・外部データの取り込み（url） (No.160)
[2020/04/02] JavaScript jQuery w2ui.grid を使ったグリッド処理方法の紹介 (No.159)
[2020/03/31] JavaScript 配列と Object.keys 、Object.values 及び Object.entries について (No.158)
-
×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
-
今回は w2ui.grid のセルの書式設定の方法について説明します。
セルに対して書式を設定する場合は、グリッドのカラム宣言である columns プロパティの中の render プロパティで行います。■render プロパティの定義済みの書式について
render名 書式 説明 int 整数値 float 浮動小数点数値 float:NN (NNは小数点以下の桁数) number 浮動小数点数値 number:NN (NNは小数点以下の桁数) money 金額 $9,999,999 の様にカンマ編集
($ はロケールにより変化する)currency 金額 $9,999,999 の様にカンマ編集
($ はロケールにより変化する)percent パーセント 数値をそのままパーセント値として表示(最後に％を付加) age 年齢 date 日付 date:date_format
(date_formatは日付書式、空の場合はd/m/yyyy)time 時刻 time:time_format
(time_formatは時刻書式、空の場合はd/m/yyyy)datetime 日付・時刻 datetime:date_format|time_format
(date_formatは日付書式、time_formatは時刻書式)toggle 使い方が不明 password パスワード 文字列の数だけ *(アスタリスク)の表示 function レンダリング関数 レンダリング関数:
render: function(record, [index], [column_index]) を宣言できる
それでは、上記の書式で使えそうなものを簡単な例で以下に示します。<!DOCTYPE html> <html> <head> <title>w2ui Grid-1</title> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" media="screen" href="./dist/w2ui.min.css" /> <script type="text/javascript" src="./libs/jquery/jquery-2.1.4.min.js"></script> <script type="text/javascript" src="./dist/w2ui.js"></script> </head> <body> <div id="grid" style="width: 800px; height: 250px;"></div> <script> $(function () { // id="grid" へのグリッド設定 $('#grid').w2grid({ name: 'grid', columns: [ { field: 'recid', caption: 'ID' , size: '40px' , render: 'float:2' }, { field: 'fname', caption: 'First Name', size: '80px' }, { field: 'lname', caption: 'Last Name' , size: '80px' , render: 'password'}, { field: 'fullname', caption: 'Full Name' , size: '100px', render: function (record) { return '<div>' + record.fname + ' ' + record.lname + '</div>'; } }, { field: 'email', caption: 'Email' , size: '20%' }, { field: 'sdate', caption: 'Birthday' , size: '100px', render: 'date:yyyy.mm.dd' }, { field: 'sdate', caption: 'age' , size: '80px' , render: 'age' }, { field: 'money', caption: 'Money' , size: '80px' , render: 'money' }, { field: 'money', caption: 'Money' , size: '80px' , render: 'percent' } ], records: [ { recid: 1, fname: "John" , lname: "Doe" , email: "jdoe@gmail.com", sdate: "1980/03/01", money: "1000" }, { recid: 2, fname: "Stuart" , lname: "Motzart", email: "smot@gmail.com", sdate: "2000/03/12", money: "200" }, { recid: 3, fname: "Jin" , lname: "Franson", email: "jgra@gmail.com", sdate: "2010/03/13", money: "30000" }, { recid: 4, fname: "Susan" , lname: "Ottie" , email: "sott@gmail.com", sdate: "1980/03/24", money: "40000" }, { recid: 5, fname: "Kelly" , lname: "Silver" , email: "ksil@gmail.com", sdate: "1970/03/25", money: "1000" }, { recid: 6, fname: "Francis", lname: "Gatos" , email: "fgat@gmail.com", sdate: "1982/03/26", money: "1500" }, { recid: 7, fname: "Mark" , lname: "Welldo" , email: "mwel@gmail.com", sdate: "2001/03/27", money: "10000" }, { recid: 8, fname: "Thomas" , lname: "Bahh" , email: "tbah@gmail.com", sdate: "2000/03/28", money: "10000" } ] }); }); </script> </body> </html>
これを実行させると以下の様な表示になります。
この例の中で興味深いのは、レンダリング関数を宣言できるところだと思います。
これを使えば各データの属性で色々な表示の変化を関数で処理できます。 例えば、データには区分データしか持っていないが、実際の場合にはそれに対応した文字列を表示したりできます。
レコードデータの中に男女区別のフラグを持ってそれで「男性」「女性」の違いを表示します。<!DOCTYPE html> <html> <head> <title>w2ui Grid-1</title> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" media="screen" href="./dist/w2ui.min.css" /> <script type="text/javascript" src="./libs/jquery/jquery-2.1.4.min.js"></script> <script type="text/javascript" src="./dist/w2ui.js"></script> </head> <body> <div id="grid" style="width: 500px; height: 250px;"></div> <script> // 性別文字列の宣言 var arrSex = {"1": "Male" , "2": "Female"}; $(function () { // id="grid" へのグリッド設定 $('#grid').w2grid({ name: 'grid', columns: [ { field: 'recid', caption: 'ID' , size: '60px' , render: 'float:2' }, { field: 'fname', caption: 'First Name', size: '100px' }, { field: 'lname', caption: 'Last Name' , size: '100px', render: 'password'}, { field: 'fullname', caption: 'Full Name' , size: '100px', render: function (record) { return '<div>' + record.fname + ' ' + record.lname + '</div>'; } }, { field: 'sex' , caption: 'Sex' , size: '20%' , render: function (record) { return '<div>' + arrSex[ record.sex ] + '</div>'; } } ], records: [ { recid: 1, fname: "John" , lname: "Doe" , sex: "1" }, { recid: 2, fname: "Stuart" , lname: "Motzart", sex: "1" }, { recid: 3, fname: "Jin" , lname: "Franson", sex: "1" }, { recid: 4, fname: "Susan" , lname: "Ottie" , sex: "2" }, { recid: 5, fname: "Kelly" , lname: "Silver" , sex: "2" }, { recid: 6, fname: "Francis", lname: "Gatos" , sex: "1" }, { recid: 7, fname: "Mark" , lname: "Welldo" , sex: "1" }, { recid: 8, fname: "Nuncy" , lname: "Bahh" , sex: "2" } ] }); }); </script> </body> </html>
これを実行させると以下の様な表示になります。
PR -
前回は w2ui.grid の外部データを指示するプロパティである url ついて説明をしました。
⇒JavaScript jQuery w2ui.grid を使ったグリッド処理・外部データの取り込み（url）
今回は url の save プロパティにPHPプログラムを指定することでデータ登録ができる例を紹介したいと思います。
尚、最初の読込ファイルは以下の様に以前のものと同様です。■JSON 形式のテストデータ(data-get.json)
{ records: [ { recid: 1, fname: "John" , lname: "Doe" , email: "jdoe@gmail.com", sdate: "2020/03/01" }, { recid: 2, fname: "Stuart" , lname: "Motzart", email: "smot@gmail.com", sdate: "2020/03/12" }, { recid: 3, fname: "Jin" , lname: "Franson", email: "jgra@gmail.com", sdate: "2020/03/13" }, { recid: 4, fname: "Susan" , lname: "Ottie" , email: "sott@gmail.com", sdate: "2020/03/24" }, { recid: 5, fname: "Kelly" , lname: "Silver" , email: "ksil@gmail.com", sdate: "2020/03/25" }, { recid: 6, fname: "Francis", lname: "Gatos" , email: "fgat@gmail.com", sdate: "2020/03/26" }, { recid: 7, fname: "Mark" , lname: "Welldo" , email: "mwel@gmail.com", sdate: "2020/03/27" }, { recid: 8, fname: "Thomas" , lname: "Bahh" , email: "tbah@gmail.com", sdate: "2020/03/28" } ] }
それでは records 部分を url にて JSON ファイルを指定したソースを示します。
■url プロパティによる JSON ファイルを指定について
<!DOCTYPE html> <html> <head> <title>w2ui Grid-3</title> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" media="screen" href="./dist/w2ui.min.css" /> <script type="text/javascript" src="./libs/jquery/jquery-2.1.4.min.js"></script> <script type="text/javascript" src="./dist/w2ui.js"></script> </head> <body> <div id="grid" style="width: 500px; height: 200px;"></div> <script> $(function () { // id="grid" へのグリッド設定 $('#grid').w2grid({ name: 'grid', method: 'GET', columns: [ { field: 'fname', caption: 'First Name', size: '30%' }, { field: 'lname', caption: 'Last Name' , size: '30%' }, { field: 'email', caption: 'Email' , size: '40%' }, { field: 'sdate', caption: 'Start Date', size: '100px' } ], url: { get: 'data-get.json', remove: 'save.php', save: 'save.php' } }); }); </script> </body> </html>■save.php プログラム
<?php // PHP 5.5.0 未満のため「array_column」宣言 if (!function_exists('array_column')) { // 「array_column」宣言 function array_column($arr, $strKey) { $arrOut = array(); for ($i = 0; $i <= count($arr); $i++) { if (isset($arr[$i][$strKey])) { $arrOut[] = $arr[$i][$strKey]; } } return $arrOut; } } // リクエスト取得 $arrReq = json_decode($_GET['request'], true); $strJsonFile = 'data-get.json'; // 動作による処理 switch ($arrReq['action']) { case 'save': // 変更データ存在チェック if (!isset($arrReq['changes'][0])){ break; } // データJSONファイル $strJson = file_get_contents($strJsonFile); $arrData = json_decode($strJson, true); // recid列の配列(KEY:0からの連番) $arrRecid = array_column($arrData["records"], "recid"); // 変更データ('changes')に従って処理 for ($i = 0; $i <= count($arrReq['changes']) - 1; $i++) { $intRecid = -1; // 'changes'内の1個のデータ処理 foreach ($arrReq['changes'][$i] as $key => $value) { if ($key == "recid") { $intRecid = $value; // "recid"の退避 continue; } if ($intRecid >= 0) { // "recid"の存在するIndex検索 $intIdx = array_search($intRecid, $arrRecid); // データ配列への書込 $arrData["records"][$intIdx][$key] = $value; } } } // JSON文字列生成 $strJson = json_encode($arrData, JSON_UNESCAPED_UNICODE); // テキストファイル書込(data-get.json) file_put_contents($strJsonFile , $strJson); break; } ?>最初の HTML ファイルを実行し、以下の図の Save ボタンをクリックすると data-get.json が変更され、 ページの再読込を行うと変更した値になるはずです。
上記は Save 処理のみのプログラムですが remove 処理も含めると以下の様になります。 行を複数選択して Delete ボタンをクリックすると以下の様に "recid" が配列で複数渡されます。
Array ( [request] => {"action":"delete","recid":[3,4]} )これを加味してソースを修正します。
■save.php プログラム(削除処理も含む)
<?php // PHP 5.5.0 未満のため「array_column」宣言 if (!function_exists('array_column')) { // 「array_column」宣言 function array_column($arr, $strKey) { $arrOut = array(); for ($i = 0; $i <= count($arr); $i++) { if (isset($arr[$i][$strKey])) { $arrOut[] = $arr[$i][$strKey]; } } return $arrOut; } } // リクエスト取得 $arrReq = json_decode($_GET['request'], true); $strJsonFile = 'data-get.json'; // データJSONファイル $strJson = file_get_contents($strJsonFile); $arrData = json_decode($strJson, true); // 動作による処理 switch ($arrReq['action']) { case 'save': // 変更データ存在チェック if (!isset($arrReq['changes'][0])){ break; } // recid列の配列(KEY:0からの連番) $arrRecid = array_column($arrData["records"], "recid"); // 変更データ('changes')に従って処理 for ($i = 0; $i <= count($arrReq['changes']) - 1; $i++) { $intRecid = -1; // 'changes'内の1個のデータ処理 foreach ($arrReq['changes'][$i] as $key => $value) { if ($key == "recid") { $intRecid = $value; // "recid"の退避 continue; } if ($intRecid >= 0) { // "recid"の存在するIndex検索 $intIdx = array_search($intRecid, $arrRecid); // データ配列への書込 $arrData["records"][$intIdx][$key] = $value; } } } // JSON文字列生成 $strJson = json_encode($arrData, JSON_UNESCAPED_UNICODE); // テキストファイル書込(data-get.json) file_put_contents($strJsonFile , $strJson); break; case 'delete': // [request] => {"action":"delete","recid":[3,4]} // recid列の配列(KEY:0からの連番) $arrRecid = array_column($arrData["records"], "recid"); foreach ($arrReq['recid'] as $value) { // "recid"の存在するIndex検索 $intIdx = array_search($value, $arrRecid); // データ配列削除 unset($arrData["records"][$intIdx]); } $arrData["records"] = array_values($arrData["records"]); $arrData["total"] = count($arrData["records"]); // JSON文字列生成 $strJson = json_encode($arrData, JSON_UNESCAPED_UNICODE); // テキストファイル書込(data-get.json) file_put_contents($strJsonFile , $strJson); break; } ?>
今回はテキストファイルに対する登録、削除処理でしたが、実際にはデータベースに対しての処理になると思います。
-
今回は w2ui.grid の外部データを指示するプロパティである url ついて説明をします。
最初の紹介ページでのデータ宣言している部分を外部ファイルとして読込ませます。
⇒JavaScript jQuery w2ui.grid を使ったグリッド処理方法の紹介
ファイルは JSON 形式で記述します。上記のページの records プロパティの部分を JSON ファイルとして作成します。
ファイルの中身は以下の様になります。（records を { } で囲みます。尚、ファイルの文字コードは UTF-8 です。）{ records: [ { recid: 1, fname: "John" , lname: "Doe" , email: "jdoe@gmail.com", sdate: "2020/03/01" }, { recid: 2, fname: "Stuart" , lname: "Motzart", email: "smot@gmail.com", sdate: "2020/03/12" }, { recid: 3, fname: "Jin" , lname: "Franson", email: "jgra@gmail.com", sdate: "2020/03/13" }, { recid: 4, fname: "Susan" , lname: "Ottie" , email: "sott@gmail.com", sdate: "2020/03/24" }, { recid: 5, fname: "Kelly" , lname: "Silver" , email: "ksil@gmail.com", sdate: "2020/03/25" }, { recid: 6, fname: "Francis", lname: "Gatos" , email: "fgat@gmail.com", sdate: "2020/03/26" }, { recid: 7, fname: "Mark" , lname: "Welldo" , email: "mwel@gmail.com", sdate: "2020/03/27" }, { recid: 8, fname: "Thomas" , lname: "Bahh" , email: "tbah@gmail.com", sdate: "2020/03/28" } ] }
それでは records 部分を url にて JSON ファイルを指定したソースを示します。
■url プロパティによる JSON ファイルを指定について
<!DOCTYPE html> <html> <head> <title>w2ui Grid-1</title> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" media="screen" href="./dist/w2ui.min.css" /> <script type="text/javascript" src="./libs/jquery/jquery-2.1.4.min.js"></script> <script type="text/javascript" src="./dist/w2ui.js"></script> </head> <body> <div id="grid" style="width: 500px; height: 200px;"></div> <script> $(function () { // id="grid" へのグリッド設定 $('#grid').w2grid({ name: 'grid', columns: [ { field: 'fname', caption: 'First Name', size: '30%' }, { field: 'lname', caption: 'Last Name' , size: '30%' }, { field: 'email', caption: 'Email' , size: '40%' }, { field: 'sdate', caption: 'Start Date', size: '100px' } ], url: 'data.json' }); }); </script> </body> </html>
これを実行させると以下の様な表示になります。 （特に最初の紹介ページの表示と変わりはありません）
この url はグリッドが、リフレッシュ、検索、レコードのソートの各処理が行われた時にしていされた url で指定されたファイルからデータが取得されて表示されます。 データを保存する場合があれば、同じく url で指定されたファイルに登録されます。
更に、レコードの取得、削除、登録において別のファイル名などを指定する場合は url の内部プロパティである get , remove , save を指定します。
■url プロパティによるレコードの取得、削除、登録を指定
<!DOCTYPE html> <html> <head> <title>w2ui Grid-1</title> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" media="screen" href="./dist/w2ui.min.css" /> <script type="text/javascript" src="./libs/jquery/jquery-2.1.4.min.js"></script> <script type="text/javascript" src="./dist/w2ui.js"></script> </head> <body> <div id="grid" style="width: 500px; height: 200px;"></div> <script> $(function () { // id="grid" へのグリッド設定 $('#grid').w2grid({ name: 'grid', columns: [ { field: 'fname', caption: 'First Name', size: '30%' }, { field: 'lname', caption: 'Last Name' , size: '30%' }, { field: 'email', caption: 'Email' , size: '40%' }, { field: 'sdate', caption: 'Start Date', size: '100px' } ], url: { get: 'data-get.json', remove: 'data-remove.json', save: 'datas-save.json' } }); }); </script> </body> </html>
この方法で上手くいくかと思ったのですが、remove , save のところで json ファイル指定はできない様です。 以下のソースの様に PHP ファイルに制御を渡して、 $_GET['request'] の中を調べてデータ処理をすることになります。
<!DOCTYPE html> <html> <head> <title>w2ui Grid-2 url2</title> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" media="screen" href="./dist/w2ui.min.css" /> <script type="text/javascript" src="./libs/jquery/jquery-2.1.4.min.js"></script> <script type="text/javascript" src="./dist/w2ui.js"></script> </head> <body> <div id="grid" style="width: 500px; height: 200px;"></div> <script> $(function () { // id="grid" へのグリッド設定 $('#grid').w2grid({ name: 'grid', method: 'GET', columns: [ { field: 'recid', caption: 'ID', size: '50px' }, { field: 'fname', caption: 'First Name', size: '30%' , editable: { type: 'text' } }, { field: 'lname', caption: 'Last Name' , size: '30%' }, { field: 'email', caption: 'Email' , size: '40%' }, { field: 'sdate', caption: 'Start Date', size: '100px' } ], url: { get: 'data-get.json', remove: 'remove.php', save: 'save.php' }, show : { toolbar : true, toolbarDelete : true, toolbarSave : true, searchAll : false } }); }); </script> </body> </html>
このソースを表示し、グリッドの Save ボタンをクリックすると変更個所の情報が PHP プログラムに送られます。■save.php プログラム
<?php $results = print_r($_GET, true); file_put_contents("save.json", $results); ?>■save.json ファイルの内容
Array ( [request] => {"changes":[{"recid":3,"fname":"Jin111"},{"recid":4,"fname":"Susan222"}],"action":"save"} )変更の在った recid と 変更したカラム名とその値が送られてくるので、それを使って実際のデータを更新処理することになります。
グリッドの行を選択し Delete ボタンをクリックすると削除個所の情報が PHP プログラムに送られます。■remove.php プログラム
<?php $results = print_r($_GET, true); file_put_contents("remove.json", $results); ?>■remove.json ファイルの内容
Array ( [request] => {"action":"delete","recid":[1]} )削除の在った recid が送られてくるので、それを使って実際のデータを削除処理することになります。
-
今回から複数回に渡り JavaScript のデータグリッドコンポーネントである w2ui ついて説明をします。
最近仕事で使うことになったので、簡単な使い方から初めて、いろいろな使い方について紹介していきたいと思います。
w2ui ですが見た目もなかなかな感じで HTML タグの table では表現が難しいものも簡単な指定で可能になります。
それでは簡単な例を以下に示します。<!DOCTYPE html> <html> <head> <title>w2ui Grid-1</title> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" media="screen" href="./dist/w2ui.min.css" /> <script type="text/javascript" src="./libs/jquery/jquery-2.1.4.min.js"></script> <script type="text/javascript" src="./dist/w2ui.js"></script> </head> <body> <div id="grid" style="width: 500px; height: 200px;"></div> <script> $(function () { // id="grid" へのグリッド設定 $('#grid').w2grid({ name: 'grid', columns: [ { field: 'fname', caption: 'First Name', size: '30%' }, { field: 'lname', caption: 'Last Name' , size: '30%' }, { field: 'email', caption: 'Email' , size: '40%' }, { field: 'sdate', caption: 'Start Date', size: '100px' } ], records: [ { recid: 1, fname: "John" , lname: "Doe" , email: "jdoe@gmail.com", sdate: "2020/03/01" }, { recid: 2, fname: "Stuart" , lname: "Motzart", email: "smot@gmail.com", sdate: "2020/03/12" }, { recid: 3, fname: "Jin" , lname: "Franson", email: "jgra@gmail.com", sdate: "2020/03/13" }, { recid: 4, fname: "Susan" , lname: "Ottie" , email: "sott@gmail.com", sdate: "2020/03/24" }, { recid: 5, fname: "Kelly" , lname: "Silver" , email: "ksil@gmail.com", sdate: "2020/03/25" }, { recid: 6, fname: "Francis", lname: "Gatos" , email: "fgat@gmail.com", sdate: "2020/03/26" }, { recid: 7, fname: "Mark" , lname: "Welldo" , email: "mwel@gmail.com", sdate: "2020/03/27" }, { recid: 8, fname: "Thomas" , lname: "Bahh" , email: "tbah@gmail.com", sdate: "2020/03/28" } ] }); }); </script> </body> </html>
グリッドの領域を div タグで宣言し、その領域に対して w2ui の1つの機能である w2grid を設定してやります。 w2grid への引数は1個のオブジェクトとして宣言したものを渡してやります。そのオブジェクトの中に、グリッド用の各種のプロパティを宣言します。
上記の例ではカラムの宣言である columns プロパティと、表示データの中身である records プロパティを宣言します。 それぞれのプロパティはオブジェクトの配列として設定します。さらに columns 、 records ともそれぞれ専用のプロパティで宣言します。
これを実行させると以下の様な表示になります。 （結構簡単にグリッドによるデータ表示が実現できると思います）
■columns プロパティのオブジェクト配列の内部プロパティについて
プロパティ名 説明 備考 caption カラムのキャプション デフォルト:'' field レコードのフィールド名 デフォルト:'' size カラムの幅 px OR ％ 数値のみは px min カラムの最小幅 px デフォルト:15 max カラムの最大幅 px hidden 非表示カラムの指定 デフォルト:false render 表示文字列 OR レンダリング関数 レンダリング関数:
render(function(record, [index], [column_index])) を宣言できる
<例:>
render: function (record) {
return '<div>'+record.fname+' '+record.lname+'</div>';
}editable 編集可能フィールドの指定 オブジェクトとして指定する
オブジェクトのプロパティとして type , min , max などがある
<例:>
editable: { type:"int", min: 0, max: 999 }frozen 左固定列の指定
columns 用プロパティは他にもありますが、以上が重要なプロパティです。 尚、editable は内部にプロパティを持つので、以下にその代表的なものを示します。
■editable の内部プロパティについて
プロパティ名 説明 備考 type フィールドの型宣言 型には以下のものがあります - int :整数型
- float :実数型
- hex :16進数
- currency :通貨型
- alphaNumeric :英数字
- date :日付型
- check :チェックボックス
- select :ドロップダウンリスト
min 入力最小値 max 入力最大値 ■w2ui のダウンロードについて
w2ui をダウンロードするには以下のサイトにアクセスして下さい。
⇒https://github.com/vitmalina/w2ui
該当のサイトを開いてから、 「Clone or download」の緑色のボタンをクリックしてダウンロードします。
ダウンロードしたソースには各種デモが入っていますので、テストしてみてはいかがでしょうか。
尚、今後はいろんな使い方をご紹介したいと思います。
-
配列及び連想配列にはそれぞれキーを持っていて、対応する値を管理しています。
そのキーの一覧を取得するためには標準オブジェクトである Object の Object.keys() メソッドを使用します。
Object.keys() メソッドは、指定されたオブジェクトが持つプロパティの 名前の配列を、通常のループで取得するのと同じ順序で返します。 それでは、以下にの例を示します。■配列のキー一覧取得（Object.keys）
var arrTest; var arrKeys; // 単純な配列 arrTest = ['a', 'b', 'c']; arrKeys = Object.keys(arrTest); console.log(arrKeys); // オブジェクトのような配列 arrTest = { 0: 'abcdefg', 1: 123, 2: true }; arrKeys = Object.keys(arrTest); console.log(arrKeys); // key定義がランダムな配列 arrTest = { 100: 'abcdefg', 5: 123, 10: true }; arrKeys = Object.keys(arrTest); console.log(arrKeys); // key定義がランダムな配列２ arrTest = { aaa: 'abcdefg', 100: 123, 20: 45, cc:'10', bb: true }; arrKeys = Object.keys(arrTest); console.log(arrKeys);結果をコンソールに表示していますので、ブラウザの開発環境を開いてコンソール出力を表示させます。 ブラウザにより少し違いがありますが、以下の様な結果が表示されるはずです。
Array(3) [ "0", "1", "2" ] Array(3) [ "0", "1", "2" ] Array(3) [ "5", "10", "100" ] Array(5) [ "20", "100", "aaa", "cc", "bb" ]
ここで注意するのは key が昇順でソートされて返されるところです。 数値と文字列が混在した場合には、数値はソートされ、文字列は発生した順番の様です。
キーの一覧取得には Object.keys() メソッドを使用するのですが、 キーの示す値の取得にはそれに対応する Object.values() メソッドを使用することになります。
上のソースを少し変更したものを以下に示します。
■配列の値一覧取得（Object.values）
var arrTest; var arrVals; // 単純な配列 arrTest = ['a', 'b', 'c']; arrVals = Object.values(arrTest); console.log(arrVals); // オブジェクトのような配列 arrTest = { 0: 'abcdefg', 1: 123, 2: true }; arrVals = Object.values(arrTest); console.log(arrVals); // key定義がランダムな配列 arrTest = { 100: 'abcdefg', 5: 123, 10: true }; arrVals = Object.values(arrTest); console.log(arrVals); // key定義がランダムな配列２ arrTest = { aaa: 'abcdefg', 100: 123, 20: 45, cc:'10', bb: true }; arrVals = Object.values(arrTest); console.log(arrVals);結果は以下の通りです。 先ほどのキーの出力順番通りキーに対応する値が出力されています。
Array(3) [ "a", "b", "c" ] Array(3) [ "abcdefg", 123, true ] Array(3) [ 123, true, "abcdefg" ] Array(5) [ 45, 123, "abcdefg", "10", true ]
この Object.values() メソッドですが、 FireFox 、Chrome 、Edge などは対応していますが IE(Internet Explorer) は対応していません。 これを実行すると「オブジェクトは 'values' プロパティまたはメソッドをサポートしていません。」のエラーが表示されるはずです。
IE を対象外とはまだできないと思いますので、Object.values() メソッドを作ってみたいと思います。
■ IE(Internet Explorer) で Object.values() メソッドをエミュレート
function EmulateObjectValues() { if(!Object.values) { // 「Object.values」の定義が存在しない場合、関数生成 Object.values = function(obj) { // 戻り値の配列 var arr = new Array(); // [obj]の中のキー値の一覧 for(var key in obj) { // [obj]の中の値を配列に設定 arr.push(obj[key]); } // 配列を戻す return (arr); } } }この関数は Object.values() メソッドが存在しない場合にメソッドの関数を生成する様にしています。 この関数を Object.values() メソッドを使用する前にコールする様にします。 上のソースにこの関数をコールする様にした例を示します。
■Object.values() メソッドのエミュレート関数をコールする
var arrTest; var arrVals; // エミュレート関数生成をコール EmulateObjectValues(); // 単純な配列 arrTest = ['a', 'b', 'c']; arrVals = Object.values(arrTest); console.log(arrVals); // オブジェクトのような配列 arrTest = { 0: 'abcdefg', 1: 123, 2: true }; arrVals = Object.values(arrTest); console.log(arrVals); // key定義がランダムな配列 arrTest = { 100: 'abcdefg', 5: 123, 10: true }; arrVals = Object.values(arrTest); console.log(arrVals); // key定義がランダムな配列２ arrTest = { aaa: 'abcdefg', 100: 123, 20: 45, cc:'10', bb: true }; arrVals = Object.values(arrTest); console.log(arrVals);
これを実行すると上の方の実行結果と同じになるはずです。
Object.values() に関連したメソッドとして Object.entries() が有りますが、 このメソッドも IE(Internet Explorer) は対応していませんので、これのエミュレート関数を作成してみます。
■Object.entries() メソッドのエミュレート関数
function EmulateObjectEntries() { if(!Object.entries) { // 「Object.entries」の定義が存在しない場合、関数生成 Object.entries = function(obj) { // 戻り値の配列 var arr = new Array(); // [obj]の中のキー値の一覧 for(var key in obj) { // 子のオブジェクトに設定 var objSub = {}; objSub[key] = obj[key]; arr.push(objSub); } // 配列を戻す return (arr); } } }これを実行するソースは以下の様になります。
var arrTest; var arrEnts; // エミュレート関数生成をコール EmulateObjectEntries(); // key定義がランダムな配列２ arrTest = { aaa: 'abcdefg', 100: 123, 20: 45, cc:'10', bb: true }; arrEnts = Object.entries(arrTest); console.log(arrEnts);以下に IE 及び FireFox での実行結果（コンソール画面）の表示を示します。
■Object.entries() IEでの実行結果
■Object.entries() FireFoxでの実行結果