Javascriptで配列の要素をオブジェクト化する方法

Question

Javascript内で、Chart.js用の表示用のオブジェクトを生成したいと考えております。
コードの「test_array_01」の形式を作成したいと考えております。
alert文で要素の一つを表示すると、[object Object]が表示されます。
これに対して、「test_array_02」では、
alert文で要素の一つを表示すると、{x:300,y:3}のように文字列が表示されます。

目的としては、test_array_01の形式で、配列を作成したいと考えております。
文字列ではなくObjectの配列を作る事が目的です。
値を動的に読ませたいので、別の配列から値を渡す必要があります。
test_array_02に入れる中身として、x_arrayとy_arrayの値を渡すにはどうすればよいでしょうか？

// こちらの配列を作成したい。
var test_array_01 = new Array();
test_array_01.push({x:100,y:200});
test_array_01.push({x:110,y:210});

alert(test_array_01[0]); // [object Object]

// 別の配列から値を読み込ませたいが、
// 文字列の配列になってしまう。

var x_array = new Array(1,2);
var y_array = new Array(151,168);

var test_array_02 = new Array();
test_array_02.push('{x:'+x_array[0]+',y:'+y_array[0]+'}')
test_array_02.push('{x:'+x_array[1]+',y:'+y_array[1]+'}')

alert(test_array_02[0]); // [object Object]{x:300,y:3}

Comments

[退会済みユーザー]

「test_array_02に入れる中身として、x_arrayとy_arrayの値を渡すにはどうすればよいでしょうか？」
これで既に出来ているように思えるのですが
「var test_array_02 = new Array();
test_array_02.push('{x:'+x_array[0]+',y:'+y_array[0]+'}')
test_array_02.push('{x:'+x_array[1]+',y:'+y_array[1]+'}')」

Answer 1

alertは文字列しか表示できないので、中身を確認したいのであればconsole.logで確認してください。

【ChromeのデベロッパーツールでJSをデバッグする方法(2018年版) - ICS MEDIA】
https://ics.media/entry/11735

【デバッグに大活躍! JavaScriptのconsole.logで値を表示しよう | 侍エンジニア塾ブログ | プログラミング入門者向け学習情報サイト】
https://www.sejuku.net/blog/27205

---

追記：

var x_array = [ 1, 2 ];
var y_array = [ 151, 168 ];

var test_array_02 = [];
var i, obj;
for ( i = 0; i < x_array.length; i++ ) {
	obj = {};
	obj.x = x_array[ i ];
	obj.y = y_array[ i ];
	test_array_02.push( obj );
}
console.log( test_array_02 );

とか、

const x_array = [ 1, 2 ];
const y_array = [ 151, 168 ];

const test_array_02 = x_array.reduce( ( pre, curr, index )=> {
	pre.push( {
		  x: curr
		, y: y_array[ index ]
	} );
	return pre;
}, [] );
console.log( test_array_02 );

とか。

Comments

[IC445]

ご助言ありがとうございます。
console_logで両方の配列情報の表示を行いました。
引き続き、よろしくお願いいたします。

// console_log(test_array_01[0])
​<prototype>: {…}
​​__defineGetter__: function __defineGetter__()
​​__defineSetter__: function __defineSetter__()
​​__lookupGetter__: function __lookupGetter__()
​​__lookupSetter__: function __lookupSetter__()
​​constructor: function Object()
​​hasOwnProperty: function hasOwnProperty()
​​isPrototypeOf: function isPrototypeOf()
​​propertyIsEnumerable: function propertyIsEnumerable()
​​toLocaleString: function toLocaleString()
​​toSource: function toSource()
​​toString: function toString()
​​valueOf: valueOf()
​​​length: 0
​​​name: "valueOf"
​​​<prototype>: function ()

// console_log(test_array_02[0])
x: 100
​y: 200

[IC445]

下記の形でオブジェクト化を行うことで解決いたしました。

var str = '{x:'+x_array[0]+',y:'+y_array[0]+'}';
var obj = (new Function("return " + str))();
data_array_js.push( obj );

[m.ts10806]

質問にある定義でも下記で取り出せるはずです
alert(test_array_01[0].x);
alert(test_array_01[0].y);

というか、
JSON.stringify(test_array_01)
で解決では。（ちょっと違うか。見た目だけ揃える感じ）
Chart.jsにそのまま突っ込めるかどうかまでは分からないですけど。
遠回しな作り方をしているようにも思います。

Answer 2

配列とオブジェクトの違いを理解した上で使いましょう。

• teratail:配列とオブジェクトの違いを教えてください。。。

配列もオブジェクトの一種です。
一種ではありますが、上記の回答にもある「特殊なオブジェクト」であるため、本来のオブジェクトと全く同じような扱い方にはなりません。
（それこそPHPでもJavaでも何でもいいのでJavaScript以外でオブジェクト指向を学んだ方が良いかも知れません）