从 JSON 数据按组显示嵌套的 JS 数组到 HTML

Question

我正在从返回博客文章信息的 API 调用数据。我已经把数据按月排序成一个数组。我似乎能够将信息打印到控制台，但实际上无法将此信息显示为 HTML。我跑下了这个循环的兔子洞。

我希望每个帖子都显示在它自己的 div 中。例如，所有 1 月的帖子都在自己的 div 中，2 月在另一个 div 中，等等。

这是原始JSON Data 的示例。 CTRL + F 并输入“文本帖子”

我正在使用 ajax 调用 API

  //...

  $.ajax({
  type: 'GET',
  url: "http://api.tumblr.com/v2/blog/{blog}.com/posts/text?api_key={APIKey}",
  dataType: 'jsonp',
  success: function(data){

    let groupByMonth = Object.create(null);
    var objectPosts = data.response.posts;

    $.each(objectPosts, function(key, value) {

      let getTitle = objectPosts[key].title
      let getDescription = objectPosts[key].body
      let getDate = objectPosts[key].date

      let getMonth = getDate.split('-')[1]

      if (!groupByMonth[getMonth]) {
        groupByMonth[getMonth] = [];
      }

      groupByMonth[getMonth].push({
        Title: getTitle,
        Description: getDescription,
        DatePublished: getDate
      });

    });

    let byMonth =
      Object.entries(groupByMonth)
        .map(([k, v]) => ({[k]: v}));

    console.log(byMonth);

    // The Tricky Part 
    $.each(byMonth, function(key, value) {
      var outer = byMonth[key]

      $.each(outer, function(k, v) {
        var inner = outer[k]

        var jData = JSON.stringify(v);

        $('<div class = "month"> </div>').appendTo('#blog-posts')

        $.each(inner, function(i, obj) {

          var title = inner[i].Title
          var description = inner[i].Description
          var date = inner[i].DatePublished

          $('<div class = "post"><h2>' + title + '</h2><p>'
              + description + '</p>').appendTo('.month')

        })         
    }

我在输出中使用了虚拟数据。

console.log(byMonth) 返回一个嵌套的 JS 数组

0:
  11:
    0: {Title: "Sample Title", Description: "Sample Desc", DatePublished: "2016-11-29 16:23:35 GMT"}
    1: {Title: "Sample Title", Description: "Sample Desc", DatePublished: "2016-11-29 16:23:35 GMT"}
    2: {Title: "Sample Title", Description: "Sample Desc", DatePublished: "2016-11-29 16:23:35 GMT"}

1:
  09: 
    0: {Title: "Sample Title", Description: "Sample Desc", DatePublished: "2016-09-22 12:34:40 GMT"}

2:
  08:
    0: {Title: "Sample Title", Description: "Sample Desc", DatePublished: "2016-08-29 16:23:35 GMT"}
    1: {Title: "Sample Title", Description: "Sample Desc", DatePublished: "2016-08-29 16:23:35 GMT"}

11表示11月份，09表示9月份，以此类推

console.log(jData)返回相应月份的数据

[{Title: "Sample Title", Description: "Sample Desc", DatePublished: "2016-11-29 16:23:35 GMT"},{Title: "Sample Title", Description: "Sample Desc", DatePublished: "2016-11-29 16:23:35 GMT"},{Title: "Sample Title", Description: "Sample Desc", DatePublished: "2016-11-29 16:23:35 GMT"}] 
[{Title: "Sample Title", Description: "Sample Desc", DatePublished: "2016-09-22 12:34:40 GMT"}]
[{Title: "Sample Title", Description: "Sample Desc", DatePublished: "2016-08-29 16:23:35 GMT"},{Title: "Sample Title", Description: "Sample Desc", DatePublished: "2016-08-29 16:23:35 GMT"}]

我感觉接近解决方案，但我坚持将信息实际输出到 HTML。在将title 和description 附加到<div class = "month"> 之后，每个 div 包含所有月份的所有标题和描述，而不是它们自己的月份。我也尝试过for 循环，但没有运气。解决方案可能很简单。提前致谢！

Answer 1

在您的解决方案中，您最终会得到多个 <div class="month"/> 元素，并且数据将附加到所有元素。

修复：在外循环中，获取对已附加的月份元素的引用，然后在内循环中使用该元素进行附加。

var blogPosts = $('#blog-posts'); // get reference once to avoid repeat lookups

$.each(byMonth, function(key, value) {
  var outer = byMonth[key]

  $.each(outer, function(k, v) {
    var inner = outer[k];

    var jData = JSON.stringify(v);

    var monthBlogPosts = $('<div class = "month"> </div>').appendTo(blogPosts);
    //  ^ obtain reference here 

    $.each(inner, function(i, obj) {
      var title = inner[i].Title;
      var description = inner[i].Description;
      var date = inner[i].DatePublished;

      $('<div class = "post"><h2>' + title + '</h2><p>'
          + description + '</p>').appendTo(monthBlogPosts);
      //                                   ^ use reference here
    })         
}