我如何在Javascript循环后输出一个嵌套对象的值?

Question

我在打印forEach循环的一些数据时遇到了一些麻烦。我正在做一个推特克隆，我正试图通过一个对象循环并打印出用户的推文。我正在让div在控制台中打印出来，但我似乎无法弄清楚如何让tweet在div中打印。

如有任何帮助，不胜感激。

var user1 = {
userName: '@elonmusk',
displayName: 'Elon Musk',
joinedDate: 'June 2009',
followingCount: 103,
tweetAmount: 18600,
followerCount: 47900000,
avatarURL: 'assets/elonmusk.jpg',
coverPhotoURL: 'assets/elonmusk-cover.jpeg',
tweets: [{
text: 'I admit to judging books by their cover',
timestamp: '2/10/2021 00:01:20'
},
{
text: 'Starship to the moon',
timestamp: '2/09/2021 18:37:12'
},
{
text: 'Out on launch pad, engine swap underway',
timestamp: '2/09/2021 12:11:51'
}
]
};
var container = document.getElementById('container');
var midSection = document.getElementById('mid-section')
var sections = document.createElement('div');
sections.classList.add('container');
sections.innerHTML = `
<div class="left-section"></div>
<div class="mid-section">
<div id="header">
<img class="arrow" src="./assets/arrow-left.svg" />
<div class="user-info">
<h2>${user1.displayName}</h2>
<div class="numberOfTweets light-text">${user1.tweetAmount}K Tweets</div>
</div>
</div>
<div class="cover-photo"><img src="${user1.coverPhotoURL}"/></div>
<div id="avatar">
<div class="profileImage"><img src="${user1.avatarURL}"/></div>
<div class="follow">
<button class="btn-more"><img src="./assets/three-dots.svg"/></button>
<button class="btn-follow btn-primary">Follow</button>
</div>
</div>
<h2 class="pl20">${user1.displayName}</h2>
<div class="user-info2 light-text pl20">${user1.userName}</div>
<div class="join-date light-text pl20 pt10">Joined ${user1.joinedDate}</div>
<div class="following pl20 pt10">
<p><span class="bold">${user1.followingCount}</span> Following</p>
<p class="pl20"><span class="bold">${user1.followerCount}</span> Followers</p>
</div>
<div class="tab-navigation pt20">
<div class="tabs">Tweets</div>
<div class="tabs">Tweets & replies</div>
<div class="tabs">Media</div>
<div class="tabs">Likes</div>
</div>
<div class="tweets">

</div>
</div>
<div class="right-section"></div>
`;
var user1Tweets = user1.tweets;
var tweetDivs = user1Tweets.map((tweetDiv) => {
if (!tweetDiv.tweets) {
return { ...tweetDiv,
tweets: []
};
} else if (!Array.isArray(tweetDiv.tweets)) {
return { ...tweetDiv,
tweets: Object.values(tweetDiv.tweets)
};
}
return tweetDiv;
});
tweetDivs.forEach(function(tweetDiv, i) {
var tDiv = document.createElement('div');
tDiv.classList.add('tweetDiv');
tDiv.innerHTML = `
${tweetDiv.tweets.map(function(tweet) {
return `<div>${tweet}</div>`
})}

`;
//console.log(tDiv)
midSection.appendChild(tDiv);
})
container.appendChild(sections);

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<div id="container">
<div id="mid-section"></div>
</div>

Answer 1

user1.tweets为数组。因此，您可以遍历数组，从每个对象获取text，并对其进行操作。

var user1 = {
tweets: [{
text: 'I admit to judging books by their cover',
timestamp: '2/10/2021 00:01:20'
},
{
text: 'Starship to the moon',
timestamp: '2/09/2021 18:37:12'
},
{
text: 'Out on launch pad, engine swap underway',
timestamp: '2/09/2021 12:11:51'
}
]
};

var midSection = document.getElementById('mid-section')
user1.tweets.forEach(function(tweetDiv, i) {
var tDiv = document.createElement('div');
tDiv.classList.add('tweetDiv');
tDiv.innerHTML = tweetDiv.text;
midSection.appendChild(tDiv);
})

<div id="mid-section"></div>