www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 16

Thread: JSON Help

  1. #1
    Join Date
    Mar 2013
    Posts
    58

    JSON Help

    I'm developing a webpage that needs to access on online API. I've heard that JSON is the way to go, but all the W3School examples, but when I try to apply that to an url it doesn't work. Any ideas how I go about doing this?

  2. #2
    Join Date
    Jul 2013
    Posts
    66
    My crystal ball seems to be foggy today. Maybe you want to be more specific and detailed on your question instead.

  3. #3
    Join Date
    Mar 2013
    Posts
    58
    Code:
    var json ="http://www.giantbomb.com/api/search/?api_key=[KEY]&format=xml&query=%22metroid%20prime%22&resources=game" ,
        obj = JSON.parse(json);
    
    alert(obj.count);
    Like I said I don't have much an idea on how to do it. This is just a simple request meant to get the length of a the results returned.

  4. #4
    Join Date
    Jul 2013
    Posts
    66
    You're trying to parse the link, but what you are actually interested in is parsing the content of the page returned when visiting that link. Unless giantbomb provides a nice wrapper, you need to send Ajax requests yourself. Examples on how to do that can be seen here or when you use your favorite search engine for "javascript ajax" or similar.

  5. #5
    Join Date
    Mar 2013
    Posts
    58
    I think Giant Bomb does. Here's an example of that output.

    http://i40.tinypic.com/657cs7.png

  6. #6
    Join Date
    Jul 2013
    Posts
    66
    That just shows that they offer an API – that we can check by simply typing in a query. It's a different question if they offer some kind of "library" to access it via Javascript. But you don't need it, like I said, you can just use Ajax calls. But you need to actually query their website/API to get a result, so far you only wrote down a URL.

  7. #7
    Join Date
    Jul 2013
    Posts
    66
    Here's an example that utilizes jQuery

    Code:
    $.ajax('http://www.giantbomb.com/api/search/?api_key=[KEY]&format=xml&query=%22metroid%20prime%22&resources=game')
        .done(function (data, status, jqXHR) {
            alert(jqXHR.responseText);
        }).fail(function () {
            alert('Something went wrong!');
        });
    However, I don't know why you declare that the output format should be XML when you want it to be JSON. If you switched it to json, you'd directly have a nice object in the "data" variable.

    In any case, this thread over at giantbomb.com suggests that the API was not exactly meant to be used with Javascript and the API key is not very protected. It also mentions problems with the same-origin policy. You might want to take your issue over to their forums and discuss best-practice solutions for this as they are the best people to talk to when it comes to their own API.

  8. #8
    Join Date
    Mar 2013
    Posts
    58
    Quote Originally Posted by Airblader View Post
    Here's an example that utilizes jQuery

    Code:
    $.ajax('http://www.giantbomb.com/api/search/?api_key=[KEY]&format=xml&query=%22metroid%20prime%22&resources=game')
        .done(function (data, status, jqXHR) {
            alert(jqXHR.responseText);
        }).fail(function () {
            alert('Something went wrong!');
        });
    However, I don't know why you declare that the output format should be XML when you want it to be JSON. If you switched it to json, you'd directly have a nice object in the "data" variable.

    In any case, this thread over at giantbomb.com suggests that the API was not exactly meant to be used with Javascript and the API key is not very protected. It also mentions problems with the same-origin policy. You might want to take your issue over to their forums and discuss best-practice solutions for this as they are the best people to talk to when it comes to their own API.
    I'll do so when I can. There seems to be a problem with accessing the API on Giant Bomb right now. I've emailed the admins, they should get back to me soon. Also is that a specific function in ajax? "responseText".

  9. #9
    Join Date
    Jul 2013
    Posts
    66
    It's a property that just contains the result in plain text. The first argument, data, holds the parsed XML as an object. If you switch the format in the URL to json, giantbomb's API will return json rather than xml and jQuery's ajax call is clever enough to then parse it as json, meaning that data will hold the parsed json object.

    There might be a problem with their API, I don't know, but just to prevent misunderstandings: An API key of "[KEY]" will of course return an error and if you try to execute this code on a page that does not allow cross-domain requests, it also won't work. You can test it simply by going to giantbomb.com, opening your browser's development console (Ctrl+Shift+J in Google Chrome) and copy/paste that code in there (executing it on giantbomb.com won't be cross-domain). It works fine for me (but, of course, returns an error due to the key).

  10. #10
    Join Date
    Mar 2013
    Posts
    58
    Thanks for the info. I've modified my code to JSON instead of XML and my API key is working. It's just accessing the developers section that I still can't do. Is there a way of selecting a json array and an object within it, instead of printing the entire return data?

    In the example I showed, most of the information is stored in "results" json array's. I need to be able to retrieve these results array's and access the objects within them, like "name".

  11. #11
    Join Date
    Jul 2013
    Posts
    66
    I'm not sure this is what you're asking, but like I've said before, if your format is json, the first argument passed to the success callback will be the parsed json object. You could simply acess data.name then.

  12. #12
    Join Date
    Mar 2013
    Posts
    58
    Thanks. I've tried something like this, but instead I get the fallback error.

    Code:
    function test()
    {
    	$.ajax('http://www.giantbomb.com/api/search/?api_key=[key]&format=json&query=%22metroid%20prime%22&resources=game')
    		.done(function (data, status, jqXHR) {
    			var jsonDoc = jqXHR.responseText;
    			var txt = "";
    			var test = data.names;
    			
    			//var q = xmlDoc.getElementsByTagName("name");
    			
    			//alert(test.length);
    			
    			//alert(jqXHR.responseXML);
    			
    		}).fail(function () {
    			alert(status + ' Something went wrong!');
    		});
    Last edited by KarneeKarnay; 07-22-2013 at 01:01 PM.

  13. #13
    Join Date
    Jul 2013
    Posts
    66
    Note: Please remove the API key that you should made public.

    You do not have access to the status variable in the fail callback since it's an argument for the success callback. Please look at jQuery's API to see the arguments you can get using the fail callback. The query works fine for me if I just execute it on giantbomb, so I assume the reason it fails for you is the same-origin policy.

  14. #14
    Join Date
    Mar 2013
    Posts
    58
    First of all thanks. :P

    Second of all, I'll check that out. I'm going to stop this thread now. You've really helped me out and I appreciate it. I'm going to research and figure the last parts out. Thanks for all the help Airblader. I really do appreciate it.

  15. #15
    Join Date
    Jul 2013
    Posts
    66
    You're welcome, I hope you'll figure it out!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles