It is an unavoidable fact that web scraping gives life to many applications today. It is frequently used especially in the field of artificial intelligence. A large amount of data is needed to test the developed algorithms and to reduce the error rates.
The most popular and fastest way to obtain data from the Internet is to use web scraping tools. Web scraping tools work in an automated manner, regularly collecting and streaming data from target websites.
Web scraping tools basically use web scraping APIs. The number of web scraping APIs is increasing. Zenscrape provides the most popular web scraping API available today. With the flexible and free packages it provides, it serves more than 10,000 developers and businesses.
One of the reasons why the web scraping API provided by Zenscrape is frequently preferred today is that it works very fast. With the free and large proxy pool it provides, it ensures that the processes are automated and fast without any blocking.
Thanks to the power infrastructure and flexible structure of Zenscape web scraping API, it can be easily integrated into many programming languages. In this article, we will look at how to easily integrate Zenscape API into the javascript programming language. So let’s get started.
Integration of Zenscrape API to javascript
Get an API key
Before we integrate the web scraping API that Zenscrape provides, we need to obtain an API key. Here we sign up by choosing the flexible packages or the free package that Zenscrape offers. Then we will get the API key.
Create a javascript file
After getting the API key, everything is ready to integrate the Zenscrape API into the code side. We are creating a javascript file because we will integrate the Zenscrape API into the javascript programming language.
Check fetch() library
After creating a javascript file we need a library that allows us to make requests to the Zenscrape API. For this, we will use the ‘fetch’ library, which is one of the most popular libraries. More detailed information can be found here.
Paste the code
Let’s paste the following codes into the javascript file we created.
var requestOptions = { method: 'GET', redirect: 'follow' };fetch("https://app.zenscrape.com/api/v1/get?apikey=d58871c0-3da6-11ed-99ac-a9588c8b45db&url=https://www.arubanetworks.com/techdocs/ClearPass/CPGuest_UG_HTML_6.5/Content/Reference/BasicHTMLSyntax.htm", requestOptions) .then(response => response.text()) .then(result => console.log(result)) .catch(error => console.log('error', error));
This snippet will request the Zenscape API with fetch. The target URL to scrape is https://www.arubanetworks.com/techdocs/ClearPass/CPGuest_UG_HTML_6.5/Content/Reference/BasicHTMLSyntax.htm. Before running the code, you can take a look at the source code of this page.
Run
Everything is ready. Let’s run the code in the javascript file we created. After this code runs, the following information will be printed on the console of the application.
!DOCTYPE html> <html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd" lang="en-us" xml:lang="en-us" data-mc-search-type="Stem" data-mc-help-system-file-name="Default.xml" data-mc-path-to-help-system="../../" data-mc-target-type="WebHelp2" data-mc-runtime-file-type="Topic" data-mc-preload-images="false" data-mc-in-preview-mode="false" data-mc-medium="non-print" data-mc-toc-path="Reference"><head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Basic HTML Syntax</title> <link href="../../Skins/Default/Stylesheets/Slideshow.css" rel="stylesheet" data-mc-generated="True" /> <link href="../../Skins/Default/Stylesheets/TextEffects.css" rel="stylesheet" data-mc-generated="True" /> <link href="../../Skins/Default/Stylesheets/Topic.css" rel="stylesheet" data-mc-generated="True" /> <link href="../../Skins/Default/Stylesheets/Components/Styles.css" rel="stylesheet" data-mc-generated="True" /> <link href="../Resources/TableStyles/Aruba_Standard.css" rel="stylesheet" /> <link href="../Resources/Stylesheets/aruba_style_guide.css" rel="stylesheet" /> <script src="../../Resources/Scripts/custom.modernizr.js"> </script> <script src="../../Resources/Scripts/jquery.min.js"> </script> <script src="../../Resources/Scripts/require.min.js"> </script> <script src="../../Resources/Scripts/require.config.js"> </script> <script src="../../Resources/Scripts/foundation.min.js"> </script> <script src="../../Resources/Scripts/plugins.min.js"> </script> <script src="../../Resources/Scripts/MadCapAll.js"> </script> </head><body> <p class="MCWebHelpFramesetLink MCWebHelpFramesetLinkTop"><a href="../../Default.htm#Reference/BasicHTMLSyntax.htm">Open topic with navigation</a> </p> <div class="MCBreadcrumbsBox_0"><span class="MCBreadcrumbsPrefix">You are here: </span><a class="MCBreadcrumbsLink" href="Reference.htm">Reference</a><span class="MCBreadcrumbsDivider"> > </span><span class="MCBreadcrumbs">Basic HTML Syntax</span> </div> <h1 class="_1Heading"><a name="reference_3484195821_15184"></a>Basic HTML Syntax</h1> <p class="Body"> <span class="ClearPassGuestVariableSetProduct Name"><a href="javascript:void(0);" class="MCTextPopup MCTextPopupHotSpot MCTextPopup_Open MCTextPopupHotSpot_ MCTextPopupHotSpot_Popup #text #textPopup">ClearPass Guest<span class="MCTextPopupBody popupBody"><span class="MCTextPopupArrow"></span>Configurable ClearPass application for secure visitor network access management. Access permissions to ClearPass Guest features are controlled through an operator profile that can be integrated with an LDAP server or Active Directory login. The ClearPass Guest application can be accessed either directly or through Policy Manager.</span></a></span> allows different parts of the user interface to be customized using the Hyp<a name="kanchor558"></a>ertext Markup Language (HTML). </p> <p class="Body">Most customization tasks only require basic HTML knowledge, which is covered in this section.</p> <p class="Body">HTML is a markup language that consists primarily of <span class="_Override" style="font-style: italic;">tags</span> that are enclosed inside angle brackets, for example, <span class="_Override" style="font-weight: bold;"><p></span>. Most tags are paired to indicate the start and end of the text being marked up; an end tag is formed by including the tag inside the angle brackets with a forward slash, for example, <span class="_Override" style="font-weight: bold;"></p></span>.</p> <p class="Body">Use the following standard HTML tags in customization: </p> <table class="TableStyle-Standard" style="mc-table-style: url('../Resources/TableStyles/Aruba_Standard.css');width: auto;caption-side: top;" cellspacing="0"> <caption valign="top" style="padding-bottom: 6pt;" data-mc-autonum="Table 1: "> <span class="autonumber"><span class="zTitleNo">Table 1: </span></span>Standard HTML Tags</caption> <col width="210px" class="TableStyle-Standard-Column-Column1" /> <col width="414px" class="TableStyle-Standard-Column-Column1" /> <thead> <tr class="TableStyle-Standard-Head-Header1"> <td class="TableStyle-Standard-HeadE-Column1-Header1"> <p class="Table_Heading">Item</p> </td> <td class="TableStyle-Standard-HeadD-Column1-Header1"> <p class="Table_Heading">HTML Syntax</p> </td> </tr> </thead> <tbody> <tr class="TableStyle-Standard-Body-Body1"> <td colspan="2" class="TableStyle-Standard-BodyD-Column1-Body1"> <p class="Table_Body"><span class="Navigation">Basic Content</span> </p> </td> </tr> <tr class="TableStyle-Standard-Body-Body1"> <td class="TableStyle-Standard-BodyE-Column1-Body1"> </td> <td class="TableStyle-Standard-BodyD-Column1-Body1"> <p class="CLI"><h1>Main Heading</h1></p> </td> </tr> <tr class="TableStyle-Standard-Body-Body1"> <td class="TableStyle-Standard-BodyE-Column1-Body1"> </td> <td class="TableStyle-Standard-BodyD-Column1-Body1"> <p class="CLI"><h2>Subheading</h2></p> </td> </tr> <tr class="TableStyle-Standard-Body-Body1"> <td class="TableStyle-Standard-BodyE-Column1-Body1"> </td> <td class="TableStyle-Standard-BodyD-Column1-Body1"> <p class="CLI"><h3>Section heading</h3></p> </td> </tr> <tr class="TableStyle-Standard-Body-Body1"> <td class="TableStyle-Standard-BodyE-Column1-Body1"> </td> <td class="TableStyle-Standard-BodyD-Column1-Body1"> <p class="CLI"><p>Paragraph text</p></p> </td> </tr> <tr class="TableStyle-Standard-Body-Body1"> <td class="TableStyle-Standard-BodyE-Column1-Body1"> </td> <td class="TableStyle-Standard-BodyD-Column1-Body1"> <p class="CLI"><br></p> <p class="Table_Body"><span class="CLI"><br /> </span>- equivalent syntax (XHTML)</p> </td> </tr> <tr class="TableStyle-Standard-Body-Body1"> <td class="TableStyle-Standard-BodyE-Column1-Body1"> </td> <td class="TableStyle-Standard-BodyD-Column1-Body1"> <p class="CLI"><ul><br /> <li>List item text</li><br /></ul></p> </td> </tr> <tr class="TableStyle-Standard-Body-Body1"> <td class="TableStyle-Standard-BodyE-Column1-Body1"> </td> <td class="TableStyle-Standard-BodyD-Column1-Body1"> <p class="CLI"><ol><br /> <li>List item text</li><br /></ol></p> </td> </tr> <tr class="TableStyle-Standard-Body-Body1"> <td colspan="2" class="TableStyle-Standard-BodyD-Column1-Body1"> <p class="Table_Body"><span class="Navigation">Text Formatting</span> </p> </td> </tr> <tr class="TableStyle-Standard-Body-Body1"> <td class="TableStyle-Standard-BodyE-Column1-Body1"> </td> <td class="TableStyle-Standard-BodyD-Column1-Body1"> <p class="CLI"><b>words to be made bold</b></p> <p class="CLI"><strong>equivalent syntax</strong></p> </td> </tr> <tr class="TableStyle-Standard-Body-Body1"> <td class="TableStyle-Standard-BodyE-Column1-Body1"> </td> <td class="TableStyle-Standard-BodyD-Column1-Body1"> <p class="CLI"><i>words to be made italic</i></p> <p class="CLI"><em>equivalent syntax</em></p> </td> </tr> <tr class="TableStyle-Standard-Body-Body1"> <td class="TableStyle-Standard-BodyE-Column1-Body1"> </td> <td class="TableStyle-Standard-BodyD-Column1-Body1"> <p class="CLI"><u>words to underline</u></p> </td> </tr> <tr class="TableStyle-Standard-Body-Body1"> <td class="TableStyle-Standard-BodyE-Column1-Body1"> </td> <td class="TableStyle-Standard-BodyD-Column1-Body1"> <p class="CLI"><tt>Shown in fixed-width font</tt></p> </td> </tr> <tr class="TableStyle-Standard-Body-Body1"> <td class="TableStyle-Standard-BodyE-Column1-Body1"> </td> <td class="TableStyle-Standard-BodyD-Column1-Body1"> <p class="CLI"><span style="...">Uses CSS formatting</span></p> <p class="CLI"><span class="...">Uses predefined style</span></p> </td> </tr> <tr class="TableStyle-Standard-Body-Body1"> <td class="TableStyle-Standard-BodyE-Column1-Body1"> </td> <td class="TableStyle-Standard-BodyD-Column1-Body1"> <p class="CLI"><div style="...">Uses CSS formatting</div></p> <p class="CLI"><div class="...">Uses predefined style</div></p> </td> </tr> <tr class="TableStyle-Standard-Body-Body1"> <td colspan="2" class="TableStyle-Standard-BodyD-Column1-Body1"> <p class="Table_Body"><span class="Navigation">Hypertext</span> </p> </td> </tr> <tr class="TableStyle-Standard-Body-Body1"> <td class="TableStyle-Standard-BodyE-Column1-Body1"> </td> <td class="TableStyle-Standard-BodyD-Column1-Body1"> <p class="CLI"><a href="<span class="_Override" style="font-style: italic;">url</span>">Link text to click on</a></p> </td> </tr> <tr class="TableStyle-Standard-Body-Body1"> <td class="TableStyle-Standard-BodyE-Column1-Body1"> </td> <td class="TableStyle-Standard-BodyD-Column1-Body1"> <p class="CLI"><img src="url"></p> <p class="Table_Body"><span class="CLI"><img src="url" /></span> - XHTML equivalent </p> </td> </tr> <tr class="TableStyle-Standard-Body-Body1"> <td class="TableStyle-Standard-BodyB-Column1-Body1"> </td> <td class="TableStyle-Standard-BodyA-Column1-Body1"> <p class="CLI"><img src="url" align="left"></p> </td> </tr> </tbody> </table> <p class="Body">For more details about HTML syntax and detailed examples of its use, consult a HTML tutorial or reference guide.</p> </body></html
Zenscape API completed this job just in seconds.
Conclusion
We covered the integration of web scraping API, which is the most effortless and fastest way to collect data from the internet. Zenscape API was quickly integrated into the javascript language in just 5 steps and worked well. If you want to learn more before using the Zenscrape API in your web scraping processes. Take a look at Zenscape’s powerful documentation.
