I am using Cheerio to scrape a couple websites to use for a project. This code gets data from a website and pushes it into a couple different arrays.
The problem I am having is that I can't seem to isolate the price information. Here's my NodeJS code:
// Gets all available keyboards from
mykeyboard.eu (first page only) //
app.get('/data', (req, res) => {
const MyKeyboardEU ='https://mykeyboard.eu/catalogue/category/mechanical-keyboards_3/?selected_facets=num_in_stock_exact%3A%5B1+TO+%2A%5D';
const MKEUResults = [];
const MKEUThumbs = [];
const MKEUPrice = [];
// Gets in-stock results from mykeyboard.eu //
Axios.get(MyKeyboardEU)
.then((response) => {
let $ = cheerio.load(response.data);
let keyboards = $('.thumbnail')
let price = $('.price_color').children;
// Pushes keyboard names + thumbnail links to respective arrays //
for (var i = 0; i < keyboards.length; i++) {
MKEUResults.push(keyboards[i].attribs.alt);
MKEUThumbs.push(keyboards[i].attribs.src);
console.log(price[i]);
}
// Maps array into single object for consuption on frontend //
let arr = MKEUResults.map((res, idx) => {
return {'name': res, "img": MKEUThumbs[idx]}
});
res.send(arr);
})
.catch((err) => res.send(err));
});
Here is what the console.log(price[i]) outputs:
<ref *1> [
keeb-finder-server-1 | Node {
keeb-finder-server-1 | type: 'text',
keeb-finder-server-1 | data: '€179.00',
keeb-finder-server-1 | parent: Node {
keeb-finder-server-1 | type: 'tag',
keeb-finder-server-1 | name: 'p',
keeb-finder-server-1 | namespace: 'http://www.w3.org/1999/xhtml',
keeb-finder-server-1 | attribs: [Object: null prototype],
keeb-finder-server-1 | 'x-attribsNamespace': [Object: null prototype],
keeb-finder-server-1 | 'x-attribsPrefix': [Object: null prototype],
keeb-finder-server-1 | children: [Circular *1],
keeb-finder-server-1 | parent: [Node],
keeb-finder-server-1 | prev: [Node],
keeb-finder-server-1 | next: [Node]
keeb-finder-server-1 | },
keeb-finder-server-1 | prev: null,
keeb-finder-server-1 | next: null
keeb-finder-server-1 | }
keeb-finder-server-1 | ]
For the record, it outputs several of these messages pertaining to different items on their website. I just want to get the data component of all these responses.
I'm sure it's something fairly simple that I missed when reading the docs, but I can't seem to get this working.
You can get the prices by doing:
var prices = $('.price_color').map(function() {return $(this).text().trim();}).toArray();
console.log('prices', prices);
Additionally, you can simplify your code for the alt and src thumbnails by doing:
var thumbnails = $('.thumbnail').map(function() {
return {'alt':$(this).attr('alt'), 'src':$(this).attr('src')};
}).toArray();
console.log('thumbnails', thumbnails);
Finally, if you'd like to get the src, alt, and price in one loop, then you can do the below. It really simplifies the code and makes it easier to understand.
var products = $('.product_pod').map(function() {
let image = $(this).find('.thumbnail');
let price = $(this).find('.price_color').text().trim();
return {'src':image.attr('src'), 'alt':image.attr('alt'), 'price':price};
}).toArray();
console.log('products', products);