【jQuery】jsonファイルを複数読み込み、各ファイルの1つ目に記述したデータのみ取得してスライダーを作成する方法

1 コーディングテクニックの実装内容
2 コーディングテクニックの使いどころ
3 実装難易度・必要なスキル
4 JavaScriptの記述内容
5 実装のポイント

コーディングテクニックの実装内容

今回はWeb制作におけるjsonのテクニックに関する内容です。複数のjsonファイルを読み込み、各ファイルの1つ目に記述したデータのみ取得してスライダーを作成するテクニックを紹介します。

コーディングテクニックの使いどころ

全てのjsonファイルが同じ項目で記述されている必要がありますが、直接jsonファイルを編集できない状況で役に立つと思われます。

実装難易度・必要なスキル

実装所要時間:20分程度
難易度:初心者コーダーでも実装可能

>> DEMOはこちらから！（View Demo）

>> View Demo(English Page)

>> ページの読み込みが遅い場合はこちら

JavaScriptの記述内容

実装に必要なスクリプトとスタイルはこちらになります。

$(function(){
  let jsonList = function(json, target) {
    for(let i=0; i < 1; i++){
      let code = ('<a href="' + json[i].link + '"><div"><img src="' + json[i].img + '"></div><p>' + json[i].text + '</p></a>');
      let element = document.getElementById(target);
      element.insertAdjacentHTML("beforeend", code);
    }
  };

  $.ajax({
    url: '1.json',
    type: 'GET',
    dataType: 'json',
  })
  .then(
    function (json) {
      jsonList(json, 'list01');
    }
  );

  $.ajax({
    url: '2.json',
    type: 'GET',
    dataType: 'json',
  })
  .then(
    function (json) {
      jsonList(json, 'list02');
    }
  );

  $.ajax({
    url: '3.json',
    type: 'GET',
    dataType: 'json',
  })
  .then(
    function (json) {
      jsonList(json, 'list03');
    }
  );

  $.ajax({
    url: '4.json',
    type: 'GET',
    dataType: 'json',
  })
  .then(
    function (json) {
      jsonList(json, 'list04');
    }
  );

  $.ajax({
    url: '5.json',
    type: 'GET',
    dataType: 'json',
  })
  .then(
    function (json) {
      jsonList(json, 'list05');
    }
  );

  $.ajax({
    url: '6.json',
    type: 'GET',
    dataType: 'json',
  })
  .then(
    function (json) {
      jsonList(json, 'list06');
    }
  );

});

$(window).on('load', function(){
setTimeout(function(){
  $(".swiper-container").addClass("show");

  var mySwiper1 = new Swiper('.swiper1', {
  paginationClickable: true,
  slidesPerView: 3,
  loop: true,
  speed: 1000,
  spaceBetween: 20
  })
},100);

});