連想配列の使い方、要素の参照方法が判らないので教えて下さい

Question

連想配列の使い方、要素の参照方法が良く判らないので教えて下さい。

jQueryのjqGridで作成されている配列オブジェクトの値をCSVに出力するスクリプトです。
先人のソースを参考にして見よう見まねで、何とか動くようになり、結果をExcelで開くことも出来るのですが、
いわゆる標準的なCSVの形式として、文字列をダブルクォーテーションで囲む、という形式にすることが出来ていません。
列の属性を判断するには、sorttypeというプロパティを持っているのでそれを参照して、文字か数字かを判断すればよいと思っています。

連想配列の並び順が確保できなかったので、列の順番を付けるためにkeyOrderという配列を設けています。
この配列に値の順に、colModelの中のsorttypeプロパティが'int'の場合には数値と見なすという判断ができればよいかと思うのですが、
どのように検索、参照すればよいのでしょうか？

もっと簡単な方法でできるというご意見もあろうことは承知しておりますが、当面の課題におきましてアドバイスをいただければ幸いです。

よろしくご指導ください。

var dt = [
   {cd:"A001", name:"鈴木", age:35}
  ,{cd:"A002", name:"佐藤", age:45}
  ,{cd:"A003", name:"田中", age:55}
];

var keyOrder  = [
	"cd",
	"name",
	"age"
];


$("#list").jqGrid({
   data: dt
  ,datatype: "local"
  ,colNames:['CD', '名前', '年齢']
  ,colModel:[
    {index:'cd', name:'cd', width:'50px', align:'center'},
    {index:'name', name:'name', width:'100px', align:'left'},
    {index:'age', name:'age', width:'80px', align:'right', sorttype:'int'},
  ]
  ,height: 150
  ,multiselect: true
  ,caption: '一覧'
  ,rowNum: 5
  ,rowList: [5, 10, 20]
  ,viewrecords: true
  ,pager: 'pg01'
});

var ListToCSV = {
	export: function() {
		var csv_data = "";
		var j;
		var line;
		// 行データを取得する
		var sel_list = $('#list').getGridParam('data');
		j = 0;
		line = "";
		var header_list = $('#list').getGridParam('colNames');
		// 列属性の取得  －－＞　ここから sorttypeプロパティを取り出したい
		var col_list = $('#list').getGridParam('colModel');
		// 見出しの値を取得
		header_list.forEach(function( key ) {
			// chekbox列の除外
			if ( key.indexOf('checkbox') == -1) {
				if ( j != 0 ) line += ",";
				line += key;
				j ++;
			}
		});
		line += '\n';
		csv_data += line;
		// 明細の値を取得
		for (var i = 0; i < sel_list.length; i++) {
			j = 0;
			line = "";
			// 連想配列は並び順が保証されないので定義された順番(keyOrder)に書き出す
			keyOrder.forEach(function( key ) {

				//
				// この部分で、keyの値に対応する列のsorttypeというプロパティを参照
				//
				// col_list[key]['sorttype'] では駄目でした。

				if(sel_list[i][key]){
					var innerValue = sel_list[i][key]===null?'':sel_list[i][key].toString();
				} else {
					var innerValue = '';
				}
				// " を "" に置換
				var result = innerValue.replace(/"/g, '""');
				// , 又は \n　を含んでいる場合は ""で囲う
				if (result.search(/("|,|\n)/g) >= 0)
					result = '"' + result + '"';
				if ( j != 0 ) line += ",";
				line += result;
				j ++;
			//}
			});
			console.log(">" + line);
			line += '\n';
			csv_data += line;
		}
		// 頭にbomコードを付けた
		var csv_data_sjis = "\uFEFF" + csv_data;
		return csv_data_sjis;
	}
}

Comments

[think49]

HTMLを含めた再現コードを書いてください。
もしくは、必要なデータをコピペ可能な形式で書いてください。
こちらで再現できなければ、正確な回答は出来ません。

> 列の属性を判断するには、sorttypeというプロパティを持っているのでそれを参照して、文字か数字かを判断すればよいと思っています。

この部分が理解できません。

[hatsuzo]

think49さん　コメントありがとうございました。

すみません。説明が足りませんでした。
$("#list").jqGrid({
data: dt
,datatype: "local"
,colNames:['CD', '名前', '年齢']
,colModel:[
{index:'cd', name:'cd', width:'50px', align:'center'},
{index:'name', name:'name', width:'100px', align:'left'},
{index:'age', name:'age', width:'80px', align:'right', sorttype:'int'},
]
(以下略)
}
dataプロパティはデータの実体となる配列で、colModelプロパティで各列に対する属性が配列で定義されています。
その中の属性の一つとして、sorttypeがあり、その値がintであれば数値属性であることが識別できる
ということです。
データの実体から見ると、
{cd:"A001", name:"鈴木", age:35}
age列が数値属性であるという意味になります。
実際、フレームワーク(intra-mart)を使っているので、再現コードが書けないため、
$("#list").jqGrid({　の部分やデータの実体部分は実ソースには無いものですが、参照可能な
データの形式で追記したものです。

[think49]

説明を努力しているのは伝わりましたが、まだ正確な状況がわかりません。

コピペで動作して、私が「期待するCSV文字列値」を返す関数に修正して頂ければ、修正可能と思います。
簡単にいえば、「入力値のサンプルコード」と「出力値のサンプル文字列」があれば、他は不要です。

Answer 1

お騒がせしました。
オブジェクトを持つ配列のインデックスを行、プロパティを列とみなした場合、
特定の列の値がキーワードに合致している行を探し、その行の別のプロパティを参照する、
つまりExcel関数でいうVlookupをする方法が判ればよいことに気づきました。
毎度colModelという配列にアクセスしているので不細工ですが、とりあえず動作しましたので、
ご連絡します。
アドバイスを頂きまして有難うございました。

$("#list").jqGrid({
   data: dt
  ,datatype: "local"
  ,colNames:['CD', '名前', '年齢']
  ,colModel:[
    {index:'cd', name:'cd', width:'50px', align:'center'},
    {index:'name', name:'name', width:'100px', align:'left'},
    {index:'age', name:'age', width:'80px', align:'right', sorttype:'int'},
  ]
  ,height: 150
  ,multiselect: true
  ,caption: '一覧'
  ,rowNum: 5
  ,rowList: [5, 10, 20]
  ,viewrecords: true
  ,pager: 'pg01'
});

var ListToCSV = {
    export: function() {
        var csv_data = "";
        var j;
        var line;
        // 行データを取得する
        var sel_list = $('#list').getGridParam('data');
        j = 0;
        line = "";
        var header_list = $('#list').getGridParam('colNames');
        var col_list = $('#list').getGridParam('colModel');	// ##### この行追加
	for (var i = 0; i < sel_list.length; i++) {
		j = 0;
		line = "";
		keyOrder.forEach(function( key ) {
			// ##### ここから追加
			const col = col_list.find((p) => {
				return (p.name === key);
			});
			let intatr = false;
			if (col.sorttype){
				if (col.sorttype === "int"){
					intatr = true;
				}
			}
			// ##### ここまで追加
			if(sel_list[i][key]){
				var innerValue = sel_list[i][key]===null?'':sel_list[i][key].toString();
			} else {
				var innerValue = '';
			}
			// " を "" に置換
			var result = innerValue.replace(/"/g, '""');
			// , 又は \n　を含んでいる場合は ""で囲う
			//if (result.search(/("|,|\n)/g) >= 0)
			if (result.search(/("|,|\n)/g) >= 0 || intatr == false)	// ##### この行修正
				result = '"' + result + '"';
				if ( j != 0 ) line += ",";
				line += result;
				j ++;
			});
			console.log(">" + line);
			line += '\n';
			csv_data += line;
		}
	        // 頭にbomコードを付けた
	        var csv_data_sjis = "\uFEFF" + csv_data;
	        return csv_data_sjis;
	}
}

Answer 2

CSV

コードを見たところ、下記のように扱うようなので、

変数名	CSV上の扱い
keyOrder	列名
dt	Object.values() がセル値

その前提でコードを書きました。

• array to csv - JSFiddle - Code Playground

<pre></pre>
<script>
'use strict';
function toCsv (keys, body) {
  const header =  keys.map(key => '"' + key.replace(/"/g, '""') + '"').join();

  body = body.map(function (obj) {
    return this.map(key => '"' + String(obj[key]).replace(/"/g, '""') + '"').join(); 
  }, keys).join('\r\n');

  return header + '\r\n' + body;
}


const dt = [
  {cd:'A001', name:'鈴木', age:35},
  {cd:'A002', name:'佐藤', age:45},
  {cd:'A003', name:'"田中\n太郎"', age:55}
];

const keyOrder  = ['cd','name','age'];

document.querySelector('pre').append(toCsv(keyOrder, dt));
</script>

RFC4180準拠。

• CSVファイルの一般的書式 (RFC4180 日本語訳) - アルプス登山の玄関口・笠井家

new Map

連想配列の並び順が確保できなかったので、列の順番を付けるためにkeyOrderという配列を設けています。

順番が重要なら連想配列(という名の new Object)を使用するべきではありません。
new Map を使用しましょう。

• [JavaScript] オブジェクト, Map, WeakMap の使い分け方.md

Re: hatsuzo さん

Comments

[hatsuzo]

think49さん　貴重なお時間を頂き、アドバイス有難うございました。

配列からCSVへの変換、シンプルに書けるのですね。
また、CSVの形式について、””は必ずしも必須ではないということ判りました。

昔から数字を文字属性として扱ってExcelで開かせたいような場合は、敢えて””で囲うべきと思っていたのですが、実際にExcelでそのように加工したCSVを開いても、敢えてテキスト形式として列ごとに属性指定しない限りは、結局は数字になってしまうので、あまり意味が無い、とは思っていました。
しかし、受け取るアプリによっては、必ずしもそうではない可能性もあり、また、区切り文字がフィールド内に入ってしまう可能性もあるので、文字列を””で囲うのは意味の無いことではないと思っています。

また、mapを使ったことのない私の理解不足かもしれませんが、見出しの文字列がデータ配列の中ではなく、前述したプロパティの中に定義されているため、せっかくですが、今回の事例ではこの方法では難しいと思います。

[think49]

CSVは単純なテキストデータで、セルに書式の概念はありません。
MS ExcelはCSVインポートする際に書式を指定出来ますが、他アプリでどのように扱うかはアプリ依存になります。
セル値を"で括るのは、カンマ/改行/ダブルコーテーション等のメタキャラクタを含む事が出来る以上の効果はありません。

> 見出しの文字列がデータ配列の中ではなく、前述したプロパティの中に定義されているため、

プロパティが定義されたオブジェクトデータのサンプルコードがあれば、対応出来るかもしれません。

[hatsuzo]

有難うございました。
文言の意味がよく判っていないので、うまく説明ができていないみたいです。
jqGridとかCSVとかの本題ではないキーワードが登場してしまったので、判りにくくしていました。
要は、オブジェクトを持つ配列のインデックスを行、プロパティを列とみなした場合、
特定の列の値がキーワードに合致している行を探し、その行の別のプロパティを参照する、
つまりExcel関数でいうVlookupをする方法が判ればよいことに気づきました。
vlookup(キーの値、行列の範囲、返す列）
データ実体の行ごとに、何度もプロパティを参照しなくてはいけないので、
あまりスマートな方法ではないですが、なんとか参照はできそうです。