In this article, we will look at an example, step by step, of how to parse data from an online store using the iDatica extension.
We will parse the Amazon website, this page ;
First, install the extension in your Google Chrome or Microsoft Edge browser .
Open the site in the browser (the article uses Google Chrome as an example, but MS Edge is the same), open the developer tools (F12), place the extension window on the side:
extension working windows
Now we need to create the first column with data, let it be the field “Product Name”. Click on “+” in the extension:
parsing step 1
a field with column settings will appear, name the field:
Selecting a selector to search for xpath or css data;
A field for a query that will lead to the library shop necessary data – this path tells the program what data needs to be collected on the site and placed in this column. How to create queries is described in this article ;
Button for searching the path to data – the data query is generated automatically;
A button to show which elements on the page match the entered query;
Button to show what data is on the page for this request and its quantity.
Let’s get the product names. To do this, right-click on the name and select “view code” from the context menu:
parsing step 3
The focus in the developer panel will go to the place in the site code where the header is located:
Let’s choose the selector – xpath
We’ll put the request in the corresponding field. Click on the magnifying glass icon to check what the parser finds on the page (the browser window with the site must be active) – the found values will be highlighte:
parsing step 5
The next step is to create a column Hvernig á að stofna WordPress blogg á HostGator that will collect the price. Please note that not all products have a price:
parsing step 5
In the current configuration, the parser “does not know” where the data related to one product begins and ends, which means that if you parse the names and prices, then in the final unloading the data will follow one after another without gaps in those cells where there is no data:
Data blocks
Our task is to find the top block that is responsible cell p data for the product, such blocks will go one after another and when hovered will highlight the product card. Let’s write a request to this block, I decided to use the style .s-widget-spacing-small. We select the path to the data block: CSS, write the desired style there:
