任意のハッシュタグを持つ投稿をインスタグラムから取得して、ページに一覧で表示させたい

ハッシュタグを使用したキャンペーン等の企画ページを作成したいと思っています。
その際に、任意のハッシュタグのインスタグラムの画像をWEBページに一覧で表示させたいです。

Instagram Graph Apiで任意のハッシュタグ画像のJSONデータを取得することができたのですが、
それを表示させるコードが分からなくて困っています。

コード

{"data": [
    {
      "id": "179630720..........",
      "media_url": "https://scontent-nrt1-1.cdninstagram.com/..........",
      "permalink": "https://www.instagram.com/..........",
      "media_type": "IMAGE"
    },

{
      "id": "179607613..........",
      "permalink": "https://www.instagram.com/........../",
      "children": {
        "data": [
          {
            "media_url": "https://scontent-nrt1-1.cdninstagram.com/..........",
            "permalink": "https://www.instagram.com/..........",
            "id": "18118760.........."
          },
          {
            "media_url": "https://scontent.cdninstagram.com/..........",
            "permalink": "https://www.instagram.com/..........",
            "id": "17859724.........."
          }
        ]
      },
      "media_type": "CAROUSEL_ALBUM"
    },
.
.
.
.

上記JSONファイルをページ内に表示させようと
いろいろ調べて下記のコードに辿りつき、
『"media_type": "IMAGE"』は画像が表示されるのですが
『"media_type": "CAROUSEL_ALBUM"』の場合、画像が表示されません。

JavaScriptは初心者で、ほとんど理解ができていません。
どのようにスクリプトを記載したら表示されるようになるかご教示いただければ幸いです。
よろしくお願いいたします。

コード

<script>
$(function(){
    $.ajax({
        type: 'GET',
        url: 'https://graph.facebook.com/v5.0/..........',
        dataType: 'json',
        success: function(json) {
                
            var html = '';
            var insta = json.data;
            for (var i = 0; i < insta.length; i++) {
                html += '<li class="col col-xs-6 col-sm-6 col-lg-2"><a href="' + insta[i].permalink + '" target="_blank"><img src="' + insta[i].media_url + '"></a></li>';
            }
              $("#instafeed02").append(html);            
        },
        error: function() {

        //エラー時の処理
        }
    });
});    
</script>

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

回答1件

ベストアンサー

動くかな？
success: function(json) {
...
},

のところを、
success: hoge (json),

付け足すプログラムは、

js
1function hoge (json) {
2  let ul = document.createElement ('ul');
3  
4  function fuga (data, ul) {
5    for (let rec of data) {
6      let { id, media_url, permalink, media_type, children } = rec, li, a, img;
7      ul.appendChild (li = document.createElement ('li'));
8      li.className = 'col col-xs-6 col-sm-6 col-lg-2';
9      switch (media_type) {
10        case 'IMAGE' :
11          li.appendChild (a = document.createElement ('a'))
12            .appendChild (img = document.createElement ('img')).src = media_url;
13          a.href = permalink;
14          img.alt = media_url;
15          break;
16        case 'CAROUSEL_ALBUM' :
17          li.appendChild (a = document.createElement ('a'))
18            .href = permalink;
19          a.textContent = id;
20          li.appendChild (fuga (children.data, ul.cloneNode (false)));
21          break;
22        default:
23          li.appendChild (a = document.createElement ('a'))
24            .href = permalink;
25          a.textContent = id;
26      }
27    }
28    return ul;
29  }
30
31  let list = fuga (json.data, document.createElement ('ul'));
32  document.querySelector ('#instafeed02').appendChild (list);
33}