0

I have been playing around with the jQuery library the last week or two.

Very handy! I am now playing with the AJAX requests to retrieve things such as the weather, current downloads and more, which have been going well so far!

I have now tried to connect up to my ISP to get my current data usage (peak, off peak etc).

When I use Chrome, I can manually type the variables into the URL and have the required JSON code show in the browser. The issue is, that it seems to return text/html instead of application/json.

When you go into developer tools, it shows text/html. This make it difficult for me to retrieve the data from my home server using AJAX and JSONP. See here for a failed query (but you can still see the text/html output, which is in a JSON format!

Failed JSON Query on ISP

My question is, how could I get this data from the server URL, then make it into JSON that jQuery can read?

When I try the .load , $.get functions I run into Cross Origin Issues...

EDIT:Here is the PDF documentation for the API (Download at the bottom of the page) Notice that I need to append certain values (user / pass / token). My ultimate aim is to have my JS read these values and store them.

Jimmy P
  • 57
  • 1
  • 9

2 Answers2

2

The issue is, that it seems to return text/html instead of application/json.

That's a serverside issue. Go and file a bug report.

This make it difficult for me to retrieve the data

Not by itself. You should be able to override the settings how responses are parsed, e.g. in jQuery by using the datatype parameter.

using AJAX and JSONP

Notice that you cannot use JSONP, as it is not supported by that API (judging from the docs and a simple ?callback=test try). If you want support for that, file a bug report against the service provider.

When I try the .load, $.get functions I run into Cross Origin Issues...

Yes. They don't send CORS headers either. I suspect that this API is only used internally, and by devices that are not subject to a same-origin policy.

how could I get this data from the server URL, then make it into JSON that jQuery can read?

Use a proxy on your own server (that runs in the same domain as your app). It can also fix that content-type header.

For more details see also Ways to circumvent the same-origin policy, though most of the methods require cooperation of the service provider (to implement serverside features).

Community
  • 1
  • 1
Bergi
  • 630,263
  • 148
  • 957
  • 1,375
  • Ok - Its good to know that I am not doing (much) wrong. It is the server that is causing the issues for not supporting the JSONP callback. I have lodged a support request with them. To get around this, I would need to make a proxy / php page which gets the data, then inject that via my script, correct? – Jimmy P Dec 17 '14 at 23:59
  • Not sure what you mean by "inject", but yes, you would need to ajax-call your own API that then gets the data. – Bergi Dec 18 '14 at 00:04
  • Great. Using a PHP file (taken from elsewhere) in combination with `$.parseJSON()` has yielded me a result! It's a shame you need to go to the extra effort of the PHP page, but hey, its something else for me to learn! – Jimmy P Dec 18 '14 at 00:42
1

If i understand you correctly You ask for a certain value and it gives you a string. For most API's in the world they send a string that you have to parse into JSON or some language code. I would suggest looking at Parsing JSON Strings link. It explains how to take well formated strings and parse them into JSON readable objects. 

var obj = jQuery.parseJSON( '{ "name": "John" }' );
alert( obj.name === "John" );

if you go on further and start using php take a look that Parsing JSON Strings with PHP

EDIT:

use .done() method to grab text from other pages after AJAX call.

$.ajax(...).done(function(html){
    //do what you want with the html from the other page
    var object = $.parseJSON(html)
}
Roger
  • 3,226
  • 1
  • 22
  • 38
  • Thanks for the response. How would I be able to get the information to parse? The info I need to parse is on another domain (in the body, see the FAILED query link above). JSONP fails as I believe that its looking for `application/json` but receiving `text/html` – Jimmy P Dec 17 '14 at 23:32
  • This is the error I get in the console which then stops the rest of the code running `Uncaught SyntaxError: Unexpected token : api.cgi?_USERNAME=(OMITTED)&_PASSWORD=(OMITTED)&callback=jQuery21108770702176261693_141885948911…:1` – Jimmy P Dec 17 '14 at 23:40
  • `$.ajax(...).done(function (html){ var obj = $.parseJSON(html)})` – Roger Dec 17 '14 at 23:40
  • Would it be because the server seems to not accept JSONP that the above code will not run? The callback seems to fail (it has a colon in the callback) which causes it to fail. – Jimmy P Dec 18 '14 at 00:28