おしえて

【JavaScript】オブジェクト型の変数の値を全て出力したい

解決済

質問者：ZZ-TOP
質問日時：2019/01/13 17:48
回答数：2件

お世話になります。
現在、パソコンスクールでJavaScriptの勉強をしています。

スクールで使っているテキストは以下の通りです。

確かな力が身につくJavaScript「超」入門
https://bit.ly/2FoZ1GK

このテキストのセクション3-10(P133、P134)に
配列型の変数のプロパティをすべて出力するコードの説明があり、
※下の段、配列型の変数のサンプル3-10の通りです

こちらは問題ないのですが、次のセクションの3-11(P143)に
オブジェクト型の変数のプロパティを全て取得する方法が以下のように記載されています。

for (var p in jsbook) {
console.log(p + '=' + jsbook[p]); }

このコードを利用して配列型と同様に、全てのプロパティをhtmlページ上に
出力するコードを使って自分なり作ってみました。

ですがコンソールには出力できるのですが、
htmlのページ上に出力する方法がわかりませんでした。

スクールで先生に質問してみたところ、
「配列型と同じ方法でappendChildを利用するとhtml上に出力することが出来る」
とのお話でした。

ですが、自宅に帰ってコードを比較してみたところ、配列型の方は
以下の特徴があるため、forを使った条件式を利用してタグの子要素として出力できます。

１）lengthプロパティを利用してプロパティの個数(=最後のインデックス番号)が取得できる
２）インデックス番号は「0」から始まる整数で最終の番号もlengthプロパティ把握できている

ですが、オブジェクト型の方はセクションの3-11(P143)のコードで
すべてのプロパティが出力されるようですが、プロパティの個数がわかりません。

おまけに、オブジェクト型では連想配列名でヒモ付けされているため、
配列型のようにforを使った条件式で整数の値を順番に入力していくような方法が
使えません。

手作業でプロパティを展開し取得するのではなく、
本当にオブジェクト型もセクションの3-11(P143)のコードを利用して
全てのプロパティを出力することが出来るのでしょうか？

↓セクションの3-11(P143)のコード
for (var p in jsbook) {
console.log(p + '=' + jsbook[p]); }

すいませんが、詳しい方、説明の上手な方、

もし、オブジェクト型のコードも例文のコードを利用して、
手作業でプロパティを展開することなく、
全てのプロパティを取得し、Htmlのページ上に出力する方法があるのでしたら、
動作するコードを教えて下さい。

※出来ない場合、できない理由も教えて頂ければうれしいです。

お手数ですが、よろしくお願いします。
配列型とオブジェクト型のサンプルコードは以下の通りです。

配列型の変数のサンプル3-10
<script>
var todo = ['デザインカンプ作成', 'データ整理', '勉強会申し込み', '牛乳買う'];
for (var i = 0; i < todo.length; i++) {
var li = document.createElement('li');
document.getElementById('list').appendChild(li);
}
//「todo」の中のlengthプロパティを使って個数を数えている
console.log(todo.length);
</script>

html側
<section>
<h1>やることリスト</h1>
<ul id="list">
</ul>
</section>

オブジェクト型の変数のサンプル3-11-自作
<script>
var jsbook = { title: 'JavaScript入門', price: 2500, stock: 3};
for (var p in jsbook) {
document.getElementById('AAA').textContent = (p + '=' + jsbook[p]);

//コンソールは全部出る
console.log(p + '=' + jsbook[p]);
}
</script>

html側
<section>
<br>3-10の子要素を使う方法は左辺の表記が違うのでわからない。<br>
<article id="AAA">コンソールは全部出る。
</article>
</section>

追記
テキストのページ数やチャプターが記載されていますが、
こちらで見やすくするためだけのものです。
特に意味はありません。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： babu_babu_baboo
回答日時：2019/01/13 19:52

<!DOCTYPE html>

- 1
- 件

通報する

この回答へのお礼

ありがとう

ご解答頂きありがとうございます。

配列型の方は以下の通りで良いのですが、
document.getElementById('list').appendChild(li);

オブジェクト型の場合は、こんなのが必要なんですね。
target.appendChild (li);

以下のところまでやってみたのですが、
全く表示されないので、出来ないのだと思っていました。

for (var p in jsbook) {
　　var li = document.createElement('li');
　　li.textContent = (p + '=' + jsbook[p]);
//　　target.appendChild (li);

>
let t2 = document.getElementById('list2');
～

の方は何をやっているのか今の私では全くわからないです(笑)。

今回は解答して頂きありがとうございます。
機会がありましたら、またお願いします。

※質問はしばらく開けておきます。