Looping through with JS to get info from HTML list on Chrome Console

Question

I am trying to get the data of property transactions from a site using Javascript on the Google Chrome console.

So far, I've figured out how to get the info in a property object for the first property using this code:

var property = [{}]

property[0]['Name']  = document.querySelector("#closed-deals-container > section > div > div.profile-recent-transactions.profile-recent-transactions--paginated > div:nth-child(1) > div > div.uc-listingCard-body > div.uc-listingCard-content > div > div.uc-listingCard-titles > a").innerText;

property[0]['City-State-Zip'] = document.querySelector("#closed-deals-container > section > div > div.profile-recent-transactions.profile-recent-transactions--paginated > div:nth-child(1) > div > div.uc-listingCard-body > div.uc-listingCard-content > div > div.uc-listingCard-titles > h2").innerText;

property[0]['Price'] = document.querySelector("#closed-deals-container > section > div > div.profile-recent-transactions.profile-recent-transactions--paginated > div:nth-child(1) > div > div.uc-listingCard-body > div.uc-listingCard-content > div > div.uc-listingCard--priceGrid-sm > div").innerText;

property[0]['Beds'] = document.querySelector("#closed-deals-container > section > div > div.profile-recent-transactions.profile-recent-transactions--paginated > div:nth-child(1) > div > div.uc-listingCard-body > div.uc-listingCard-content > div > div.uc-listingCard-subStats.checkable-undefined > div.uc-listingCard-subStat.uc-listingCard-subStat--beds").innerText;

property[0]['Baths'] = document.querySelector("#closed-deals-container > section > div > div.profile-recent-transactions.profile-recent-transactions--paginated > div:nth-child(1) > div > div.uc-listingCard-body > div.uc-listingCard-content > div > div.uc-listingCard-subStats.checkable-undefined > div.uc-listingCard-subStat.uc-listingCard-subStat--baths").innerText;

There are 26 other properties on the list, and I'd like to loop through all of them and put them in the property object. I think I need to do a for loop, but I am having trouble figuring out how to execute it.

Answer 1

you can use console.log by JSON.stringify() for example:

console.log(JSON.stringify({ x: 5, y: 6 }));
// expected output: "{"x":5,"y":6}"

and for your code:

console.log(JSON.stringify(property))

Answer 2

You could write something like this using jQuery.

const list = [];

jQuery('div.uc-listingCard-content').each(function () {
    const $this = jQuery(this);

    list.push({
        'Name': $this.find('.uc-listingCard-titles > a').text().trim(),
        'City-State-Zip': $this.find('.uc-listingCard-titles > h2').text().trim(),
        'Price': $this.find('.uc-listingCard--priceGrid-sm > div').text().trim(),
        'Beds': $this.find('.uc-listingCard-subStat--beds').text().trim(),
        'Baths': $this.find('.uc-listingCard-subStat--baths').text().trim(),
    });

});

console.log(list);