Javascriptにおけるオブジェクトの初期化がうまくいきません

Question

前提・実現したいこと

c3.jsを使ってデータベースから取得した値を使ってグラフを作成しようと思っています。
データベースの値は、サーバーサイドのJavascriptで作成し、その戻り値をc3.jsのオブジェクトに渡して表示することを考えています。

発生している問題・エラーメッセージ

サーバーサイドの値の取得自体はできており、個別の変数として呼び出し元に返すことは可能なのですが、値が可変のため、c3.jsに渡す時のオブジェクトの形（配列要素を含む）で渡そうと思っています。そこで、同じオブジェクトをクライアント側で参照できた方法で、値をセットしているのですが、うまくいきません。

Cannot read property "columns" from undefined```

該当のソースコード

サーバーサイドスクリプトはintramartというフレームワークを使用しています。
ボタンをクリックした時にデータベースの値を参照してグラフ表示します。

	<imart type="jsspRpc" name="asinfo" page="jssp_rpc_test/sample1" />
	<script language="JavaScript">
	// c3.jsで使用するオブジェクトの形式（データベースで参照する内容と値は異なるが構造は同じ）
	const chart00 = ({
		data: {
			columns: [
				['data1', 430, 200, 100, 400, 150, 250],
				['data2', 130, 100, 140, 200, 150, 50]
			],
			type: 'bar'
		},
		bar: {
			width: {
				ratio: 0.5
			}
		},
		axis: {
			x: {
				type: 'category',
				categories: ['1月', '2月', '3月', '4月', '5月', '6月']
			}
		}
	});
	function execute(){
		try{
			var chart = new Object();
			var result = asinfo.getHarmony(args);	// chart00と同じ型のオブジェクトを返す
			chart = c3.generate(result);
		//	chart = c3.generate(chart00);		上記２行をこれに置き換えると正常表示
		}
		catch(ex){
			alert(ex.message);
			return;
		}
	}
	</script>
	</imart>
	<input type="button" value="実行（同期）" onclick="execute();">
	<div id="chart" style="border:1px solid gray; text-align:right; width:700px;"></div>

function getHarmony( args ){
	var db = new SharedDatabase('as400');
	var sql = "select su2nend, " +
			"sum(su2ur01) as ur1, sum(su2ur02) as ur2, sum(su2ur03) as ur3, " +
			"sum(su2ur04) as ur4, sum(su2ur05) as ur5, sum(su2ur06) as ur6, " +
			"sum(su2ur07) as ur7, sum(su2ur08) as ur8, sum(su2ur09) as ur9, " +
			"sum(su2ur10) as ur10, sum(su2ur11) as ur11, sum(su2ur12) as ur12, " +
			"sum(su2ar01) as ar1, sum(su2ar02) as ar2, sum(su2ar03) as ar3, " +
			"sum(su2ar04) as ar4, sum(su2ar05) as ar5, sum(su2ar06) as ar6, " +
			"sum(su2ar07) as ar7, sum(su2ar08) as ar8, sum(su2ar09) as ar9, " +
			"sum(su2ar10) as ar10, sum(su2ar11) as ar11 ,sum(su2ar12) as ar12  " +
			"from mylib.uritrn " +
			"where su2nend >= 2017 " +
			"group by su2nend " +
			"order by su2nend";
	var ret = db.select(sql);
	var graph = new Object(); 
	for (var i = 0; i < ret.countRow; i++) {
		graph['data']['columns'][i][0] = ret.data[i].su2nend;	// ここでエラー発生と思われます
		graph['data']['columns'][i][1] = ret.data[i].ur1;
		graph['data']['columns'][i][2] = ret.data[i].ur2;
		graph['data']['columns'][i][3] = ret.data[i].ur3;
		graph['data']['columns'][i][4] = ret.data[i].ur4;
		graph['data']['columns'][i][5] = ret.data[i].ur5;
		graph['data']['columns'][i][6] = ret.data[i].ur6;
		graph['data']['columns'][i][7] = ret.data[i].ur7;
		graph['data']['columns'][i][8] = ret.data[i].ur8;
		graph['data']['columns'][i][9] = ret.data[i].ur9;
		graph['data']['columns'][i][10] = ret.data[i].ur10;
		graph['data']['columns'][i][11] = ret.data[i].ur11;
		graph['data']['columns'][i][12] = ret.data[i].ur12;
	}
	graph['data']['type'] = 'bar';
	graph['bar']['width']['ratio'] = 0.5;
	graph['axis']['x']['type'] = 'category';
	graph['axis']['x']['categories'][0] = "1月";
	graph['axis']['x']['categories'][1] = "2月";
	graph['axis']['x']['categories'][2] = "3月";
	graph['axis']['x']['categories'][3] = "4月";
	graph['axis']['x']['categories'][4] = "5月";
	graph['axis']['x']['categories'][5] = "6月";
	graph['axis']['x']['categories'][6] = "7月";
	graph['axis']['x']['categories'][7] = "8月";
	graph['axis']['x']['categories'][8] = "9月";
	graph['axis']['x']['categories'][9] = "10月";
	graph['axis']['x']['categories'][10] = "11月";
	graph['axis']['x']['categories'][11] = "12月";
	return graph;

試したこと

//	var result = asinfo.getHarmony(args);	// chart00と同じ型のオブジェクトを返す
//	chart = c3.generate(result);
	chart = c3.generate(chart00);		上記２行をこれに置き換えると正常表示

constで定義した中身を表示したところ、当然正常なので、サーバーサイド側だけの問題であることは間違いないのですが、
この時、クライアント側で、const chart00 として定義してあるオブジェクトを直接参照すると、値が参照できますが、その値をコピーしたオブジェクトを参照するとエラーになります。

	alert(chart00['data']['type']);        // とした時は、正常
	alert(chart['data']['type']);          // とした時は、エラー

下記については、クライアントサイドからのエラーメッセージになりますが、

Cannot read property "type" from undefined```

というエラーが、サーバーサイド側で値をセットするのと同じく出ますので、最初はイントラマート固有の問題かと思ったのですが、おそらくオブジェクトの扱い方、初期化の問題ではないかと思います。いろいろネット上で検索しても私の理解の範疇を越えており、よく判りません。

オブジェクトの初期化の方法についてアドバイス頂けたら有難いです。
よろしくお願いします。

Comments

[kuma_kuma_]

質問者様
> chart = c3.generate(result);
ここで一度止めて開発コンソールでresultの中身を確認されては？
あと気になるのが
> var graph = new Object();
は事前に
> var graph = {};
> graph['data'] = {};
> graph['data']['columns'] = [];
とか事前準備の設定しないと...

[hatsuzo]

kuma_kuma_様
コメントありがとうございます。

初期化が必要なのですね。
ご指摘のように、オブジェクトの部分は
> graph['data'] = {};
配列の部分は
> graph['data']['columns'] = [];
というように全て初期化してみました。
オブジェクトの部分はうまく取り出すことが出来ていますので、問題ないのですが、相変わらず、配列の部分がうまくセットできません。
二次元配列を一次元と見なして、
for(var i = 0 ; i < ret.countRow ; i++){
graph['data']['columns'].push(ret.data[i].uri01);
graph['data']['columns'].push(ret.data[i].uri02);
}
という具合に初期化したところ、
他の一次元配列の部分は問題なく初期化できたのですが、
二次元配列の部分が、
alert(graph['data']['columns'][0][5])
のように参照したところ、エラーになりますので、
配列の要素数分を予め0クリアしてから、値をセットしようとしたところ、
0をセットするところで、
Cannot set property "0.0" of undefined to "0"
のエラーが出てしまいました。

for(var i = 0 ; i < ret.countRow ; i++){
var wrk = [];
wrk.push(ret.data[i].uri01);
wrk.push(ret.data[i].uri02);
graph['data']['columns'].push(wrk);
}
のように、一旦一次元にpushしてからpushし直したところ、うまく動作しました。

手を抜いてはダメですね。
どうも有難うございました。

Answer 1

オブジェクトの初期化の方法について

プロパティを深く掘り下げたオブジェクトを作るのであれば、
オブジェクトリテラルで初期化するのがスマートです。`

var graph = {
  data:{
    columns:[], // ココは forループで追加する。
    type:"bar",
  }
  bar :{
    width: {
      ratio: 0.5
    }
  },
  axis: {
    x: {
      type: "category",
      categories: [
        "1月", "2月", "3月", "4月", "5月", "6月",
        "7月", "8月", "9月", "10月", "11月", "12月"
      ]
    }
  }
};

for (var i = 0; i < ret.countRow; i++) {
  var oj = ret.data[i];
  graph.data.columns[i] = [
    oj.su2nend,
    oj.ur1, oj.ur2, oj.ur3, oj.ur4, oj.ur5, oj.ur6,
    oj.ur7, oj.ur8, oj.ur9, oj.ur10, oj.ur11, oj.ur12
  ];
}
console.log( graph );

Comments

[hatsuzo]

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

シンプルにできるのですね。....
まだまだ修行が足りないこと痛感しました。