Javascript 循环日期并添加对象(如果不是JSON数据中的exist)
我需要使用fullcalendar.io创建日历视图。要使用日历,我需要创建一个JSON,如下所示:Javascript 循环日期并添加对象(如果不是JSON数据中的exist),javascript,jquery,arrays,json,object,Javascript,Jquery,Arrays,Json,Object,我需要使用fullcalendar.io创建日历视图。要使用日历,我需要创建一个JSON,如下所示: var db_data = [ { "id": 5, "user_id": 1, "article_id": 5, "title": "", "start": "2016-03-25 15:18:46" }, { "id": 4, "user_id": 1, "article_id": 5, "price": 5
var db_data = [
{
"id": 5,
"user_id": 1,
"article_id": 5,
"title": "",
"start": "2016-03-25 15:18:46"
},
{
"id": 4,
"user_id": 1,
"article_id": 5,
"price": 55,
"title": "",
"start": "2016-03-15 15:18:46"
} etc.
我需要在日历上列出从时段开始到时段结束的每个日期的价格,但对于一些价格,我在数据库中有值,而对于其他价格,我没有值,所以我需要使用标准价格(等等,50美元)
所以我有period_start和period_end,我从数据库中获取了一些数据,但现在我需要创建一个JSON,其中包含数据库中没有的日期对象,所以我创建了代码:
function fulljson (){
var db_data;
$.ajax({
url: "http://localhost:8888/diving/{{$article->id}}",
type: "GET",
async: true,
dataType: "json",
success: function(data) {
db_data = data;
console.log(db_data);
// declare variables
var period_start = new Date('{{ date('Y-m-d', strtotime($article->from)) }}'),
period_end = new Date('{{ date('Y-m-d', strtotime($article->to)) }}'),
current_date = period_start,
array_of_all_dates = [];
// Create a populated array of dates
while (current_date.getTime() <= period_end.getTime()) {
array_of_all_dates.push(current_date);
current_date = new Date(+current_date);
current_date.setDate(current_date.getDate() + 1);
}
// Now loop over the array of populated dates and mutate, so something like
array_of_all_dates = array_of_all_dates.map(function (date) {
var found_in_db = db_data.filter(function (db_data) {
return new Date(db_data.start.replace(" ", "T")).getTime() === date.getTime(); // I need to do this comparison better!
});
if (found_in_db.length > 0) {
return found_in_db[0];
}
var new_object = {
title: '',
start: date,
price: '{{$article->price}}'
};
console.log(new_object);
return new_object;
});
console.log('result'+array_of_all_dates);
drawCalendar(array_of_all_dates);
},
error: function (data) {
console.log(data);
console.log('ERROR');
}
});
};
$(document).ready(function() {
fulljson();
});
function drawCalendar(data) {
$('#calendar').fullCalendar({
header: {
left: 'prev today',
center: 'title',
right: 'next'
},
defaultDate: Date.now(),
eventRender: function(event, element) {
element.find("fc-event-container").remove();
element.find(".fc-content").remove();
element.find(".fc-event").remove();
var new_description =
'<div style="display:inline-flex; float:right;"><div class="col-md-6"style="margin-top:5px";><p class="price">' + event.price + 'e</p></div>';
element.append(new_description);
} ,// allow "more" link when too many events
events: data,
loading: function(bool) {
$('#loading').toggle(bool);
}
}
});
};
函数fulljson(){
var-db_数据;
$.ajax({
url:“http://localhost:8888/diving/{{$article->id}}“,
键入:“获取”,
async:true,
数据类型:“json”,
成功:功能(数据){
db_data=数据;
console.log(db_数据);
//声明变量
var period_start=new Date({{Date('Y-m-d',strottime($article->from))}),
period_end=新日期({{Date('Y-m-d',strottime($article->to))}),
当前日期=期间开始日期,
数组_of_all_dates=[];
//创建填充的日期数组
while(当前_date.getTime()0){
返回在_数据库[0]中找到的_;
}
var new_object={
标题:“”,
开始日期:,
价格:“{{$article->price}”
};
console.log(新的_对象);
返回新的_对象;
});
console.log('result'+所有日期的数组\);
drawCalendar(所有日期的数组);
},
错误:函数(数据){
控制台日志(数据);
console.log('ERROR');
}
});
};
$(文档).ready(函数(){
fulljson();
});
功能挂历(数据){
$(“#日历”).fullCalendar({
标题:{
左:“上一个今天”,
中心:'标题',
右图:“下一步”
},
defaultDate:Date.now(),
eventRender:函数(事件,元素){
查找(“fc事件容器”).remove();
元素。查找(“.fc内容”).remove();
元素。查找(“.fc事件”).remove();
var new_description=
“”+event.price+“e
”; 元素。追加(新的_描述); },//事件太多时允许“更多”链接 事件:数据, 加载:函数(bool){ $('#加载')。切换(bool); } } }); }; 现在这段代码在Chrome中工作: 但在FireFox中,我得到了以下信息: 请看1.2.3。二月,我从数据库中得到数据。您将看到这些变化 那么,为什么这段代码在Chrome中有效而在Firefox中无效呢?什么是问题?有没有更好的办法来解决这个问题 那么,为什么这段代码在Chrome中有效而在Firefox中无效呢 因为提供的日期字符串无效,Firefox在传递到new date()
时会将这些字符串转换为invalid date
。然而,Chrome会解析它们,但这不是跨浏览器的预期行为
从服务器发送有效的ISO字符串或插件文档中推荐的任何格式
来自FullCalendar文档:
为事件或事件源指定事件对象时,可以
指定IETF格式的字符串(例如:“Wed,2009年10月18日美国东部时间13:00:00”),
ISO8601格式的字符串(例如:“2009-11-05T13:15:30Z”)或UNIX
时间戳
如何更好地解决此比较:while(current_date.getTime()0){return find_in_db[0];}……我很难看到两个屏幕截图之间的差异。什么是1.2.3?请看日期1。二月二号。二月,二月三日。。。价格…这需要在服务器上确定,我不知道您使用的是什么服务器语言。您是否按照建议查看了文档?这是mysql数据库的屏幕截图:列开始是一个时间戳…所以您需要正确格式化日期,以便从数据库中提取时javascript能够读取。数据库服务器知道它所在的时区并可以使用该格式工作,但浏览器不知道该时区或您发送的日期引用,而不进行格式化,但我在这里使用Laravel blade:var period_start=new date(“{date('Y-m-d',strotime($article->from))}”)进行格式化,那么格式是Y-m-ddid您阅读了完整的日历参考文档吗?你需要的一切都在那里解释。