Question

当我使用console.log（）时，我有一个功能可以检索最近10条Facebook帖子。它正确地显示消息。但是当尝试用每个消息填充ul作为列表项时，它只显示第一条消息，我似乎无法解决它。提前谢谢

function getInfo() {
  FB.api('/me', 'GET', {fields: 'first_name,last_name,name,id,posts.limit(999),email,picture.width(150).height(150)',}, function(response) {
   document.getElementById('myname').innerHTML = response.name;
   document.getElementById('myemail').innerHTML = response.email;
   var gpost = document.getElementById('myposts').innerHTML = response.posts;
  ///////////Only last 10 status posts/////////////
   var postcount =0;
   var ul =document.createElement('ul');
   for(var i=0;i<999;i++){
     if(!gpost.data[i].message==" "){
        if (postcount<10){
          var li = document.createElement('li');
          var list=document.getElementById('myposts').innerHTML=gpost.data[i].message;
             li.appendChild('list');
            ul.appendChild(li);

         console.log(gpost.data[i].message);
         postcount++;
    }else{
      break;
    }
   }       
  }
    document.getElementById('status').innerHTML = "<img src='" + response.picture.data.url + "'>";
  });
}

Answer 1

我认为在测试期间，您尝试了一些有趣的变体，例如从文档中获取列表，然后尝试添加新列表，例如：

var list=document.getElementById('myposts').innerHTML=gpost.data[i].message;
li.appendChild( list );

我不确定你想对这个语句做什么（你得到myposts元素，将innerHTML设置为你收到的消息，然后你将该动作的结果附加到你新创建的li。

为什么不像这样设置li元素的innerHTML：

li.innerHTML = gpost.data[i].message;

你似乎忘记的另一件事是你最后没有真正地将ul元素添加回你的文档，我认为，在for循环之后，你忘了这个（如果你愿意的话）替换内容）

document.getElementById('myposts').innerHTML = ul.outerHTML;

我创建了一个代码片段，其中包含FB api的模拟（至少从我的初始帖子中可以看到）并更新了您的代码片段，以便您可以看到实际发生的事情

主要变化是for循环，有点容易

for (i = 0; i < gpost.data.length && postcount < 10; i++) {
  if (gpost.data[i].message) {
    li = document.createElement('li');
    li.innerHTML = gpost.data[i].message;
    ul.appendChild(li);
    postcount++;
  }
}

以及我替换myposts元素的内容

的事实

'use strict';

var posts = [{
            message: 'message1'
          },
          {
            message: 'message2'
          },
          {
            message: null
          },
          {
            message: ''
          },
          {
            message: 'message5'
          }
        ];

// just for testing purposes
var FB = {
  api: function(item, action, fields, callback) {
    callback({
      name: 'name',
      email: 'email',
      posts: {
        data: posts
      },
      picture: {
        data: {
          url: '/favicon.ico'
        }
      }
    });
  }
};

function getInfo() {
  FB.api('/me', 'GET', {
    fields: 'first_name,last_name,name,id,posts.limit(999),email,picture.width(150).height(150)',
  }, function(response) {
    document.getElementById('myname').innerHTML = response.name;
    document.getElementById('myemail').innerHTML = response.email;
    var gpost = response.posts,
      postcount = 0,
      ul = document.createElement('ul'),
      li, i;
    for (i = 0; i < gpost.data.length && postcount < 10; i++) {
      if (gpost.data[i].message) {
        li = document.createElement('li');
        li.innerHTML = gpost.data[i].message;
        ul.appendChild(li);
        postcount++;
      }
    }

    document.getElementById('myposts').innerHTML = ul.outerHTML;
    document.getElementById('status').innerHTML = "<img src='" + response.picture.data.url + "'>";
  });
}

getInfo();

/* add some messages from time to time for the next 5 seconds */
var interval = setInterval( () => posts.push({ message: 'message' + ( posts.length + 1) }), 500 );

// stop the interval in like 5 seconds
setTimeout( () => clearInterval( interval ), 5000 );

<div>
  <div id="myname"></div>
  <div id="myemail"></div>
  <div id="myposts"></div>
  <div id="status"></div>
</div>
<button type="button" onclick="getInfo()">Get messages</button>

卡住：使用带循环的Javascript用<li>填充html <ul>？

1 个答案: