I am building a web scraper to get some specific information from some web pages. I have the links of the pages on a table and I want to create a loop so that in every iteration my function can load the html of a particular website and check if a phrase is located in that site. In the case where the phrase doesn't exist that table row will be deleted.
I realized that for some reason when I am running the loop, the JQuery function that should scrape an individual link waits for the loop to be over and then scrapes the same page 50 times, instead of scraping a different web page each time.
//snippet has been simplified to make the problem clear
//assume urlList is a list of 50 different url's
function dataScraper(urlList){
for(i in urlList){
$.get('https://allorigins.me/get?method=raw&url=' + encodeURIComponent(urlList[i]) + '&callback=?', function(data){
localStorage.setItem("urlHTML"+String(i),data.contents)
console.log(i) //for example this just prints 49, 50 times instead of printing all the separate values of i
});
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I get that JQuery is waiting for the whole thing to load, but how do I make sure that the JQuery function accepts each individual (i) instead of the max (i).
Disclaimer: I am a self-taught newbie, and have recently figured out JavaScript, HTML and JQuery. Apologies if I am missing something completely obvious.