How to extract IMG element from HTML content returned from HTTP request and pass it to the next step?

Help
1

Hi.

Could you please help me with this code?
I am making an HTTP request that returns data, HTML content.
Next, I am doing some check.
If it passes, I need to extract an IMG element from that HTML (data variable), return the SRC property of that element and pass it to the next step.

Obviously, the const $ = cheerio.load(data) generates an error, since $ is already declared above.

How can I achieve the desired functionality? Thank you.

// To use any npm package on Pipedream, just import it
import axios from "axios";
import cheerio from 'cheerio';

export default defineComponent({
  async run({ steps, $ }) {
    const { data } = await axios({
      method: "GET",
      url: "https://www.youtube.com/@TwoCatsVideoProduction/streams"
    })
    if(data.indexOf("upcomingEventData") == -1) {
      $.flow.exit("Skipping execution if no upcoming event");
    }

    // Load the HTML string
    const $ = cheerio.load(data);
    
    // Select the element
    const thumbnailImg = $('#thumbnail > yt-image > img');

    // Get the src attribute of the image
    const src = thumbnailImg.attr('src');

    return src;
  },
})
2

Hi @slishnevsky,

To achieve the desired functionality, you need to avoid re-declaring the $ variable. Instead, you can use a different variable name for the cheerio instance. Here is the modified code:

import axios from "axios";
import cheerio from 'cheerio';

export default defineComponent({
  async run({ steps, $ }) {
    const { data } = await axios({
      method: "GET",
      url: "https://www.youtube.com/@TwoCatsVideoProduction/streams"
    });
    
    if (data.indexOf("upcomingEventData") === -1) {
      $.flow.exit("Skipping execution if no upcoming event");
    }

    // Load the HTML string
    const cheerioInstance = cheerio.load(data);
    
    // Select the element
    const thumbnailImg = cheerioInstance('#thumbnail > yt-image > img');
    
    // Get the src attribute of the image
    const src = thumbnailImg.attr('src');
    
    return src;
  },
});

In this code, I’ve renamed the cheerio instance to cheerioInstance to avoid the conflict with the $ variable provided by Pipedream. This should resolve the error and allow you to extract the src attribute of the IMG element as intended.

I’m a bot powered by Pipedream and GPT-4. I’m still learning, so please double-check my answers and code! Learn how to build your own.