jquery ajax json 複数ファイルをまとめる方法

Question

jqueryでajaxを使いjsonファイルを読み込んでいます。
新着情報→sample_news.json
ピックアップ→sample_pickup.json
２つのjsonファイルの構成は同じです。
同じ記述なのでうまくまとめられないかと思い試行錯誤しています。
現状は下記のように2つにわけているのですが、スマートな書き方・考え方を教えていただけないでしょうか。

  $.ajax({
    url: 'sample_news.json',
    type: 'GET',
    dataType: 'json'
  })
  .then(
    function (data) {
      const news = data;
      for (let i in news) {
        if (i < 4) {
          $('#list-news').append("<li>data[i].id</li>");
        }
      }
    }
  );

  $.ajax({
    url: 'sample_pickup.json',
    type: 'GET',
    dataType: 'json'
  })
  .then(
    function (data) {
      const pickup = data;
      for (let i in pickup) {
        if (i < 2) {
          $('#list-pickup').append("<li>data[i].id</li>");
        }
      }
    }
  );

Comments

[yambejp]

具体的なデータのサンプルがないとどう結合できるか
なんとも言えません

[退会済みユーザー]

yambejp様
申し訳ありません。今後はもう少し気をつけます。

Answer 1

getJSON だけでもいい気もしますがとりあえず
https://api.jquery.com/jQuery.getJSON/

  $.extend({
    getJsonNews: function(url, func) {
      $.getJSON(url).done(function(data) {
        for (let i in data) {
          func(i, data);
        }
      });
    }
  });

  $.getJsonNews('sample_pickup.json', function(i, pickup) {
    if (i < 2) {
      $('#list-pickup').append(`<li>${pickup[i].id}</li>`);
    }
  });

Comments

[退会済みユーザー]

ありがとうございます!
apiとの連携があり、ajaxを使用する予定でした。
こちらの方法も勉強になりました。ありがとうございました！

[x_x]

リンク先は読みました？

Answer 2

各jsonが配列なら、こうやってconcatしてください

$(function(){
  $.when(
    $.ajax({
    url:"hoge.json",
    dataType:"json",
  }),
    $.ajax({
    url:"fuga.json",
    dataType:"json",
  })).then(function(data1,data2){
    var d=data1[0];
    d=d.concat(data2[0]);
    console.log(d);
  });
});

Comments

[退会済みユーザー]

足りない情報にもかかわらず、ありがとうございます。
concat/$.whenの使い方、調べて復習しておきます。
ありがとうございました！

Answer 3

違う部分は i の個数制限と append 先のセレクタですよね。
それぞれと data をパラメータとして受け取る関数を用意して、ajax の .then() の function の中でそれを呼び出せばよいのでは？

  var func_datappend = function(data, target, count) {
    const values = data;
    for(let i in values) {
      if (i < count) {
        $(target).append("<li>" + data[i].id + "</li>");
      }
    }
  };

  $.ajax({
    url: 'sample_news.json',
    type: 'GET',
    dataType: 'json'
  })
  .then(
    function (data) {
      func_dataappend(data, '#list-news', 4);
    }
  );

  $.ajax({
    url: 'sample_pickup.json',
    type: 'GET',
    dataType: 'json'
  })
  .then(
    function (data) {
      func_dataappend(data, '#list-pickup', 2);
    }
  );
  

※もう少し頑張ると $.ajax の呼び出しも共通化できそうではありますが、Deffered() 絡むから面倒か？

Comments

[退会済みユーザー]

ありがとうございます。
また、丁寧に解説もいれていただき大変参考になりました。
パラメータや関数の辺りが整理しきれていないので、改めて勉強することにいたします。
ありがとうございました！