jQuery scraping elements from the DOM (simple, thoroughly explained Q!)

Question

I'm struggling to wrap my head around what is actually returned when we scrape a parent element with JS/jQuery. Through my learning, I have found that a good way to approach scraping an item on the page with multiple properties that we want scrape into unique arrays (let's say Book Title, Book Price, Inventory Status), would be to locate the parent element, convert that an array, then .map() through it to extract each element that we want.

For a simple example, all of the data I need is located in the product_pod class in the code below.

<article class="product_pod">
<div class="image_container">...</div>
<p class="star-rating Five">...</p>
<h3>
  <a href="catalogue/libertarianism_for_beginners_999/index.html" title="Libertarianism for Beginners">Libertarianism for Beginners</a>
</h3>
<div class="product_price">
  <p class="price_color">$53.74</p>
  <p class="instock">In Stock</p>
</div>
</article>

So I understand that I need to iterate through the product_pod array. I've followed other programmer's leads to come up with this:

const container = $('.product_pod').toArray();
let mapper = container.map(elem => {
        const activate = $(elem);
        const title = activate.find('a').map((i, x) => $(x).attr('title'));
        const price = activate.find('.price_color').text();
        const inventory = activate.find('.instock').text().trim();
        return({title,price,inventory});
    })

Or something like that.

What I'm asking is that when I console.log(container), I get this absolutely unreadable object returned (img below), where Book Title, Book Price, Inventory Status are nowhere to be found.

Why does it do this? How can I read this? And how can I set up a map function with all of these unnamed [Object], [Array] fields, when I have no idea how to iterate through the gibberish?

Thank you guys and gals.

Updated log:

Read [here](https://stackoverflow.com/questions/44444601/node-js-console-log-does-not-show-items-in-array-but-instead-shows-object) to know why console.log displays "bullshit". — Louys Patrice Bessette, Jan 05 '21 at 18:41

Rory McCrossan · Accepted Answer · 2021-01-06T08:56:12.050

2

You need to include a call to get() to retrieve the array generated by map() stored within the resulting jQuery object. It's that jQuery object which you're seeing logged to the console.

const $container = $('.product_pod');
let mapper = $container.map(elem => {
  const $activate = $(elem);
  const title = $activate.find('a').map((i, x) => $(x).('title')).get();
  const price = $activate.find('.price_color').text();
  const inventory = $activate.find('.instock').text().trim();
  return({ title, price, inventory });
}).get();

Note that I made a couple of tweaks in the above code. Firstly, toArray() isn't required as map() will iterate through Elements within a jQuery object already. Secondly you should look to use prop() over attr() where possible.

edited Jan 06 '21 at 08:56

answered Jan 05 '21 at 18:38

Rory McCrossan

331,213
40
305
339

I really appreciate your response. However, this does not exactly solve my issue. Perhaps I should note that I'm using Cheerio? – Conner Jan 05 '21 at 22:39
I have included an updated screenshot of my console, including the unintelligible objects its returning. I would love to know more about the .get() method, in the context of manipulating arrays. I was excited for that solution but no dice yet. – Conner Jan 05 '21 at 22:47
Ah, my bad! I missed a `get()` call on the inner `map()` reference. I updated the answer for you – Rory McCrossan Jan 06 '21 at 08:56

jQuery scraping elements from the DOM (simple, thoroughly explained Q!)

1 Answers1