javascript - 解析 JSON 对象以将每个项目/行作为 HTML 注入(inject) DOM

Question

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

我当前的实际项目只是迭代 JSON 对象并将每个项目的数据注入(inject)到页面 HTML 中。

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

测试项目http://jsfiddle.net/0vsz8jk4/19/只需打印日期潜水员组及其每个组下的子项目，并调用:

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

看起来像这样...

<小时/>

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

类似这样的

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

其中 taskActivityRowHtmlTemplate 是每个 JOSN 行/记录/项目。它将被传递到一个函数中，该函数会使用该行/记录中的项目添加一些 HTML 格式，然后将该行注入(inject)到 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 中，并在其中注入(inject)日期分隔符。

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

<小时/>

当前演示采用我的 JSON 对象并迭代每个项目。然后，它会比较每个项目中的日期，以确定其应位于哪个日期分隔符组下。
然后，它将该行/项目推送到日期分隔符数组中正确的日期分隔符键下。

我需要迭代新的日期分隔符数组/对象，并能够将日期分隔符注入(inject)到 DOM 中，然后能够将其所有子项注入(inject)到其下的 DOM 中。

如果数据分隔符没有任何子项，则不应将该分隔符注入(inject)到 DOM 中。

我已经构建了一个函数，用于获取传递给它的当前行的 JSON 数据，它将根据 JSON 项内的数据生成正确的 HTML，并将 HTML 作为字符串返回，然后将其注入(inject)到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://jsfiddle.net/0kuL1gmf/7/