【jQuery】jsonからアイテムをランダム出力

例えばAから6個、Bから4個それぞれランダムで選ぶとき。
ajaxでjsonを読み込みます。

html

  <p>今日のスムージーは・・・</p>
  <div id="result"></div>
  <p>で作ります！！！</p>

javascript

$(function () {

  //アイテムをランダムで出す
  var $result = $('#result');

  $.ajax({
    type: 'GET',
    url: 'item.json',
    dataType: 'json'
  }).then(
    function (data) {
      console.log('成功');

      var LIMIT_NUM = 10; //上限

      function choiceItem(fruitsItem) {
        var FRUITS_NUM = fruitsItem;
        var VEGETABLES_NUM = LIMIT_NUM - FRUITS_NUM;
        var itemChoiceArray = []; //itemのIDを入れる

        function itemChoice(allLen, maxNum, arrayI) {
          var randoms = []; //ランダムなarrayを入れる
          // 最小値と最大値
          var min = 0;
          var max = maxNum;
          var arrayLen = allLen - 1;

          // 重複チェックしながら乱数作成
          for (i = min; i < max; i++) {
            while (true) {
              var tmp = intRandom(min, arrayLen);
              if (!randoms.includes(tmp)) {
                randoms.push(tmp);
                itemChoiceArray.push(arrayI[tmp].id);
                break;
              }
            }
          }
          //min以上max以下の整数値の乱数を返す
          function intRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
          }
        }

        function shuffleArray(array) { //配列シャッフル
          for (var i = array.length - 1; i > 0; i--) {
            var j = Math.floor(Math.random() * (i + 1));
            if (i == j) continue;
            var k = array[i];
            array[i] = array[j];
            array[j] = k;
          }
          return array;
        }

        function createDOM(array) { //LIMIT_NUMの数だけdomを生成する

          for (var domNum = 0; domNum < LIMIT_NUM; domNum++) {

            var thisName;
            var thisNameEn;
            var dom;
            var str = String(array[domNum]);

            if (str.indexOf('fu') != -1) { //fruitsの場合
              for (var j in data['fruits']) {

                if (data['fruits'][j].id === array[domNum]) {
                  thisName = data['fruits'][j].name;
                  thisNameEn = data['fruits'][j].nameEn;
                  break;
                }
              }
              dom = '<p class="orange">' + thisName + '【' + thisNameEn + '】' + '<p>';

            } else { //vegetablesの場合
              for (var j in data['vegetables']) {
                if (data['vegetables'][j].id === array[domNum]) {
                  thisName = data['vegetables'][j].name;
                  thisNameEn = data['vegetables'][j].nameEn;
                  break;
                }
              }
              dom = '<p class="green">' + thisName + '【' + thisNameEn + '】' + '<p>';
            }
            $result.append(dom);
          }
        };

        for (var i in data) {
          var arrayLen;
          if (i === 'fruits') {
            arrayLen = data[i].length;
            itemChoice(arrayLen, FRUITS_NUM, data[i]);
          } else if (i === 'vegetables') {
            arrayLen = data[i].length;
            itemChoice(arrayLen, VEGETABLES_NUM, data[i]);
          }
          shuffleArray(itemChoiceArray);
          if (itemChoiceArray.length === LIMIT_NUM) {//配列が揃ったらdom生成開始
            createDOM(itemChoiceArray);
          }
        }
      }
      choiceItem(6); //引数はフルーツを選ぶ個数
      //フルーツ　６個、野菜４個で出る

    },
    function () {
      console.log('失敗');

    }
  );
});

item.json

 {
   "fruits": [{
     "id": "fu0",
     "name": "りんご",
     "nameEn": "apple"
   }, {
     "id": "fu1",
     "name": "あんず",
     "nameEn": "apricot"
   }, {
     "id": "fu2",
     "name": "さくらんぼ",
     "nameEn": "cherry"
   }, {
     "id": "fu3",
     "name": "プラム",
     "nameEn": "plum"
   }, {
     "id": "fu4",
     "name": "ぶどう",
     "nameEn": "grape"
   }, {
     "id": "fu5",
     "name": "メロン",
     "nameEn": "melon"
   }, {
     "id": "fu6",
     "name": "いちご",
     "nameEn": "strawberry"
   }, {
     "id": "fu7",
     "name": "バナナ",
     "nameEn": "banana"
   }, {
     "id": "fu8",
     "name": "オレンジ",
     "nameEn": "orange"
   }, {
     "id": "fu9",
     "name": "キウイ",
     "nameEn": "kiwi"
   }, {
     "id": "fu10",
     "name": "マンゴー",
     "nameEn": "mango"
   }],
   "vegetables": [{
     "id": "ve0",
     "name": "かぼちゃ",
     "nameEn": "pumpkin"
   }, {
     "id": "ve1",
     "name": "きゅうり",
     "nameEn": "cucumber"
   }, {
     "id": "ve2",
     "name": "大豆",
     "nameEn": "soybean"
   }, {
     "id": "ve3",
     "name": "人参",
     "nameEn": "carrot"
   }, {
     "id": "ve4",
     "name": "ほうれん草",
     "nameEn": "spinach"
   }, {
     "id": "ve5",
     "name": "セロリ",
     "nameEn": "celery"
   }, {
     "id": "ve6",
     "name": "トマト",
     "nameEn": "tomato"
   }, {
     "id": "ve7",
     "name": "小松菜",
     "nameEn": "komatsuna"
   }, {
     "id": "ve8",
     "name": "パプリカ",
     "nameEn": "paprika"
   }, {
     "id": "ve9",
     "name": "レタス",
     "nameEn": "lettuce"
   }, {
     "id": "ve10",
     "name": "キャベツ",
     "nameEn": "cabbage"
   }]
 }

ランダムな配列を用意する

ランダムな配列を作成する

        function itemChoice(allLen, maxNum, arrayI) {
          var randoms = []; //ランダムなarrayを入れる
          // 最小値と最大値
          var min = 0;
          var max = maxNum;
          var arrayLen = allLen - 1;

          // 重複チェックしながら乱数作成
          for (i = min; i < max; i++) {
            while (true) {
              var tmp = intRandom(min, arrayLen);
              if (!randoms.includes(tmp)) {
                randoms.push(tmp);
                itemChoiceArray.push(arrayI[tmp].id);
                break;
              }
            }
          }
          //min以上max以下の整数値の乱数を返す
          function intRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
          }
        }

//中略

        for (var i in data) {//jsonの配列の数だけ回しています
          var arrayLen;
          if (i === 'fruits') {
            arrayLen = data[i].length;
            itemChoice(arrayLen, FRUITS_NUM, data[i]);
          } else if (i === 'vegetables') {
            arrayLen = data[i].length;
            itemChoice(arrayLen, VEGETABLES_NUM, data[i]);
          }
          shuffleArray(itemChoiceArray);
          if (itemChoiceArray.length === LIMIT_NUM) {//配列が揃ったらdom生成開始
            createDOM(itemChoiceArray);
          }
        }

配列をシャッフルする

このままだとフルーツ６個の後に野菜４個が出てしまうので、配列をシャッフルします。

        function shuffleArray(array) { //配列シャッフル
          for (var i = array.length - 1; i > 0; i--) {
            var j = Math.floor(Math.random() * (i + 1));
            if (i == j) continue;
            var k = array[i];
            array[i] = array[j];
            array[j] = k;
          }
          return array;
        }

デモページ

まだまだ不慣れなところが多いですが、json使うの楽しいです。
アイテムページなど、デザインが同じで個数が多いものはjsonとかで出しちゃうと楽でいいなと思いました。