javascript - 如何从对象内部进行 .append？

Question

我正在 WikiPedia API(MediaWiki)中工作，并且一直在研究如何获取结果/将它们插入数组中。使用 Angular，我终于能够成功地使用“forEach”来解决这个问题。

我现在的问题是，当我尝试将数据(对象)“.append”到 HTML 时，它对我不起作用。为了测试，我做了 console.log 它，它向控制台日志报告对象及其存在，但不确定如何真正将其推送到 HTML 格式。

我已附上一个以我当前状态 fork 的 CodePen 以供审核。我是 Angular 的新手，所以这不是我的重点 - 我不确定为什么 Angular 可以解析对象，但它确实有效。

  function wiki() {
$('#results').html('');
result = [];
search = $('#search').val();
$.getJSON(link + search, function(wikis) {
  var tempRes = wikis.query.pages;
  var page = 'http://en.wikipedia.org/?curid=';
  angular.forEach(tempRes, function(v, k) {
    result.push({
      title: v.title,
      body: v.extract,
      page: page + v.pageid
    })
    console.log(result);
    $('#results').append(result)
  })
})
}

链接+搜索变量在代码的早期建立，并且工作成功。任何帮助都是完美的——我们已经在这方面工作了一段时间了。 Code Pen Link

编辑:

经过进一步的尝试，我的问题通过修改附加来解决:

$('#results').append('<li>' + result[i].title + '<br>' + result[i].body+ '<br>' + result[i].page + '</li>')

我认为仅提取结果或结果[i]不足以提供适当的修改。我很欣赏题外话的回复和建议。

Answer 1

为了将 HTML 附加到元素，您需要首先构建它。要么将 HTML 标签构建为对象前面的字符串，然后追加，要么创建元素，然后追加:

var html = "";
result.each(function () {
    html += buildHtmlFromObject(this);
});
$('#results').append(html);