引入JSON数据 [英] Pull in JSON data

问题描述

我正在尝试从json数据中获取事件日历。我只想突出显示日期，并在日历下方更新div，并在用户点击日期时显示活动详细信息。我的应用程序以下列形式提供JSON：

I am trying to get an event calendar working from json data. I just want to highlight dates, and have a div update below the calendar with the event details when the user clicks on a date. My app serves the JSON in the form:

[
  {"Date":"02/06/2012","Title":"Eat, Bike, and Swim"},
  {"Date":"02/03/2012","Title":"Sleep"},
  {"Date":"02/02/2012","Title":"Laugh"}
]

我有一个JS小提琴，它使用变量定义，但我无法让它响应JSON请求。

I have a JS fiddle that works with a variable definition, but I can't get it to respond to a JSON request.

这是我最好的尝试： http://jsfiddle.net/PGmFv/2/

javascript是：

The javascript is:

$(document).ready(function() {
  var dp, events;
  events = [];
  return dp = $(".blog_calendar").datepicker({
    beforeShowDay: function(date) {
      var matching, result;
      $.getJSON("https://raw.github.com/gist/1676157/15ce81851e57dfcecb985039e970a749585959de/my.json", function(data) {
        return events = data;
      });
      result = [true, "", null];
      matching = $.grep(events, function(event) {
        return event.Date.valueOf() === date.valueOf();
      });
      if (matching.length) {
        result = [true, "highlight", null];
      }
      return result;
    },
    onSelect: function(dateText) {
      var date, event, i, selectedDate;
      date = void 0;
      selectedDate = new Date(dateText);
      i = 0;
      event = null;
      while (i < events.length && !event) {
        date = events[i].Date;
        if (selectedDate.valueOf() === date.valueOf()) {
          event = events[i];
        }
        i++;
      }
      if (event) {
        return alert(event.Title);
      }
    }
  });
});

我正在尝试加载datepicker函数内的json，因为我希望能够在同一页面上安装多个日历， this.id 包含一个特定的url变量，所以我可以调用 $。getJSON（'/ events /'+ this.id +'/ data.json '，function（）{}

I'm trying to load in the json inside the datepicker function because I want to be able to have multiple calendars on the same page and this.id contains a specific url variable so I can call $.getJSON('/events/' + this.id + '/data.json',function() {}

任何想法都非常感激。我非常倾向于：使用json数据源的jQuery UI Datepicker中的活动和带有事件的日期选择器？但是却无法在正确的时间以正确的方式加载json。

Any thoughts greatly appreciated. I'm leaning significantly on: Events in jQuery UI Datepicker with json data source and Datepicker with events? but just not able to get the json to load at the right time and in the right way.

控制台中没有错误没有帮助。

The lack of an error in console is not helping.

推荐答案

为了获取JSON数据从另一个域，你必须使用带回调函数的JSONP。Github API 支持此功能（示例），和jQuery处理使用 dataType：'jsonp'自动进行回调。

In order to get JSON data from another domain, you have to use JSONP with a callback function. The Github API supports this (example), and jQuery handles making the callback automatically with dataType: 'jsonp'.

这是我用jQuery从Github gist获取JSON数据的方法：

This is how I get JSON data from a Github gist with jQuery:

$.ajax({
  url: 'https://api.github.com/gists/'+gistid,
  type: 'GET',
  dataType: 'jsonp'
}).success( function(gistdata) {
  // This can be less complicated if you know the gist file name
  var objects = [];
  for (file in gistdata.data.files) {
    if (gistdata.data.files.hasOwnProperty(file)) {
      var o = JSON.parse(gistdata.data.files[file].content);
      if (o) {
        objects.push(o);
      }
    }
  }
  if (objects.length > 0) {
    // DoSomethingWith(objects[0])
  }
}).error( function(e) {
  // ajax error
});

（ jsFiddle ）

这篇关于引入JSON数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！