如何在JavaScript循环后输出嵌套对象的值？——推特克隆项目forEach循环渲染推文问题求助

嘿，我看到你在推特克隆项目里遇到推文显示的问题了，咱们来一步步解决它～

问题分析 #

你的代码里有两个关键问题导致推文内容无法正确显示：

• 错误的属性访问：你在遍历tweetDivs时，试图访问tweetDiv.tweets，但实际上user1.tweets里的每个元素本身就是一条推文对象（包含text和timestamp），并没有tweets子属性。
• DOM元素获取时机错误：你在动态生成sections元素并插入到页面之前，就获取了midSection，这时候拿到的是页面初始的空<div id="mid-section">，而不是你在sections里创建的那个中间区域，导致推文被加到了错误的位置。

修正后的代码 #

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

// 先创建并插入sections到DOM
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>
`;
container.appendChild(sections);

// 现在sections已经插入到DOM，再获取正确的mid-section元素
var midSection = document.querySelector('.mid-section');
// 获取存放推文的容器
var tweetsContainer = midSection.querySelector('.tweets');

var user1Tweets = user1.tweets;
// 这里不需要额外处理tweets属性，因为user1.tweets已经是正确的数组
user1Tweets.forEach(function(tweet) {
  var tDiv = document.createElement('div');
  tDiv.classList.add('tweetDiv');
  // 直接使用tweet的text和timestamp属性
  tDiv.innerHTML = `
    <div class="tweet-text">${tweet.text}</div>
    <div class="tweet-timestamp light-text">${tweet.timestamp}</div>
  `;
  tweetsContainer.appendChild(tDiv);
})

关键修改点说明 #

1. 调整DOM操作顺序：先把动态生成的sections插入到container中，再获取里面的mid-section和tweets容器，确保拿到的是正确的元素。
2. 修正推文属性访问：直接使用tweet.text和tweet.timestamp来渲染推文内容，不需要多余的map处理（因为user1.tweets已经是结构正确的数组）。
3. 将推文加到正确的容器：把生成的tweetDiv加到.tweets容器中，而不是直接加到mid-section，更符合页面结构的逻辑。

这样修改后，你的推文应该就能正确显示在页面上啦～

内容的提问来源于stack exchange，提问作者Austin2080