Parsing Valid JSON with AJAX?

Question

Hi I am still learning this JSON stuff...

I think I found a valid JSON:

http://www.nfl.com/liveupdate/scorestrip/ss.json

Problem is I am not sure how I can parse this using AJAX?

Is this possible to do? I have also heard of MooTools what is the difference?

Also here is some code I have just to play around but doesn't seem to work:

$.ajax({
    type: "GET",
    url: "http://www.nfl.com/liveupdate/scorestrip/ss.json",
    dataType: "json",
    success: function(data) {
        // Interpret response
       for (var i = 0; i < data.gms.length; i++) {
        document.write("Day: " + data.gms[i][0]);
        document.write("<br/>");
        document.write("Time: " + data.gms[i][1]);
        document.write("<br/><br/>");
    }
    }
});

Oh sorry it is JQuery...but while on the subject I figured I would ask what mootools is as I have heard to do this with mootools — allencoded
– allencoded, Commented Aug 13, 2011 at 16:05
I got it couldn't I use a hidden iFrame and parse the data out of it? — allencoded
– allencoded, Commented Aug 13, 2011 at 17:10

knittl · Accepted Answer · 2011-08-13 16:15:39Z

3

JSON stands for "JavaScript Object Notation". AJAX stands for "Asynchronous Javascript And XML". MooTools is a crossbrowser javascript framework which provides developers an object oriented workflow with javascript.

Don't confuse apples with peas. All three technologies are often used together, but are different things. JSON is a notation to describe javascript objects, arrays and literals; AJAX is for requesting and retrieving documents (including documents in JSON format) and MooTools can be used to make AJAX calls (probably retrieving a document in JSON format – or an XML fragment).

JSON is pure javascript, there is no need to "parse" it in any way, the javascript interpreter will do that for you. AJAX is often used to describe XMLHttpRequests: http requests originating from javascript, often retrieving JSON or XML/HTML data. MooTools allows you with relatively little code to make use of the XMLHttpRequest feature trough its Request class:

var request = new Request.JSON({
  url: 'http://www.nfl.com/liveupdate/scorestrip/ss.json',

  onRequest: function(){
    alert('We are loading now ...'); // abuse alert(), quite annoying and so 1990
  },

  onComplete: function(jsonObj) {
    // jsonObj is the retrieved JSON. Access it like you would normal javascript objects and arrays
  }

}).send();

edited Aug 13, 2011 at 16:15

answered Aug 13, 2011 at 16:04

knittl

269k59 gold badges339 silver badges405 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

allencoded Over a year ago

so how would I get this JSON in just regular JavaScript?

knittl Over a year ago

@allencoded: by using the XMLHttpRequest object. You cannot use it to retrieve data from a different domain though (forbidden by the same-origin policy). abdul's answer contains a link with reading material on http requests with javascript, read that.

Baz1nga · Accepted Answer · 2011-08-13 18:59:18Z

2

I am guessing your problem is cos your making a cross domain request and your browser is blocking that requst. To process a json response from another domain you need to use jsonp datatype. Its basically chaging the dataType:"jsonp" in your ajax request.

Under the same origin policy, a web page served from server1.example.com cannot normally connect to or communicate with a server other than server1.example.com. An exception is the HTML element. Taking advantage of the open policy for elements, some pages use them to retrieve Javascript code that operates on dynamically-generated JSON-formatted data from other origins. This usage pattern is known as JSONP.

Do read about it. For more info abt json in jquery ajax: http://api.jquery.com/jQuery.ajax/

your updated code:

$.ajax({
    type: "GET",
    url: "http://www.nfl.com/liveupdate/scorestrip/ss.json",
    dataType: "jsonp",
    success: function(data) {
        // Interpret response
       for (var i = 0; i < data.gms.length; i++) {
        document.write("Day: " + data.gms[i][0]);
        document.write("<br/>");
        document.write("Time: " + data.gms[i][1]);
        document.write("<br/><br/>");
    }
    }
});

since the site doesnt seem to be under your control you can have the script hit your url i.e your local site url wherein your local server now contacts the actual url gets the json and sends it as it is

edited Aug 13, 2011 at 18:59

answered Aug 13, 2011 at 16:13

Baz1nga

15.6k3 gold badges38 silver badges63 bronze badges

4 Comments

allencoded Over a year ago

Updated code doesn't work :(. I am really having a problem trying to learn how to utilize a cross server call.

Baz1nga Over a year ago

you need to make some changed on the server side can you do the same? which scripting language do you use?

allencoded Over a year ago

I think the whole problem instills from cross server so I am deciding to go with a php proxy if I can ever figure it out?

Baz1nga Over a year ago

well u marked the question as solved so I thought u got the soln.. anyways I am updating my answer

Pir Abdul · Accepted Answer · 2011-08-13 16:10:19Z

1

I would recommend you first study the http requrest, Whats going on when you request data or receive data. Once you learn the basic, then this will be easy to request and receive data.

HTTP Request

answered Aug 13, 2011 at 16:10

Pir Abdul

2,3721 gold badge28 silver badges35 bronze badges

Collectives™ on Stack Overflow

Parsing Valid JSON with AJAX?

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related