I'm currently engaged in some web scraping, attempting to extract both the image and text from different classes, and then showcase them together. Below is an example of the HTML snippet:
<div class="thumbnail">
<div class="image>
<img src="https://www.image.com/01.jpg">
</div>
<div class="text">
Apple
</div>
</div>
<div class="thumbnail">
<div class="image>
<img src="https://www.image.com/02.jpg">
</div>
<div class="text">
Banana
</div>
</div>
Within my loop, I aim to retrieve both the image and text content.
const group: { [key: string]: string } = {};
this.$('.thumbnail .image img[src]')
.get()
.forEach(img => {
const $img = this.$(img);
// Null Check
const imgText = $img
.siblings('.text')
.text()
.trim();
group[imgText] = location.origin + imgText;
});
Type = { 'Fruit': group };
Upon console logging, I notice that I can successfully retrieve the image but struggle to fetch the text. Various methods like siblings, next, closest have been attempted with no success. Moreover, I'm uncertain about what should replace location.origin.