Javascript FullCalendar.js赢得'；t显示数组中的JSON事件

我的ASP.NET应用程序生成事件，目前仅将它们存储在HTML列表中，如下所示：

<ul id="eventsList">
  <li>
    {editable:false,id:1,title:"Demo",start:"2018-03-14T00:00:00"}
  </li>
</ul>

var events = [];

$("#eventsList").find('li').each(function () {
  events.push(this.innerText);
});

$('#eventCalendar').fullCalendar({
  height: "parent",
  events: events
});

但是，FullCalendar不显示任何事件-尽管事件位于如下所述的数组中：

---

这里缺少什么？

首先，当您使用

innerText

推送事件数据时，如下所示：

$("#eventsList").find('li').each(function () {
  events.push(this.innerText);
});

$(document).ready(function () {
  var events = [];

  // Loop through each list.
  $("#eventsList li").each(function () {
    // Get the event data, which is a string.
    var eventString = $(this).text().trim();
    // Properly quote the key (property name), so it's a valid JSON string.
    var jsonString = eventString.replace(/([a-z]+):/g, '"$1":');

    // Parse it to object with JSON.parse() and push it to events variable.
    events.push(JSON.parse(jsonString));
  });

  $('#calendar').fullCalendar({
    height: "parent",
    events: events
  });
});

它实际上是推送Fullcalendar所期望的事件的

字符串

，而不是

对象

为了解决这个问题，可以使用函数将JSON字符串解析为对象。但问题是，根据您上面的解释，

标记中的事件数据没有正确引用

{editable:false,id:1,title:"Demo",start:"2018-03-14T00:00:00"}

要成为有效的JSON字符串，必须正确引用属性名称，如

editable

、

id

、

title

和

start

。要解决此问题，可以使用

replace

和一些正则表达式在属性名称周围加引号：

var properJSONString = eventString.replace(/([a-z]+):/g, '"$1":')

因此，要总结这一点，您可以按如下方式从

标记推送事件：

$("#eventsList").find('li').each(function () {
  events.push(this.innerText);
});

$(document).ready(function () {
  var events = [];

  // Loop through each list.
  $("#eventsList li").each(function () {
    // Get the event data, which is a string.
    var eventString = $(this).text().trim();
    // Properly quote the key (property name), so it's a valid JSON string.
    var jsonString = eventString.replace(/([a-z]+):/g, '"$1":');

    // Parse it to object with JSON.parse() and push it to events variable.
    events.push(JSON.parse(jsonString));
  });

  $('#calendar').fullCalendar({
    height: "parent",
    events: events
  });
});

您可以在此处查看演示：

然而，这不是一个干净的解决方案。FullCalendar已经提供了直接从服务器加载事件的功能。请在此处阅读更多信息：

---

希望这能给你一些想法。

这是因为你的数组只是一个字符串列表（碰巧包含一些类似JSON的东西），而不是具有单个属性的实际JavaScript对象。JSON是一种文本格式，在您反序列化它之前它不是JS对象。相反，让您的应用程序将JSON直接呈现到Javascript中（以便JS立即将其视为一个对象），而不是这种复杂的双跳，或者更好的是，创建一个ajax端点来提供JSON，以便日历可以动态更新数据库中的事件（例如，当进行更改时，或当显示的日期/时间范围更改时）。请看@ADyson，那么我是否可以假设，通过尝试使用隐藏字段使事情变得不那么复杂，实际上我已经使事情变得更加复杂了？我倾向于使用AJAX端点，尽管这是我需要进一步了解的内容。我看不出代码中有隐藏字段，但使用

的想法是不必要的。无论您如何将JSON呈现到HTML中，只要直接将其呈现到JS中即可。但总体而言，ajax端点是一个更好的解决方案。设置起来并不难。您使用的是ASP.NET MVC还是WebForms？您可以在WebForms应用程序中创建WebMethod或一点WCF webservice。如果您以前没有做过WebMethod，它可能会简单一点。避免使用ASMX服务——ASMX现在基本上是传统技术。或者您可以直接将JSON字符串注入Javascript，并保存所有代码。用于将其放入

中的任何代码都可以移动到Javascript中的

事件属性中。而且您的fullcalendar docs URL是错误的-这是用于在计划程序产品中声明资源的链接，与事件无关。@ADyson哦，是的，谢谢！修复了对文档的引用。@RisanBagjaPradana问题是，JsonConvert（从我的C#后端）实际上就是这样输出字符串的。在FullCalendar的文档中，我注意到变量
editable
需要将其值不带引号，这就是为什么我尝试使用JsonSerializer对象（同样是C#）来输出您在问题中看到的“JSON”。您使用
text（）.trim（）
，是否有魔力？顺便说一句，根据您和ADyson的建议，我将转向AJAX解决方案，但我希望在此期间能够做到这一点。@ScarySpice“我注意到变量editable需要将其值不带引号”…Risan不是在谈论值，他是在谈论字段名。为了严格有效的JSON，必须引用字段名，例如
“editable”：false
。但是TBH大多数浏览器（和其他JSON解析器）都会让您逍遥法外。您是对的，
editable
的值应该是不带引号的，因为它是一个布尔字段，而不是字符串。引号中的任何值都被视为字符串，而不是（例如）数字或布尔值。