apiで取得したjsonデータ写真url20個をhtmlで表示したい

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
フロントエンドの勉強をしているのですが、apiからjson形式で送られてくるデータをhtmlとして表示したいのですが、、、どうすれば良いでしょうか

###調べたこと
jsonからhtmlへの変換について調べましたが難しくてわかりませんでした、、

該当のソースコード

php
1<!DOCTYPE html>
2<html>
3<body>
4<div class="container">
5 <img src="<!--ここに取得したURLを置きたい-->">
6</div>
7</body>
8</html>

javascript
1function init() {
2 api(
3  function(response) {
4  //ここになんと記入すれば良いかがわからないです
5  }
6  );
7}

json
1{
2  "data": [
3    {
4      "media_url": "test.com/1",
5      "id": "test1"
6    },
7    {
8      "media_url": "test.com/2",
9      "id": "test2"
10    },
11    {
12      "media_url": "test.com/3",
13      "id": "test3"
14    },これが後17個続く

miyabi_pudding

2019/12/24 09:31 編集

まず、その"response"をconsole.logなどでログで中身みたとき、しっかりとデータは入っていましたか？入っていたなら、どのようなデータがきたかのログも質問文の中に記載ください。あと、javascriptの質問タグもお付けください。

mituto

2019/12/24 09:32

コメント頂いてありがとうございます！入っていました、レスポンス内容が上に記載されているjsonです。

miyabi_pudding

2019/12/24 09:33

なるほど。わかりました。回答に移ります。

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

回答1件

ベストアンサー

dataを走査して、imgとして、入れていけばいいかと。

javascript
1const imgWrapper = document.querySelector('.container');
2
3function init() {
4  api(function(response) {
5    const jsonData = JSON.parse(response);
6    jsonData.data.forEach(val => {
7      const img = new Image();
8      img.id = val.id;
9      img.src = val.media_url;
10      imgWrapper.appendChild(img);
11    });
12  });
13}
14