Javascript 将JSON数据中的嵌套JS数组按组显示为HTML

我从一个API调用数据，该API返回博客文章信息。我已经把数据按月整理成一个数组。我似乎能够将信息打印到控制台，但在将这些信息显示到HTML中时遇到了问题。我跑进了这个兔子洞

我希望每个帖子都显示在自己的分区中。例如，所有一月的帖子都显示在自己的分区中，二月的帖子显示在另一个分区中，等等

这里是一个原始的例子。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')

        })         
    }

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。在将

标题

和

说明

附加到

之后，每个div包含所有月份的所有标题和说明，而不是它们自己的月份。我也尝试过

循环，但没有成功。解决方案可能很简单。提前谢谢
 在您的解决方案中，您将得到多个
元素，并且数据将附加到所有元素中

修复：在外部循环中，获取对已附加的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
    })         
}

var blogPosts=$（'#blog posts'）；//获取一次引用以避免重复查找
$。每个（按月份、函数（键、值）{
外部变量=按月份[键]
$。每个（外部，功能（k，v）{
var内部=外部[k]；
var jData=JSON.stringify（v）；
var monthBlogPosts=$（''）.appendTo（blogPosts）；
//^请在此处获取参考
$。每个（内部，功能（i，obj）{
var title=内部[i]。title；
变量说明=内部[i]。说明；
var date=内部[i]。DatePublished；
$（''+标题+''
+description+'
'）。附录（monthblogsposts）；
//^请在此处使用引用
})         
}
如何确定哪个div是哪个月的div？它是基于索引的吗？
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
    })         
}