JSFiddle - React, Tailwind, and code Playground
HTML
<div id="apidata"></div>
CSS
table.wikitable > tr > th, table.wikitable > tr > td, table.wikitable > * > tr > th, table.wikitable > * > tr > td {
border: 1px #aaa solid;
padding: 0.2em;
}
table.wikitable {
margin: 1em 0;
background-color: #f9f9f9;
border: 1px #aaa solid;
border-collapse: collapse;
}
JavaScript
// Generate a list of miniatures
$(function () {
// Collect a list of minis from the minis API
$.getJSON('https://api.guildwars2.com/v2/minis').done(function (mini_ids) {
console.log('Number of minis: ' + mini_ids.length);
// Query API until all IDs requested
var promises = [], size = 200;
// Do the requests // mini_ids.length
for (var i=0; i<mini_ids.length; i+=size) {
var current_ids = mini_ids.slice(i,i+size).join(',');
var promise = $.getJSON('https://api.guildwars2.com/v2/minis?wiki=1&ids='+current_ids);
promises.push(promise);
}
// Process result when array of promises are complete
// need to use arguments because .done doesn't work on arrays of promises
var item_data = {};
$.when.apply($,promises).done(function(){
// Concatenate data into "data"
if (promises.length>1){
for(var i=0; i<arguments.length; i++){
var jsoninfo = arguments[i][0];
$.each(jsoninfo, function(key,val){
item_data[val['id']] = val;
});
}
} else {
var jsoninfo = arguments[0];
$.each(jsoninfo, function(key,val){
item_data[val['id']] = val;
});
}
// Extract only the information we need
var table = '<table class="wikitable"><thead><tr><th>Mini id</th><th>Mini name</th><th>Order</th><th>Item id</th></tr></thead><tbody>';
$.each(item_data, function(key,val){
table += '<tr><td>'+val['id']+'</td><td>'+val['name']+'</td><td>'+val['order']+'</td><td>'+val['item_id']+'</td></tr>';
});
table += '</tbody></table>';
document.getElementById('apidata').innerHTML = table;
});
});
});