I am looking into creating a tool that uses statistics about troops, buildings, and spells that are in the game that my wiki is about. Each article has a table that defines that troop's/building's/spell's statistics (eg: w:c:clashroyale:Goblins#Statistics). Would it be possible for a JavaScript/jQuery function to read the table on one of these pages and use a returned statistic? I do not want to have to copy all the statistics from the article tables into a JS file; I want the community to continue to be able to update the statistics through the table.
This is just for testing purposes, so it's fairly simple and certainly not final. However, I am still encountering the error. It seems that the data is not being added to the object at all.
Each property seems to be replacing the one before it. This issue isn't with your code and I will try to fix it as soon as possible.
EDIT:
Fixed. I accidentally placed the line where the 'Goblins' object is created inside the first each method so it kept resetting the object. I also changed the places where properties from Golem were used to properties from Goblins because the table on the Golem page does not have the unit-statistics-table id.
Here's the new code:
$('#unit-stats-input1-harness').html('<input type="text" id="unit-stats-input1" value="Goblins" />');
$('#unit-stats-input2-harness').html('<input type="text" id="unit-stats-input2" value="Golem" />');var lookupResult ={};// Add a click function for// each button here
$('#unit-stats-input1').change(function(){
getPageData('Goblins');});
$('#unit-stats-input2').change(function(){
getPageData('Goblins');});// Submit and show results
$("#unit-stats-submit").click(function(){
$("#unit-stats-1").text(lookupResult['Goblins']['Hitpoints'][3]);
$("#unit-stats-2").text(lookupResult['Goblins']['Damage per second'][4]);});function getPageData(page){var property ='';// Add code here that will// execute while AJAX request is running
$('#unit-stats-submit').prop("disabled",true);
$.get('clashroyale.wikia.com/index.php?title='+ page)
.done(function(statData){
lookupResult[page]={};
$('#unit-statistics-table tbody tr:eq(0) th',statData).each(function(i){
property = $(this).clone().children().remove().end().text().trim();if(i >0){
lookupResult[page][property]=[0];
$('#unit-statistics-table tbody tr',statData).each(function(a){if(a >0){
lookupResult[page][property].push($('td:eq('+ i +')',$(this)).text().trim());if(a === $('#unit-statistics-table tbody tr',statData).length-1&& i === $('#unit-statistics-table tbody tr:eq(0) th',statData).length-1){// Add code here that will execute// after AJAX request has finished and// data has been added to lookupResult object
$('#unit-stats-submit').prop("disabled",false);}}});}});});}
Alright! It seems to be working now. Could you do one more quick thing though? Could you you make it always retrieve the table column name as lowercase? Eg: The table column may be labelled as "Damage per second", but in the object, the number array would be in the "damage per second" object. This way, differing capitalization will not cause problems with the script later.
Script using lowercase property names and the toLowerCase() method:
$('#unit-stats-input1-harness').html('<input type="text" id="unit-stats-input1" value="Goblins" />');
$('#unit-stats-input2-harness').html('<input type="text" id="unit-stats-input2" value="Golem" />');var lookupResult ={};// Add a click function for// each button here
$('#unit-stats-input1').change(function(){
getPageData('Goblins');});
$('#unit-stats-input2').change(function(){
getPageData('Goblins');});// Submit and show results
$("#unit-stats-submit").click(function(){
$("#unit-stats-1").text(lookupResult['Goblins']['hitpoints'][3]);
$("#unit-stats-2").text(lookupResult['Goblins']['damage per second'][4]);});function getPageData(page){var property ='';// Add code here that will// execute while AJAX request is running
$('#unit-stats-submit').prop("disabled",true);
$.get('clashroyale.wikia.com/index.php?title='+ page)
.done(function(statData){
lookupResult[page]={};
$('#unit-statistics-table tbody tr:eq(0) th',statData).each(function(i){
property = $(this).clone().children().remove().end().text().trim().toLowerCase();if(i >0){
lookupResult[page][property]=[0];
$('#unit-statistics-table tbody tr',statData).each(function(a){if(a >0){
lookupResult[page][property].push($('td:eq('+ i +')',$(this)).text().trim());if(a === $('#unit-statistics-table tbody tr',statData).length-1&& i === $('#unit-statistics-table tbody tr:eq(0) th',statData).length-1){// Add code here that will execute// after AJAX request has finished and// data has been added to lookupResult object
$('#unit-stats-submit').prop("disabled",false);}}});}});});}
Do you want the page names lowercase as well? As long as the spelling is correct, capitalization of the page name does not affect the AJAX request.
I think it would be a good idea to modify the function to only retrieve the data if that page's data has not already been retrieved. If you are willing, could you do this?
// Data Retrieval Functionfunction getPageData(page){var property ='';// Code that will execute while AJAX request is running
$('#ccalc-submit').html('<span class="fa fa-spinner fa-pulse"></span>').prop("disabled",true);// Test if data for this page has already been retrievedif(lookupResult[page]){// data already exists
$('#ccalc-submit').html('Submit').prop("disabled",false);}else{// data does not exist// AJAX Request
$.get('clashroyale.wikia.com/index.php?title='+ page)
.done(function(statData){
lookupResult[page]={};
$('#unit-statistics-table tbody tr:eq(0) th',statData).each(function(i){
property = $(this).clone().children().remove().end().text().trim().toLowerCase();if(i >0){
lookupResult[page][property]=[0];
$('#unit-statistics-table tbody tr',statData).each(function(a){if(a >0){
lookupResult[page][property].push($('td:eq('+ i +')',$(this)).text().trim());if(a === $('#unit-statistics-table tbody tr',statData).length-1&& i === $('#unit-statistics-table tbody tr:eq(0) th',statData).length-1){// Code that will execute// after AJAX request has finished and// data has been added to lookupResult object
$('#ccalc-submit').html('Submit').prop("disabled",false);}}});}});});}}
Just make sure that the code under "Code that will execute after AJAX request has finished and data has been added to lookupResult object" and the code under "data already exists" are both the same/both re-enable the submit button.