Difficulty selecting html dom components using WebView.evaluateJavaScript

Scriptable
1

Hi,

In my code snippet below, I am attempting to extract the articles from the html snippet using WebView.evaluateJavaScript. I have seen this approach in a few other examples online. However, I only ever seem to be getting back an empty array.

I have tried wrapping the html snippet inside of tags to no avail. Any ideas where I may be going wrong?

Many thanks!

html = `  
      <div class="module-widget waste-services-widget">
        <h2 class="sub-title">Recycling and rubbish collection</h2>
        <div class="grid waste-services-results results-3">
    
          <div class="col-xs-12 col-m-6 waste-services-result regular-service rubbish date-precise item-0">
            <article>
              <h3>Rubbish</h3>
              <div class="service-details">
                <div class="note">Collected weekly. Place your bin kerbside prior to 5.30 am on the morning of collection.
                </div>
    
                <div class="next-service">
                  Wed 18/5/2022
                </div>
              </div>
            </article>
          </div>
    
          <div class="col-xs-12 col-m-6 waste-services-result regular-service green-waste date-precise item-1">
            <article>
              <h3>Green Waste</h3>
              <div class="service-details">
                <div class="note">Collected fortnightly. Place your bin kerbside prior to 5.30 am on the morning of
                  collection.</div>
    
                <div class="next-service">
                  Wed 18/5/2022
                </div>
              </div>
            </article>
          </div>
    
          <div class="col-xs-12 col-m-6 waste-services-result regular-service recycling date-precise item-2">
            <article>
              <h3>Recycling</h3>
              <div class="service-details">
                <div class="note">Collected fortnightly. Place your bin kerbside prior to 5.30 am on the morning of
                  collection.
                </div>
    
                <div class="next-service">
                  Wed 25/5/2022
                </div>
              </div>
            </article>
          </div>
    
        </div>
      </div>
`

let wv = new WebView();
wv.loadHTML(html); 
//wv.present();

let js = `document.querySelector("div.waste-services-result").getElementsByTagName("article")[0].innerText` 
let articles = await wv.evaluateJavaScript(js)
console.log(articles)
2

I haven’t tried your code but I think you need to add an await on this line.

1 Like
3

Ohhh… thank you! Thank fixed it :smiley: