Question

我有一些json有几个看起来像这样的对象：

data =[{"itemID":"195","area":"home","note":"fix","date":1481200571},{"itemID":"205","area":"work","note":"drop off","date":1481203571},{"itemID":"207","area":"home","note":"find it","date":1481204571}];

依赖于该数据的是许多图表和js查询/操作（用于循环，过滤数组等）。当json数据更改（添加或删除记录）时，更新/更新所有其他项目的最简单/最佳方法是什么？

这里的标准做法应该是什么？我不想强制页面重新加载，我只是希望在源数据更改时更新所有其他信息。不需要服务器往返，这将完全涉及在初始下载后操作客户端上的数据。

Answer 1

好的，我按照我想要的方式工作，这就是我所做的：

由于过滤所有数据将通过下拉选择（日期范围），我写了以下内容：

jQuery(document).ready(function(){    

jQuery('select#dfilter').on('change', function (e) {

var origdata = json;
var optionSelected = jQuery("option:selected", this);
var valueSelected = this.value;
if (jQuery('select#dfilter').val() == 'week') {
var startDate = new Date();
startDate.setDate(startDate.getDate() - 7);
} else if (jQuery('select#dfilter').val() == 'month') {
var startDate = new Date();
startDate.setDate(startDate.getDate() - 30);
} else {
var startDate = new Date("2016-11-01");
}

var endDate = new Date();
var data = origdata.filter(function (d, i) {
var pubDate = new Date(d.date * 1000);
    return pubDate >= startDate && pubDate <= endDate;
})

// All other items filter by "data" already filtered above, such as:

var numFIX = data.reduce(function(n, data) {
    return n + (data.note("fix"));
}, 0);

// Then draw my charts etc based on "data"

}); //end select on change

//make initial value load when doc ready
jQuery( "select#dfilter" ).trigger( 'change' ); 

}); // end document ready

如果某人有更好的方法或一些提示，我会全力以赴，但到目前为止似乎运作良好。

Answer 2

您应该将最新数据与旧数据进行比较，每当遇到更改时，您只需使用javascript更新数据即可操作页面内容，而无需重新加载。

比较的例子如下：

项目数量已更改。
有关项目的任何数据已更改。

因此，根据场景，您只需使用普通的javascript添加新元素和新项目，或者只更新旧的显示数据。

当json数据更改时更新所有相关的js

2 个答案: