web-dev-qa-db-ja.com

私のAngularsモデルにjsonをロードするにはどうすればいいですか？

私はおそらく非常に明白な質問だと思いますが、どこにも答えが見つかりませんでした。

私は自分のサーバーからクライアントにいくつかのJSONデータをロードしようとしています。現在、私はJQueryを使用してAJAX呼び出しでそれをロードしています（以下のコード）。

<script type="text/javascript">
var global = new Array();
$.ajax({
    url: "/json",
    success: function(reports){
        global = reports;
        return global;
        }
    });
</script>

これはhtmlファイルにあります。これまでのところうまくいきますが、問題は私がAngularJSを使いたいということです。現在、Angularは変数を使用できますが、全体を変数にロードすることはできないため、forループを使用できます。これは、通常、.jsファイルにある "$ Scope"に関連しているようです。

問題は、他のページから.jsファイルにコードを読み込めないことです。 Angularのすべての例は、次のようなものだけを示しています。

function TodoCtrl($scope) {
  $scope.todos = [
    {text:'learn angular', done:true},
    {text:'build an angular app', done:false}];

それで、これは便利です、私がA）これを全部手でタイプしたい、そしてB）私がすべての私のデータが何であるかを前もって知っているなら...

私は前もって知りません（データは動的です）そして私はそれをタイプしたくありません。

そのため、$ Resourceを使用してAJAX呼び出しをAngularに変更しようとしても、うまくいかないようです。理解できないかもしれませんが、JSONデータに対する比較的単純なGETリクエストです。

tl：dr外部データを角度モデルにロードするためにAJAXを呼び出すことができません。

javascriptajaxangularjsmodel
114
MJR_III

Krisが述べているように、あなたはサーバーと対話するために$resourceサービスを使うことができます、しかし私はあなたがあなたの旅を始めているという印象をAngularで得ます - 私は先週そこにいた - それで私は直接実験を始めることを勧めます$httpサービスこの場合、getメソッドを呼び出すことができます。

以下のJSONがある場合

[{ "text":"learn angular", "done":true },
 { "text":"build an angular app", "done":false},
 { "text":"something", "done":false },
 { "text":"another todo", "done":true }]

あなたはこのようにそれをロードすることができます

var App = angular.module('App', []);

App.controller('TodoCtrl', function($scope, $http) {
  $http.get('todos.json')
       .then(function(res){
          $scope.todos = res.data;                
        });
});

getメソッドは、最初の引数が成功コールバックであるpromiseオブジェクトを返しますそして2番目のエラーコールバック。

関数のパラメータとして$httpを追加するとAngularそれが魔法のように行われ、$httpリソースがコントローラに注入されます。

ここにいくつか例を挙げました

189
jaime

JSONデータをAngularモデルに読み込む方法の簡単な例を示します。

私は、MicrosoftのNorthwindSQL Serverデータベースのオンラインコピーから、顧客の詳細のリストを返すJSON「GET」Webサービスを利用しています。

http://www.iNorthwind.com/Service1.svc/getAllCustomers

次のようなJSONデータが返されます。

{ 
    "GetAllCustomersResult" : 
        [
            {
              "CompanyName": "Alfreds Futterkiste",
              "CustomerID": "ALFKI"
            },
            {
              "CompanyName": "Ana Trujillo Emparedados y helados",
              "CustomerID": "ANATR"
            },
            {
              "CompanyName": "Antonio Moreno Taquería",
              "CustomerID": "ANTON"
            }
        ]
    }

..そして、私はこのデータをドロップダウンリストに追加したいです。

Angular screenshot

各項目のテキストは "CompanyName"フィールドから取得し、IDは "CustomerID"フィールドから取得します。

どうしたらいいですか。

私のAngularコントローラは次のようになります。

function MikesAngularController($scope, $http) {

    $scope.listOfCustomers = null;

    $http.get('http://www.iNorthwind.com/Service1.svc/getAllCustomers')
         .success(function (data) {
             $scope.listOfCustomers = data.GetAllCustomersResult;
         })
         .error(function (data, status, headers, config) {
             //  Do some error handling here
         });
}

...これは、 "listOfCustomers"変数をこのJSONデータのセットで埋めます。

それから、私のHTMLページでは、これを使用します。

<div ng-controller='MikesAngularController'>
    <span>Please select a customer:</span>
    <select ng-model="selectedCustomer" ng-options="customer.CustomerID as customer.CompanyName for customer in listOfCustomers" style="width:350px;"></select>
</div>

以上です。 JSONデータのリストがWebページに表示され、すぐに使用できるようになりました。

その鍵となるのが "ng-options"タグです。

customer.CustomerID as customer.CompanyName for customer in listOfCustomers

頭を動かすのは奇妙な構文です！

ユーザーがこのリスト内の項目を選択すると、 "$ scope.selectedCustomer"変数はその顧客レコードのID（CustomerIDフィールド）に設定されます。

この例の完全なスクリプトはここにあります。

Angular付きのJSONデータ

マイク

28
Mike Gledhill

私はインターネットのどこかにある以下のコードを使用しますが、ソースを覚えていません。

    var allText;
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", file, false);
    rawFile.onreadystatechange = function () {
        if (rawFile.readyState === 4) {
            if (rawFile.status === 200 || rawFile.status == 0) {
                allText = rawFile.responseText;
            }
        }
    }
    rawFile.send(null);
    return JSON.parse(allText);
0
messed-up