0

Im currently coding a program that gets data from an API and passes them with a loop into a html string that represents the data as a website. I want to create an Image of that website. My problem is that the image is created before the data is getting read. I get the data with $ajax jQuery.

The html file itself loads perfectly fine, displaying the data correct.

Im using NodeHTMLtoImage

var _htmlTemplate = ` ...HTML STUFF
<body>    ....
          const timelineList = document.getElementById('list');
          $.ajax(settings).done(function (response) {
              const jsonData = response.data.point1
              for (const packageInfo of jsonData) {
                  const listItem = document.createElement('li');

                  const timestamp = document.createElement('span');
                  timestamp.textContent = packageInfo.changeTime;
                  listItem.appendChild(timestamp);
          
                  const description = document.createElement('p');
                  description.textContent = packageInfo.description;
                  listItem.appendChild(description);
            
                  timelineList.appendChild(listItem);
              }
          });
            
      </script>
      <div id="users"></div>
      </body>
      </html>
      `
                
          const image = await nodeHtmlToImage({
            html: _htmlTemplate,
            quality: 100,
            type: 'jpeg',
            puppeteerArgs: {
              args: ['--no-sandbox'],
            },
            encoding: 'buffer',
          });

I tried this as well, but it didn't work:

async function createImage() {
try {
    const imagePath = await nodeHtmlToImage({
        html: html,
        output: './test.png'
    });
} catch (error) {
    console.error(error);
}

} createImage();

phuzi
  • 12,078
  • 3
  • 26
  • 50
zTrusted WF
  • 51
  • 7
  • Does this answer your question? [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) – phuzi Jun 30 '23 at 20:20
  • Simply put. nodeHtmlToImage is being run before the ajax request completes. – phuzi Jun 30 '23 at 20:21
  • Where is the loop? You can put the results of all the `$.ajax()` calls into an array, then use `Promise.all()` or `$.when()` to wait for them to complete before calling `nodeHtmlToImage()` – Barmar Jun 30 '23 at 20:29
  • @phuzi Sorry, I do not understand. I tried async/await and it didn't work. – zTrusted WF Jun 30 '23 at 20:32
  • 2
    Ah, the edit makes it clearer, what is happening. Taking a look at [the documentation](https://www.npmjs.com/package/node-html-to-image#options) there's a `waitUntil` option. This sounds like what you're looking for. – phuzi Jun 30 '23 at 20:34
  • yes. I tried all options `load`, `domcontentloaded `, `networkidle0 ` and `networkidle2`. None of them worked, sadly – zTrusted WF Jun 30 '23 at 20:40
  • @Barmar I tried this: async function createImage() { try { const imagePath = await nodeHtmlToImage({ html: html, output: './test.png' }); } catch (error) { console.error(error); } } createImage(); Didn't work tho. – zTrusted WF Jun 30 '23 at 20:54
  • Don't put code in comments, it's unreadable. Edit the question to clarify. – Barmar Jun 30 '23 at 20:55
  • What is `NodeHtmlToImage()`? – Barmar Jun 30 '23 at 20:56
  • Woops, sorry. I edited the question. Thats the function to read the html string and to convert it into an image – zTrusted WF Jun 30 '23 at 21:00

0 Answers0