用JS循环从Chrome控制台的HTML列表中获取信息

Question

我正试图从使用Javascript的网站上的谷歌Chrome控制台获得房地产交易的数据。

到目前为止，我已经弄清楚了如何使用以下代码在属性对象中获取第一个属性的信息:

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循环，但是我不知道如何执行它。

更新:

下面的代码解决了大部分问题，但是我在获取所有事务时遇到了麻烦，因为许多事务都被分页了。请参阅这里的示例，其中页面中有14个交易选项卡。如何通过扩展下面的代码来获得它们?

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(列表);

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);