I'm building a scraper that needs to get data from multiple adjacent elements. Essentially there are headers (h3) that display categories, next to which there are tables of ranks. I'm trying to crawl the page for a String to find out if that String was ranked in a category and, if so, what rank it achieved (A, B, or C), then fill an array with objects that describe what the categories and ranks that string achieved (phew).
Initially, I generated an error in the while loop ("cannot define property 'tagName' of null"), as sib kept evaluating to null for some reason. I added a test, in case it was happening at the end of arr, but now the code just hangs indefinitely. I have a feeling that sib isn't being defined immediately, but I can't put my finger on if so or why.
I am testing everything in Chrome DevTools, if that helps anything. Also I am not using a Fat Arrow function in DevTools to test this out, so it is not contributing to this problem per se, but if it will screw me over in the long run please let me know!
(str) => {
let h = document.getElementsByTagName('h3');
let arr = [];
let res = [];
for ( let i = 0; i < h.length; i++){ //Filter out any h3's that are not category headers.
h[i].id.includes('category-') && arr.push(h[i]);
};
for ( let i = 0; i < arr.length; i++){
let head = arr[i].innerText; //Save the current category header.
let sib = arr[i].nextElementSibling; //Should be a table containing rank A.
while ((sib != null) && (sib.tagName == 'TABLE')){
if(sib.innerText.includes(str)){ //Create an object if the rankings table contains our target.
let hit = {};
hit.category = head;
hit.rank = sib.children[0].innerText;
res.push(hit);
}
else{ //Go to the next table which contains the next rank.
sib = sib.nextElementSibling;
};
};
};
return res;
}