使用 JS 循環以從 Chrome 控制台上的 HTML 列表中獲取信息

Question

我正在嘗試在 Google Chrome 控制台上使用 Javascript 從站點獲取財產交易數據。

到目前為止，我已經弄清楚如何使用以下代碼獲取第一個屬性的屬性對象中的信息：

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;

列表上還有 26 個其他屬性，我想遍歷所有這些屬性並將它們放入屬性對象中。 我想我需要做一個 for 循環，但我無法弄清楚如何執行它。

Answer 1

您可以通過 JSON.stringify() 使用 console.log 例如：

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

和你的代碼：

console.log(JSON.stringify(property))

Answer 2

您可以使用 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);