

javascript

[code]

        $(function () {
        "use strict";
        $('#gallery').each(function () {
    
        var $container = $(this),
            $loadMoreButton = $('#load-more'), // 追加ボタン
            addItemCount = 16,                 // 一度に表示するアイテム数
            addedd = 0,                        // 表示済みのアイテム数
            allData = [];                      // すべての JSON データ
    
    
    
        // JSON を取得し、initGallery 関数を実行
        $.getJSON('./data/content.json', initGallery);
    
        // ギャラリーを初期化する
        function initGallery (data) {
    
            // 取得した JSON データを格納
            allData = data;
    
            // 最初のアイテムを表示
            addItems();
    
            // 追加ボタンがクリックされたら追加で表示
            $loadMoreButton.on('click', addItems);
        }
    
        // アイテムを生成しドキュメントに挿入する
        function addItems () {
    
            var elements = [],
                // 追加するデータの配列
                slicedData = allData.slice(addedd, addedd + addItemCount);
    
            // slicedData の要素ごとに DOM 要素を生成
            $.each(slicedData, function (i, item) {
                var itemHTML =
                    '<div class="col-sm-6">'+
                        '<h4>' + item.title + '</h4>'+
                            '<div class="embed-responsive embed-responsive-' + item.aspect + '">' +
                                '<iframe class="embed-responsive-item" src="' + item.url + '"></iframe>' +
                            '</div>' +
                    '</div>';
                elements.push($(itemHTML).get(0));
            });
    
            // DOM 要素の配列をコンテナーに挿入
            $container.append(elements);
    
            // 追加済みアイテム数の更新
            addedd += slicedData.length;
    
            // JSON データがすべて追加し終わっていたら追加ボタンを消す
            if (addedd < allData.length) {
                $loadMoreButton.show();
            } else {
                $loadMoreButton.hide();
            }
        }
        });
        });
    
[/code]

json  
// JSON Document

[code]

        [
        {
        "title": "タイトル",
        "aspect": "16by9",
        "url": "youtubeのURL"
        },
        {
        "title": "タイトル",
        "aspect": "16by9",
        "url": "youtubeのURL"
        },
        {・・・・}
        ]
    
[/code]

これらのコードをhtmlで読み込みの部分で読み込みたいと思っています。しかし、実際には何も表示されない状況です。bootstrapを用いて並べるようにしています。どのように対処すればいいのでしょうか？


CC BY-SA 3.0
2016-01-24T09:50:49.883
21258
2016-01-24T09:50:49.883
9782
question
javascript json bootstrap
javascriptとjsonをもちいて要素を表示させたい