How to use AngularJS to get JSON from external URL and display in page - Resource interpreted as Script but transferred with MIME type text/html

Question

I am trying to make an http call to a URL to get a JSON and display this on my page.

The JSON looks like this:

{"ticker":{"high":484.01099,"low":470.37201,"avg":477.1915,"vol":2193393.03322,"vol_cur":4588.62668,"last":482.16,"buy":482.16,"sell":481.2,"updated":1398350394,"server_time":1398350394}}

The code is included below. I read that I have to use 'JSONP' to but I couldn't figure out how to use it.

<html ng-app>
    <body>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.6/angular.min.js"></script>
        <div id = "content" style="min-width: 1200px; max-width: 90%: margin-left: auto; margin-right: auto;">
            <div style="width: 520px; float: left;">
                <h4>Bot Summary:</h4>
            </div>
            <div  ng-controller="TickerControl" style="width: 680px; float: left;">
                <h4>Market Summary</h4>
                <p>Price = {{data}} </p>
            </div>
        </div>
        <div></div>

        <script type="text/javascript">

            function TickerControl($scope, $http, $templateCache) {
                $scope.method = 'JSONP';
                $scope.url = 'https://btc-e.com/api/2/btc_usd/ticker?callback=JSON_CALLBACK';

                $scope.getTicker = function() {
                  $scope.code = null;
                  $scope.response = null;

                  $http({method: $scope.method, url: $scope.url, cache: $templateCache}).
                    success(function(data, status) {
                      $scope.status = status;
                      $scope.data = data;
                    }).
                    error(function(data, status) {
                      $scope.data = data || "Request failed";
                      $scope.status = status;
                  });
                };

                            $scope.getTicker();
            }

        </script>

    </body>
</html>

UPDATE

I have now modified my code to try and do JSONP requests. I am getting the following error:

Resource interpreted as Script but transferred with MIME type text/html: "https://btc-e.com/api/2/btc_usd/ticker?callback=angular.callbacks._0". angular.js:8582
Uncaught SyntaxError: Unexpected token : ticker:1

I seem to be getting text back. Since I cannot control the server response, how can I parse this text to JSON... or just even display it... It's available to view in the chrome dev environment.

UPDATE 2

Apparently this seems to be an issue with the server not being configured properly. Since I don't have access to it, it would be nice to be able to just receive text and parse it in the client!

unless your code is on `btc-e.com` aswell you need to either use `JSONP` or `crossorigin AJAX` — Valerij, Apr 24 '14 at 12:31
Hi @Valerji, thanks this is what I am understanding. But I am unsure how to use JSONP, i tried to do some stuff with adding 'callback' in the URL but I got other errors. — rex, Apr 24 '14 at 12:35
well the server seem not to serve `JSONP` i think you try to acess some private apis, whatever, your only solution seem to crealte a 'proxy' script on your website or use a service like corsproxy.com (not affiliated) — Valerij, Apr 24 '14 at 12:48
This `
Price = {{getTicker()}}
` is making continuous calls to a method that connects to the api, thats why it hangs, its like an infinite loop — Tim, Apr 24 '14 at 13:03
@TimCastelijns, what would I have to do so that it makes the call only on first page load? (Note: in the future i would like this to update continously, say every 5-10 sec) — rex, Apr 24 '14 at 13:04
Do `$scope.getTicker()` at the end of your controller code, that executes ones, when the controller is 'instantiated' — Tim, Apr 24 '14 at 13:05
@ArmenSafieh-Garabedian no below the function $scope.updateModel() — Tim, Apr 24 '14 at 13:08
@TimCastelijns thanks that's what I meant sorry. Still makes multiple calls though :( — rex, Apr 24 '14 at 13:09
@TimCastelijns oh sorry, im such a noob. How will it know where to put the response though? — rex, Apr 24 '14 at 13:11
You could do `
Price = {{data}}
` or something similar instead, so it loads some data from the scope instead of calling the function over and over — Tim, Apr 24 '14 at 13:14
@TimCastelijns thanks man this works now so i get a reasonable error message. Updates in post. — rex, Apr 24 '14 at 13:23
Guys any ideas with updates? This is driving me nuts! @TimCastelijns — rex, Apr 24 '14 at 16:25
Is the server configured to return application/json as content-type? — Tim, Apr 24 '14 at 16:30
@TimCastelijns I don't know and I don't think I can find out unless it's possible to do this from the response? If it's not what can I do? — rex, Apr 24 '14 at 23:02
Yes its in the response headers. I checked, the content type is `text/html` — Tim, Apr 25 '14 at 06:02

score 3 · Accepted Answer · edited May 23 '17 at 12:31

After doing some more research and experimenting with different methods, I regret to inform you that what you're trying to achieve cannot be done.

I sent a GET request to https://btc-e.com/api/2/btc_usd/ticker?callback=JSON_CALLBACK for testing purposes and in the response headers it says

content-type → text/html; charset=utf-8

Because you do cross domain calls and you have no access to the server, you have to use jsonp. But jsonp does not work with text/html content. This related to the error

Resource interpreted as Script but transferred with MIME type text/html

So even though the response looks like valid JSON, it is not treated as such by your client application.

To solve this you would have to add the proper Content-Type header on the server, but you have no access to it.

Quote from this related question:

jsonp can only be used if and when the server properly embed the response in a javascript function call.

To sum it up:

You should either

allow cross domain calls by configuring the server to do so
send back the proper content-type header by configuring the server to do so

Sadly you have no access to the server.

Be aware that this is not your fault. It is because the server is not configured properly.

Thanks for your answer Tim. So it's not possible to just get text and parse it in the client? :O — rex, Apr 25 '14 at 07:28
No, because jsonp expects different content than `text/html` — Tim, Apr 25 '14 at 07:30
That's a shame. I'm going to have to run my own .net server that can get and parse the JSONs and make request to it! — rex, Apr 25 '14 at 07:33

score 0 · Answer 2 · answered Apr 24 '14 at 14:33

0

If the response contains plain text you can parse it using "angular.fromJson(data)". Use a GET-request to fetch the data (and make sure the response does not actually contain HTML code).

answered Apr 24 '14 at 14:33

Benjamin Mesing

4,075
1
18
22

Well its supposed to be JSON, I dont know why im getting that error message. How can i just print the response to console? – rex Apr 24 '14 at 14:36
even if you "GET" the data? You could also try to set the Content-Type explicitly, see https://docs.angularjs.org/api/ng/service/$http for details – Benjamin Mesing Apr 24 '14 at 14:42
GET doesn't work at all because of "No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. " – rex Apr 24 '14 at 14:43
Well, you _could_ try to force the Content-type of the JSONP request to text/html, but this is kind of ugly.. – Benjamin Mesing Apr 24 '14 at 14:55
I'm willing to try anything at this stage! – rex Apr 24 '14 at 15:04
Look at the "Setting HTTP Headers" section of the angular $http documentation on how to do that. – Benjamin Mesing Apr 24 '14 at 15:11

How to use AngularJS to get JSON from external URL and display in page - Resource interpreted as Script but transferred with MIME type text/html

2 Answers2