【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とかで出しちゃうと楽でいいなと思いました。
