使用angular.js解析JSON文件

时间:2015-06-02 19:57:13

标签: json angularjs http

我想用一个带有angular.js的json文件解析比特币价格。

json源是this blockchain api.

我用于angular.js的代码:

<div ng-app="myApp" ng-controller="customersCtrl"> 
  <ul>
    <li ng-repeat="x in price">
      {{ x.15m + ', ' + x.last }}
    </li>
  </ul>
</div>

<script>
  var app = angular.module('myApp', []);
  app.controller('customersCtrl', function($scope, $http) {
    $http.get("https://blockchain.info/de/ticker")
         .success(function (response) {$scope.price = response.USD;});
  });
</script>

结果应该是15米的价格然后用逗号分隔最新的价格。

我的猜测是我在响应附近弄乱了一些东西。但是在1小时后,我仍然没有找到如何正确地做到这一点。

请帮忙!

1 个答案:

答案 0 :(得分:0)

看来您实际上是从区块链网站收到错误。他们在服务器上设置了单一来源策略,以保护他们免受点击攻击。这是你得到的错误:

XMLHttpRequest cannot load https://blockchain.info/de/ticker. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '<your domain>' is therefore not allowed access.

您的选择是联系该网站并要求他们将您的服务器添加为例外,或者从您的服务器使用某种卷曲请求,然后让您的GET请求到达您的本地副本。

创建一个名为results.php的文件,输入以下代码:

<?php

try {
    $curl = curl_init();
    curl_setopt_array($curl, array(
        CURLOPT_RETURNTRANSFER => 1,
        CURLOPT_URL => 'https://blockchain.info/de/ticker'
    ));

    $result = curl_exec($curl);

    echo $result;
} catch (Exception $e) {
    header("HTTP/1.0 500 Unable to pull ticker results");
    echo $e->getMessage();
}
?>

现在在您的脚本中将其更改为:

<script>
  var app = angular.module('myApp', []);
  app.controller('customersCtrl', function($scope, $http) {
    $http.get("results.php")
         .success(function (response) {$scope.price = response.USD;});
  });
</script>

另外,最后一件事。你的ng-repeat将一遍又一遍地重复同样的事情(如果你可以让它以这种方式工作),因为你为&#39; x&#39;中的每个值写了相同的东西。也许考虑将其改为:

<div ng-app="myApp" ng-controller="customersCtrl">
    <p>{{price['15m']}}, {{price['last']}}</p>
</div>