Jsonデータの値をHTMLに描画したい

Jsonデータを取ってきて
HTMLに描画したいのですが
Valueにあたる部分が表示されません。

具体的には
下記のように書くと
Keyは表示されるのですが

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <title>js_test</title>
8  <link rel="stylesheet" href="css/main.css">
9</head>
10<body>
11<div id="root"></div>
12<script src="js/main.js"></script>
13</body>
14</html>

JS
1let url = 'https://jsonplaceholder.typicode.com/users/1';
2
3fetch(url)
4    .then(response => response.json())
5    .then(data => {
6      console.log(data)
7      let contents = '';
8      Object.keys(data).map((value, i) => {
9        contents += `<div key={i}><p>Title:</p> ${value}</div>`;
10      });
11      document.getElementById("root").innerHTML = contents;
12    });

値（NameやIDなどの）を表示しようと下記のように書くと

JS
1
2let url = 'https://jsonplaceholder.typicode.com/users/1';
3
4fetch(url)
5    .then(response => response.json())
6    .then(data => {
7      console.log(data)
8      let contents = '';
9      Object.keys(data).map((value, i) => {
10        contents += `
11        <div key={i}><p>ID:</p> ${value.id}</div>
12        <div key={i}><p>Name:</p> ${value.name}</div>
13        `;
14      });
15      document.getElementById("root").innerHTML = contents;
16    });

写真のようになります。

こちらNameやIDなどの値を表示させるには
どのようにしたらいいでしょうか？

追記分写真

yambejp

2022/06/24 06:55 編集

https://jsonplaceholder.typicode.com/users/1 結果としてどういうHTMLになればよいのでしょうか？ divにkey属性を設定している意図はなんでしょうか？

退会済みユーザー

2022/06/24 07:17

画像はつぶれないように不要な部分はトリミングしてから貼ってもらえませんか。

Tomato_leaf

2022/06/24 07:27

＞結果としてどういうHTMLになればよいのでしょうか？ JsonにはNameやEmailなどのKeyに対する値があるかと思いますがそれらを描画したいと思っています。例えばJsonには "id": 1, "name": "Leanne Graham", "username": "Bret", とありますが 1、 Leanne Graham、 Bret などと表示させたいとおもっています。＞divにkey属性を設定している意図はなんでしょうか？ map関数などのループ処理ではユニークなkeyを持たせることを推奨していると聞いたことがあったのでそのように書いています。ですがなくてもいいようですね。

int32_t

2022/06/24 07:34

<p>ID:</p> や <p>Name:</p> は表示する必要ないのですか?

行動規範の内容に同意します

回答2件

ベストアンサー

最終形がわからないのでなんともいえませんが好意的に解釈してこう
※一部再帰処理を調整

javascript
1<script>
2window.addEventListener('DOMContentLoaded',async()=>{
3  const url="https://jsonplaceholder.typicode.com/users/1";
4  const data=await fetch(url).then(res=>res.json());
5  function get_datas(data){
6    let html="<ul>";
7    for(let i in data){
8      let val="";
9      if((data[i] instanceof Object)){
10        val=get_datas(data[i]);
11      }else{
12        val=data[i];
13      }
14      html+=`<li><dl><dt>${i}</dt>\n<dd>${val}</dd></dl>\n</li>\n`;
15    }
16    html+="</ul>";
17    return html;
18  }
19  root.innerHTML=get_datas(data);
20});
21
22
23</script>
24<div id="root"></div>

投稿2022/06/24 07:51

編集2022/06/24 08:00

yambejp

総合スコア114775

js
1let contents = Object.keys(data).map(
2    value => `<div><p>${value}:</p> ${data[value]}</div>\n`).join();

ひとまず、こういう感じのことがしたかったのかなと思いました。

コード中の value は、プロパティ名が入ったただの文字列です。プロパティの値を得るには data[value] のようにする必要があります。

投稿2022/06/24 08:03

編集2022/06/24 08:11

int32_t

総合スコア20841

Tomato_leaf

2022/06/24 09:57

ありがとうございます。 Object.keys(data).map((value, i) => { contents += `<div key={i}>${value}: ${data[value]}</div>`; }); とすることで表示できたのですが写真（追記）のように address: [object Object] company: [object Object] と2つの項目だけ、上手く表示させることができません。こちらの中身をすべて表示さるにはどのように書くべきでしょうか？

yambejp

2022/06/24 10:14

> [object Object] 私の回答に再帰処理を書いていますが、やりたいことはそれとは違うのでしょうか？

Tomato_leaf

2022/06/24 10:49

失礼しました。確かにうまくいきました！ありがとうございます。

行動規範の内容に同意します

あなたの回答