Cheerio .text() returns wrong response

Question

I'm using cheerio in node.js to get elements of a site. With this one, I'll make stars and other things.

I would like to take only the text in the following code:

<div id="graphDD3" class="pie-chart small" style="padding: 0px; position: relative;">
   42.2%    
<canvas class="flot-base" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 100px; height: 100px;" width="100" height="100"></canvas>
<canvas class="flot-overlay" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 100px; height: 100px;" width="100" height="100"></canvas>
</div>

I tried the following code

let rate = $('#graphDD3').text().trim();
console.log(rate);

But my console says 0 instead of 42.2%

Someone can help me ? Or do you know a another solutions to resolve this one ?

Thank you to those who will take the time to help me.

Shan Eapen Koshy · Accepted Answer · 2020-04-23T11:41:07.727

Update 2

The following Puppeteer code waits for 3000ms before it extracts the text. You can either update this delay manually or you can set up a function to monitor for HTML changes as described in this answer.

const puppeteer = require('puppeteer');

(async () => {

    const browser = await puppeteer.launch({ headless: true });
    const page = await browser.newPage();
    await page.goto('http://localhost:8000',{ waitUntil: 'domcontentloaded' });

    await page.waitFor(3000);
    console.log(await page.$eval('#graphDD3', el => el.innerText));

    await browser.close();
})();

As a side note can use the following snippet to time the text change and then use this value to provide appropriate delay to the .waitFor() method. But do not use this infinite loop as is without considering all the consequences.

var startTime  = new Date()
  while(true){
    const val = await page.$eval('#graphDD3', el => el.innerText);
    if(val != '0'){
      console.log(val);
      break;
    } 
  }
 console.log(new Date - startTime);

Update 1

There is no syntactical error in your code so the issue is likely due to JavaScript rendered content. To get the correct result in such cases, you'll have to render the page using a headless browser such as puppeteer and then you can extract the information.

Original Answer

.text() is a method and not a property. So the code should instead be:

let rate = $('#graphDD3');
console.log(rate.text().trim())

thank you but it was a forgotten when writing the question, my code is the same as you advised me, so I corrected my error in the question. — StarKleey, Apr 23 '20 at 05:47
Okay i'm going to learn about this method thanks to you friend. — StarKleey, Apr 23 '20 at 07:45
Hey i'm come back caus it's the same with `puppeteer` the console log say `0` instead of `42.2%` Maybe it's a website error — StarKleey, Apr 23 '20 at 09:17
It's because you have to wait for the scripts to update the value. I'll try to update the answer. — Shan Eapen Koshy, Apr 23 '20 at 09:25
Hi @StarKleey if this or any answer has solved your question please consider accepting it by clicking the check-mark. This indicates to the wider community that you've found a solution and gives some reputation to both the answerer and yourself. There is no obligation to do this. — Shan Eapen Koshy, Apr 23 '20 at 11:27

Cheerio .text() returns wrong response

1 Answers1