AngularJS で $.getJSON で json 取って for で回して配列に入れたら空になった場合のメモ - 牌語備忘録 -pygo
(AngularJS1.2.0) 問題 'use strict'; angular.module('sampleApp') .controller('MainCtrl', function ($scope) { $scope.books = []; $.getJSON('api/books/', function(json) { var _data = json.results; var _datum; for (var i = 0; i < _data.length; i++) { _datum = _data[i]; $scope.books.push({name: _datum.name, comment: _datum.comment}); } }); }); for の中では取れてるのにhtmlで表示させようとすると $scope.books が [空] になってる 解決 $ap
AngularJSでAPIをコールし非同期で画面を更新する - Qiita
先日にはてブのホットエントリになってたこの記事（Promises: ブラウザーJavaScriptの新しい非同期標準になるか？）をみるに、APIアクセスの場合は promises を使わないと、APIの応答が遅い場合に結果が取得できないし、またAPIの結果が返ってくるまでユーザを待たせてしまうことになります。 というわけで、AngularJS でAPIの結果を非同期で取得して画面を更新する、というデモを作ってみました（応答が遅いAPIを模するために、1秒のウェイトを擬似的にいれてます）。 デモはこちら⇒http://hkusu.github.io/AngularJS_apicall_demo3 下記にソースの説明をします。 ※ 私のJavaScriptの経験はまだ浅いので、おかしなところがあったら教えてください^^; ① ソースツリーのWEB公開領域に、適当にJSONファイルを用意
AngularJS でAPIをコールし結果を取得するサンプル① - Qiita
WEBサービス作るにはサーバのAPIと連携しないと意味ないよねってことで、勉強がてら作成してみたメモです。 [2014/3/15追記] この例はHTMLページとAPIが同一サーバの場合です。APIが別サーバの場合は、JSONPを利用する必要があります。 [2014/4/13追記] 非同期での通信や、応答に時間がかかるAPIなどを考えると、ngResource を利用した方が良いみたいです。続編を書いたのでこちらを参照 ⇒ AngularJS でAPIをコールし結果を取得するサンプル② [2014/5/11追記] さらに続編を書いたのでこちらを参照 ⇒ AngularJSでAPIをコールし非同期で画面を更新する 作成したデモページ [API発行]ボタンを押すと、APIコールでJSONファイルを取得して結果をTABLEに表示します。 http://hkusu.github.io/Angular
AngularJSでWebAPIを利用してJSONPで読み込むサンプル
読み込むWebAPIには、https://api.loctouch.com/v1/railway/stations?line_cd=11302を使用しています。 外部サーバーにあるJSONの場合は、JSONPでクロスドメイン通信というやり方で呼び出す。 そして、コールバック関数にJSON_CALLBACKをつけないといけない。 AngularJSでのJSONP読み込みサンプル <!DOCTYPE HTML> <html ng-app="myApp" lang="ja"> <head> <meta charset="utf-8"> <title>Angular JSON Get Sample</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
JSON形式のWeb APIにアクセスするには？（$http）
Web APIと通信する際に問題となるクロスドメイン制約を回避するために使われるテクニック「JSONP」を、AngularJSで実現するための基本的な方法を説明する。 ← 前回 連載 INDEX 次回 → XMLHttpRequest（XHR）オブジェクトのよく知られた制約として、クロスドメイン制約があります。クロスドメイン制約とは、（デフォルトでは）JavaScriptからドメインを超えて通信できない制約のことです。$httpサービスもまた、内部的にはXHRオブジェクトを利用していますので、この制約からは自由ではありません。 クロスドメイン制約を回避するテクニックにはさまざまなものがありますが、その中でも古典的で、よく利用されているのがJSONP（JSON with Padding）です。JSONPとは、その名の通り、JSON（＝JavaScriptのオブジェクトリテラル形式になぞらえた
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
AngularJS - nested forEach to iterate Json - codes fans
A Master Detail Example, Using JSON & AngularJS
Iterate through nested json array in angular controller and get unique values
Accessing nested JSON with AngularJS