解析JSON对象，将每个项目/行作为HTML注入DOM

Question

我有一些JavaScript，它解析一个JSON对象，并根据日期值在记录之间插入一个日期分隔符。类似于Windows文件资源管理器显示日期分隔符的方式，如上周、本月早些时候、上个月等。

我当前的实际项目只是简单地更新JSON对象，并将每个项中的数据注入页面HTML中。

在这个JSFiddle的测试项目中，我让它比较JSON对象中的日期值，并创建不同的日期潜水员组。

测试项目http://jsfidle.net/0vsz8jk4/19/只需在每个date diver组下打印date diver组及其子项，并调用：

out.innerHTML = JSON.stringify(groups, null, "\t")

这看起来是这样的...

我需要帮助将每个项目（包括日期分隔符）传递到另一个JavaScript函数中，该函数将获取JSON数据并用它创建一些HTML，然后将其注入页面DOM中。

类似这样的东西

taskActivitiesContainer.prepend(taskActivityRowHtmlTemplate).fadeIn(2000);

其中TaskActivityRowhtmlTemplate是每个JOSN行/记录/项。它将被传递到一个函数中，该函数使用该行/记录中的项添加一些HTML格式，然后将该行注入DOM中。

我有一个小的日期实用程序代码来帮助日期比较...

// Date library for DateTime comparisons and checking if a date is in-between a range of 2 dates!
var dates = {
  convert: function(d) {
    // Converts the date in d to a date-object. The input can be:
    //   a date object: returned without modification
    //  an array      : Interpreted as [year,month,day]. NOTE: month is 0-11.
    //   a number     : Interpreted as number of milliseconds
    //                  since 1 Jan 1970 (a timestamp)
    //   a string     : Any format supported by the javascript engine, like
    //                  "YYYY/MM/DD", "MM/DD/YYYY", "Jan 31 2009" etc.
    //  an object     : Interpreted as an object with year, month and date
    //                  attributes.  **NOTE** month is 0-11.
    return (
      d.constructor === Date ? d :
      d.constructor === Array ? new Date(d[0], d[1], d[2]) :
      d.constructor === Number ? new Date(d) :
      d.constructor === String ? new Date(d) :
      typeof d === "object" ? new Date(d.year, d.month, d.date) :
      NaN
    );
  },
  compare: function(a, b) {
    // Compare two dates (could be of any type supported by the convert
    // function above) and returns:
    //  -1 : if a < b
    //   0 : if a = b
    //   1 : if a > b
    // NaN : if a or b is an illegal date
    // NOTE: The code inside isFinite does an assignment (=).
    return (
      isFinite(a = this.convert(a).valueOf()) &&
      isFinite(b = this.convert(b).valueOf()) ?
      (a > b) - (a < b) :
      NaN
    );
  },
  inRange: function(d, start, end) {
    // Checks if date in d is between dates in start and end.
    // Returns a boolean or NaN:
    //    true  : if d is between start and end (inclusive)
    //    false : if d is before start or after end
    //    NaN   : if one or more of the dates is illegal.
    // NOTE: The code inside isFinite does an assignment (=).
    return (
      isFinite(d = this.convert(d).valueOf()) &&
      isFinite(start = this.convert(start).valueOf()) &&
      isFinite(end = this.convert(end).valueOf()) ?
      start <= d && d <= end :
      NaN
    );
  },

  // Subtract number of months from current month
  // dates.subtractMonth(1)
  subtractMonth: function(numberOfMonths) {
    //var d = this;
    var d = new Date();
    d.setMonth(d.getMonth() - numberOfMonths);
    d.setDate(1);
    return d;
  }

};

这是我的测试演示代码，用来解析JSON对象，并确定日期分隔符应该放在JSON项目之间的位置。

// JSON records which the date labels will be injected in-between in the HTML that is generated.
var task_activities = [{"id":1,"name":"record 1","date_time":"7\/5\/2015"},{"id":2,"name":"record 2","date_time":"7\/9\/2015"},{"id":3,"name":"record 3","date_time":"7\/13\/2015"},{"id":4,"name":"record 4","date_time":"7\/17\/2015"},{"id":5,"name":"record 5","date_time":"7\/21\/2015"},{"id":6,"name":"record 6","date_time":"7\/25\/2015"},{"id":7,"name":"record 7","date_time":"7\/29\/2015"},{"id":8,"name":"record 8","date_time":"8\/1\/2015"},{"id":9,"name":"record 9","date_time":"8\/5\/2015"},{"id":10,"name":"record 10","date_time":"8\/9\/2015"},{"id":11,"name":"record 11","date_time":"8\/13\/2015"},{"id":12,"name":"record 12","date_time":"8\/17\/2015"},{"id":13,"name":"record 13","date_time":"8\/21\/2015"},{"id":14,"name":"record 14","date_time":"8\/25\/2015"},{"id":15,"name":"record 15","date_time":"8\/29\/2015"},{"id":16,"name":"record 16","date_time":"9\/1\/2015"},{"id":17,"name":"record 17","date_time":"9\/5\/2015"},{"id":18,"name":"record 18","date_time":"9\/9\/2015"},{"id":19,"name":"record 19","date_time":"9\/10\/2015"},{"id":20,"name":"record 20","date_time":"9\/17\/2015"}];


var dateLabels = [];

var groups = {
    'A while Ago': [],
    'Last Month': [],
    'Earliar in the Month': [],
    'Last Week': [],
    'Earlier this Week': [],
    'Yesterday': [],
    'Today': [],
    'other': []
}


dateRangeLabels = {
    'Today': {
        'start': new Date('2015-09-12T00:00:00'),
        'end': new Date('2015-09-12T00:00:00'),
        'dateFunc': 'inRange'
    },    
    'Yesterday': {
        'start': new Date('2015-09-11T00:00:00'),
        'end': new Date('2015-09-11T00:00:00'),
        'dateFunc': 'inRange'
    },    
    'Earlier this Week': {
        'start': new Date('2015-09-06T00:00:00'),
        'end': new Date('2015-09-10T00:00:00'),
        'dateFunc': 'inRange'
    },
    'Last Week': {
        'start': new Date('2015-08-30T00:00:00'),
        'end': new Date('2015-09-05T00:00:00'),
        'dateFunc': 'inRange'
    },
    'A while Ago': {
        'start': new Date('2010-08-30T00:00:00'),
        'end': new Date('2015-07-31T00:00:00'),
        'dateFunc': 'inRange'
    },
    'Last Month': {
        'start': new Date('2015-08-01T00:00:00'),
        'end': new Date('2015-08-31T00:00:00'),
        'dateFunc': 'inRange'
    },
    'Earliar in the Month': {
        'start': new Date('2015-08-30T00:00:00'),
        'end': new Date('2015-09-05T00:00:00'),
        'dateFunc': 'inRange'
    },
    'other': {
        'start': new Date('2015-09-13T00:00:00'),
        'end': new Date('2999-12-31T00:00:00'),
        'dateFunc': 'inRange'
    }
}



// Loop over each Task Activity record and generate HTML
$.each(task_activities, function(i, activity) {
    console.log(activity.date_time);


    for (var key in dateRangeLabels) {
       if (dateRangeLabels.hasOwnProperty(key)) {

            //console.log(key, dateRangeLabels[key]);

           if(dateRangeLabels[key]['dateFunc'] == 'inRange'){

               if(dates.inRange(activity.date_time, dateRangeLabels[key]['start'], dateRangeLabels[key]['end'])){
                   return groups[key].push(activity);
               }

           }else{

               if(dates.compare(activity.date_time, dateRangeLabels[key]['start'])){
                 return groups[key].push(activity);
               }
           }

       }
    }    



}); // end each


//iterate out and print to the screen:
out.innerHTML =JSON.stringify(groups, null, "\t");

摘要

我需要使用我的JSON对象并对其进行解析，检查其中的日期值，并在一些记录之间插入一个日期分隔符。

然后，我需要将JSON对象以正确的顺序打印到DOM中，并在其中注入日期分隔符。

我这里的演示已经完成了大部分工作http://jsfidle.net/0vsz8jk4/19/我只需要帮助将最终结果解析为HTML并将每个JSON项注入DOM。

当前的演示获取我的JSON对象并迭代每个项。然后比较每个项目中的日期，以确定该项目应位于哪个日期分隔符组下。
然后在日期分隔符数组中正确的日期分隔符键下推入该行/项目。

我需要迭代新的date divider数组/对象，并且能够将date divider注入DOM，然后能够将它的所有子项注入到其下的DOM中。

如果一个数据分频器没有任何子项，那么该分频器就不应该被注入DOM中。

我已经构建了一个函数，用于获取传递给它的当前行的JSON数据，它将根据JSON项中的数据生成正确的HTML，并将HTML作为字符串返回，然后将其注入DOM>

所以我真的只是需要帮助来迭代这个新数据，直到我将有权将每个项目/行发送到我的html生成函数中。

Answer 1

这样怎么样：

for (name in groups) {
    group = groups[name];
    if (group.length == 0) {
        console.log("skip: " + name);
        continue; // no items
    }
    console.log(name); // A while Ago, Last Month, etc
    for (var i = 0; i < group.length; i++) {
        // 8 : record 8 : 8/1/2015
        console.log(group[i].id + " : " + group[i].name + " : " + group[i].date_time);
    }
}

http://jsfidle.net/0kul1gmf/7/