I am trying to build a code for my programming class to append specific sections of the converted json data from the Fate Grand Order Servants page through JavaScript. Are there special rules that this wiki uses for coding that I am not aware of? I know that my code accesses the URLs for each servant page, and that a sample link (minus the Cors-Anywhere proxy) can create a JSON page for each servant if I just transpose the name. Any advice on what I am missing in my code will be greatly appreciated. Please note that I am asking more for the specific coding rules the current version of the MediaWiki uses for fetching data than script testing.
<script>
const proxyurl = "https://cors-anywhere.herokuapp.com/";
const baseURL = 'https://fategrandorder.fandom.com/api.php';
const servantTitles = ['Artoria_Pendragon', 'Artoria_Pendragon_(Alter)', 'Artoria_Pendragon_(Lily)', 'Nero_Claudius', 'Siegfried', 'Gaius_Julius_Caesar', 'Altera', 'Gilles_de_Rais_(Saber)', "Chevalier_d'Eon", 'Okita_Sōji', 'Fergus_mac_Róich', 'Mordred', 'Nero_Claudius_(Bride)', 'Ryōgi_Shiki_(Saber)', 'Rama, Water_Iri', 'Lancelot_Saber', 'Gawain', 'Bedivere', 'Elizabeth_Báthory_(Brave)', 'Miyamoto_Musashi', 'Arthur_Pendragon_(Prototype)', 'Suzuka_Gozen', 'Frankenstein_(Saber)', 'Yagyū_Munenori', 'Sigurd', 'Medb_(Saber)', 'Diarmuid_Ua_Duibhne', 'Lanling_Wang', 'Beni-enma', 'Lakshmibai','Jason', 'Katsushika_Hokusai_(Saber)', 'Astolfo_(Saber)', 'Dioscuri', 'Tomoe_Gozen_(Saber)', 'Saitō_Hajime'];
// Compose list of URL's using the baseURL and each servant from the servantTitles array
const URLs = servantTitles.map(title => `${proxyurl}${baseURL}?action=query&prop=revisions&titles=${title}&rvprop=content&format=json`);
// Create array of promises returned by the fetch call to each of URL's
const apiCalls = URLs.map(URL => fetch(URL));
// Wait for all fetch calls to be resolved and return the promisees
Promise.all(apiCalls)
// and get JSON data from each promise returned by the fetch call
.then(responses => Promise.all(responses.map(response => response.json())))
.catch(function(error) {
console.error(data);
});
// append data to html element
then(data => {
var mainContainer = document.getElementById("myData");
data.forEach(servant => {
$('body').append($("<div id='new'/>"));
$('#new').append($("<span>"+json[0].title+"Name: "+"</span>"));
$('#new').append($("<span>"+json[0].aka+"AKA: "+"</span>"));
$('#new').append($("<span>"+json[0].atk+"Attack: "+"</span>"));
$('#new').append($("<span>"+json[0].hp+"HP: "+"</span>"));
$('#new').append($("<span>"+json[0].gatk+"Grail Attack: "+"</span>"));
$('#new').append($("<span>"+json[0].ghp+"Grail HP: "+"</span>"));
$('#new').append($("<span>"+json[0].stars+"Stars: "+"</span>"));
$('#new').append($("<span>"+json[0].cost+"Cost: "+"</span>"));
// var div = document.createElement("div");
// div.innerHTML = 'Name: ' + json[0].title + <br/> 'Class: ' + json[0].class + <br/> 'Attack: ' +json[0].atk + <br/> 'HP: ' + json[0].hp + <br/> 'Grail Attack: ' + json[0].gatk + <br/> 'Grail HP: ' + json[0].ghp + <br/> 'Stars: ' + json[0].stars + <br/> 'Cost: ' + json[0].cost;
// mainContainer.appendChild(div);
});
});
</script>
