jQuery and Bubbling loaded page imported content empty Google Sheet Importxml - What google apps script workaround?

Question

This question has already been asked multiple times with good answers compiled at

Scraping data to Google Sheets from a website that uses JavaScript,

but I could not find a working answer to my problem.

This Xpath works in the browser :

//td[1]//span[contains(@class,"cluster")]/text()

Screenshots:

However Google sheets returns imported content empty:

jQuery:

From the Scraping data to Google Sheets from a website that uses JavaScript answer and cited questions it seems IMPORTXML cannot be used to solve my problem because the page loads jQuery.

The Xpath being correct, I don't know what else to try.

It seems from this answer scrape table using google app scripts a Google Apps Script solution could be used.

Is that approach still valid?

Or maybe a simpler one is available now someone could suggest?

Given that url:

https://www.onelook.com/thesaurus/?s=active

From these answers it seems parsing json could be a simpler solution, however I did not find a workable json file from searching with the developer tool network tab ( only this url was available):

is there a way to tell if there is json on a website

Scrape the current share price data from the ASX

Is there a way to get a single response from a text/event-stream without using event listeners?

Answer 1

From your following reply,

All the values from the "zone1" spans table. "On", "alive", "existent", "existing" etc.

I understood that you want to retrieve each word like On", "alive", "existent", "existing" from a table of the URL.

When I saw your URL, it seems that the table is created by Javascript. In this case, unfortunately, the table cannot be directly retrieved using IMPORTXML and Google Apps Script. But, fortunately, it seems that the data for creating the table can be retrieved by other URL. And, it seems that the data is JSON data. From this situation, in this answer, I would like to propose a sample script for retrieving your expected values using Google Apps Script. So, how about the following sample script?

Sample script:

function myFunction() {
  const url = "https://www.onelook.com/api/words?ml=active&qe=ml&md=dpfcy&max=850&rif=1&k=olthes_r4";
  const res = UrlFetchApp.fetch(url);
  const obj = JSON.parse(res.getContentText());
  const values = obj.map(({ word }) => word);
  console.log(values); // ["active","on","alive","existent","existing","dynamic","hyperactive",,,]
}

• When this script is run, the values of ["active","on","alive","existent","existing","dynamic","hyperactive",,,] are shown in the log. I thought that these values might be your expected values.

Note:

When you want to retrieve the table on Spreadsheet, how about the following sample script?

function SAMPLE() {
  const url = "https://www.onelook.com/api/words?ml=active&qe=ml&md=dpfcy&max=850&rif=1&k=olthes_r4";
  const res = UrlFetchApp.fetch(url);
  const obj = JSON.parse(res.getContentText());
  const values = obj.map(({ word }) => word).splice(1, 100);
  const v = [...Array(Math.ceil(values.length / 20))].map(_ => values.splice(0, 20));
  return v[0].map((_, col) => v.map((row) => row[col] || null));
}

When this script is used as a custom function, the following result is obtained. It seems that this is the same values with the HTML table.