javascript - Pull in JSON data - Stack Overflow

admin管理员组

文章数量:1401658

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"}
]

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

Here is my best attempt: /

The javascript is:

$(document).ready(function() {
  var dp, events;
  events = [];
  return dp = $(".blog_calendar").datepicker({
    beforeShowDay: function(date) {
      var matching, result;
      $.getJSON(".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);
      }
    }
  });
});

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() {}

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.

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"}
]

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

Here is my best attempt: http://jsfiddle/PGmFv/2/

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./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);
      }
    }
  });
});

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() {}

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.

• javascript
• jquery
• json
• jquery-ui

Share Improve this question Follow edited May 23, 2017 at 12:31 CommunityBot 111 silver badge asked Jan 25, 2012 at 15:46 bonhofferbonhoffer 1,47322 gold badges2323 silver badges3838 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

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'.

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

$.ajax({
  url: 'https://api.github./gists/'+gistid,
  type: 'GET',
  dataType: 'jsonp'
}).success( function(gistdata) {
  // This can be less plicated 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)

Quite a lot of code to dig through, but aren't you making an asynchronous call and then trying to return a value from an anonymous function? Trying to use events just after initiating getJSON but probably quite a bit before the data is actually fetched?

This error is ing because the request

 $.getJSON("https://raw.github./gist/1676157/15ce81851e57dfcecb985039e970a749585959de/my.json") 

is not in same domain.So console.log() shows this error

  Origin http://fiddle.jshell is not allowed by Access-Control-Allow-Origin.

Running $.getJSON('Same domain request') will cause no error.

See the fiddle and see console error message. http://jsfiddle/PGmFv/10/

本文标签： javascriptPull in JSON dataStack Overflow