オブジェクトの内容全てをalertで表示したい

Question

var arr = [
  {name:"ポチ", age:"3"},
  {name:"タマ", age:"2"},
  {name:"モモ", age:"5"},
]

上記のオブジェクトを変数に代入後、
[name:"ポチ", age:"3"],[name:"タマ", age:"2"],[name:"モモ", age:"5”]
のように、代入した文字や数字を、alertで出力したいです。

初心者なので、あまり難しくない方法があればやってみたいなと思いますが・・・
何か方法はありますか？

---

自分で調べたり試したのは以下の4つです。

var a=5

alert(a);

var arr = ["a","b"]

alert(arr);

var arr = [
  {name:"ポチ", age:"3"},
  {name:"タマ", age:"2"},
  {name:"モモ", age:"5"},
]

alert(arr);

var arr = [
  {name:"ポチ", age:"3"},
  {name:"タマ", age:"2"},
  {name:"モモ", age:"5"},
];
var a = arr[0].name;
alert(a);

まず、変数の中身を知る方法を調べたら、
alertで表示できるということが分かりました。
（1番目のコードです）

試しに、もっと他のものも表示してみようと思い、
他のコードも作ってみました。（2番目と３番目のコードです）

すると１番目と２番目のコードでは中身が表示されるのですが、
３番目のコードの場合は、表示結果が
[object Object],[object Object],[object Object]
になってしまいます。

「もしかしたら、オブジェクトの場合は、代入した値をアラート表示すること自体
できないのかな？」と思い、また調べて新しいコードを作ってみました（4番目のコードです）
それで、代入されたオブジェクトの”一部”を取り出し表示できるらしいということまではわかりました。

でも、知りたかったこと（オブジェクト”全て”を出力する方法）は、
まだ分からないので教えて頂きたいです。宜しくお願い致します。

Answer 1

色々あります。
console

console.log()が代表的ですが、場合によりconsole.table()のほうが見やすい時もあります。
まぁ色々試してみてください。
alert()はデバッグというよりは本来ユーザーへの通知のために出すものと思います。

あーでも、
JSON.stringify()のほうが”表示”という意味ではよいかもしれませんけど。

大目的によって使い分けてください。

Comments

[popipi_1]

複数の方法があるのですね！
JSON.stringify()、console.table()も今後勉強して使ってみたいです。
ありがとうございます。

[m.ts10806]

alertで出力したい　ならconsoleじゃ出来ませんよ。
consoleに出力するだけですから。
MDNのリンク貼ったのですけど見ました？まず使ってから解決済みにしてもらいたいのですけど。

[popipi_1]

JSON.stringify()、console.table()は、昨日MDNを見ましたが私の知識不足で理解できませんでした。
（でも、console.table()の方は、試しにコードに入れてみたら動きました。見やすくて便利でした！）
まだ勉強を始めたばかりで、コードや解説を読んでも、知らない外国語の文章のように…何が書いてあるのか全体的に分からないということがよくあります。
皆様にご提案頂いた方法を、自分でも色々調べて試してみたいと思う反面、全ての方法をすぐに試してみることができない場合があり申し訳ないです。

[m.ts10806]

単にJSONオブジェクトをJSON.stringify()の引数に入れて結果を受け取り、alert()に入れるだけかと。（手元では確認できてます）

[popipi_1]

再び調べ直しました。
「JSON」「JSONオブジェクト」「JSON.stringify()」「引数」
それぞれの言葉の意味が分からなかったので、ひとつずつ別々に調べていきました。
その結果、JSON.stringify()を使って表示できました！！
これは・・・まさに私が質問していた「alert」での表示だったのですね！
ありがとうございました。

[m.ts10806]

いえあの、私、まさに「使い方」が書かれたリファレンス（要は仕様書・ドキュメント）のURLを回答に提示してるわけですけど。

[popipi_1]

JSON.stringify()、console.table()は、MDNを見ましたが私の知識不足で理解できませんでした。
まだ勉強を始めたばかりで、コードやMDNの解説を読んでも、知らない外国語の文章のように…何が書いてあるのか全体的に分からないということがよくあります。
また、難しそうならば「代替案を使ってみよう」とか、「もう少し勉強が進んだ段階で勉強しよう」と一旦保留にしたい場合もあります。
ご提案頂いた方法全てを、すぐに全て理解して試してみることができない場合が今後もあると思います。
m.ts10806さんが、それで気に障ったり、解決後も色々気になったりするのであれば、今後私への回答はしないで頂いて結構です。もしくは、「そんな初心者はこの掲示板で質問自体するな」 と思うならそうストレートに言っても頂いても構いません。

[m.ts10806]

読んで理解できないのは結構ですが分からないことを言ってもらわないとこちらも説明しようがありません。
そもそも提示した情報を吟味したかどうかも伝えないまま勝手に自分で別の情報を見に行くというのは初心者かどうか関係なくコミュニケーションロスを起こしているのでそれ以前の問題です。
それにプログラムは書いた通りにしか動かないので、誰かの解釈で書かれたものを鵜呑みにするのは危険です。
自分にとって分かりやすいと思うものこそ疑った方がいいです。

[think49]

> 「JSON」「JSONオブジェクト」「JSON.stringify()」「引数」
> それぞれの言葉の意味が分からなかったので、ひとつずつ別々に調べていきました。

私はむしろ、与えられた情報(MDN)一つで満足せず、分からない単語を一つ一つ調べる姿勢に好感を持ちました。
teratailのJavaScript質問者の中で「分割統治法」を習得している人は多くありません。
ゲーム的には獲得経験値2倍(パッシブスキル)に相当する成長促進剤なので、大切にして下さい。

> また、難しそうならば「代替案を使ってみよう」とか、「もう少し勉強が進んだ段階で勉強しよう」と一旦保留にしたい場合もあります。

分からない内容が多すぎる場合は、基盤となる知識が不足しているので、無理に今理解しようとせず、保留する方針で良いと思います。
「引数」を理解していないのは問題なので、早めの習得をお勧めしますが…。
https://jsprimer.net/basic/function-declaration/
私見としては「JavaScript Primer」の「例外処理」まで学習すれば、ECMAScriptの専門用語を一通り理解したといって良いと思います。

MDNも有用なサイトですが、章の前後関係が分かりづらく、今回のように遡って前の章を学習する時には活用しづらいきらいがあります。
他、DOM系は https://uhyohyo.net/javascript
仕様書系は https://gist.github.com/think49/689d7d1e5c5fd0c5ca266e4c66b0b35e#%E5%8F%82%E8%80%83%E8%B3%87%E6%96%99
で概ね網羅できます。

[m.ts10806]

think49さん
度々フォローありがとうございます。
もう少し「どう読んでどう分からなったのか」を具体的にしてほしいなとは思います。
こちらも「そんなことも知らないの」と責める気は毛頭なく、具体的に深堀して聞いてほしいですし。

Answer 2

ブラウザでF12キーを押すと表示される開発者ツールのコンソールでconsole.logを使いましょう。

Comments

[popipi_1]

早速、今コンソールを初めて使ってみました。
とても分かりやすい説明のおかげでスムーズにできました！
ありがとうございます。