Click here to Skip to main content
15,905,508 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I'm trying to scrab data from a source website and organised the data. The source website page have some tabs , when I click different tabs, there would be different contents displayed. Now I'm using javascript to simulate this procedure. I'm not familiar with javascript, I'm getting stuck with the executing sequence of the code.

What I have tried:

here is my code:
JavaScript
var match=[];
var items=document.querySelectorAll('.date-list-swiper-slide');
for(let i of items) {
    i.querySelector('.slide-item-wrap').click();
    document.querySelectorAll('.item').forEach(function(item,i) {
        var time=item.querySelector('.time-t').innerText;
        var area_A=item.querySelector('.origin-area').innerText;
        var area_B=item.querySelectorAll('.origin-area')[2].innerText;
        var item={time:time,area_a:area_A,area_b:area_B};
        match.push(item);
    });
}
console.log(match);


The output just repeat the first tab-click content, and the webpage has switch ed to the last tab-click content.
It looks like the code
JavaScript
document.querySelectorAll('.item')
" DOES NOT wait the code
JavaScript
i.querySelector('.slide-item-wrap').click()
done and executed the following codes directlly.

What should I do to control following code after the click event has been done?
Posted
Comments
Member 15627495 16-Jul-23 2:26am    
Hello,

do you know if the 'items' collection is full of all datas ? check your var for their contents.

a loop is very fast, if an 'ajax query' happens in the 'target page' ( firing at each tabs click ) , assume it could bypass your aim.

That makes your script catching only the 'first content' [ page 'onload' state , the document is ready ] ,
then the last [ your loop speed avoid all the 'in-middle parts' ]

by using Time feature, you can delay all the 'content loading' happening by your script ( and maybe Ajax answer )

in JavaScript for Time delay resources, you have :
setTimeOut()
here : https://developer.mozilla.org/en-US/docs/Web/API/setTimeout


var match=[];
var items=document.querySelectorAll('.date-list-swiper-slide');

console.table(items);

for(let i of items) {

    i.querySelector('.slide-item-wrap').click();
    
    document.querySelectorAll('.item').forEach(function(item,i) {
      // without let or var, because of 'void' is equal 'let'            
      match.push({time:item.querySelector('.time-t').innerText,area_a:item.querySelector('.origin-area').innerText,area_b:item.querySelectorAll('.origin-area')[2].innerText});

    });
}
console.log(match);
console.table(match);
Yount_0701 16-Jul-23 4:08am    
you're right. "i.querySelector('.slide-item-wrap').click();" doesn't go well.
After I put await before this line, everything OK.
Andre Oosthuizen 16-Jul-23 4:23am    
@Member 15627495, please post this as the solution, thanks.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900