質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.98%

  • AngularJS

    531questions

    AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

AngularJSの$resourceで取得した値を変数に格納する方法

受付中

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 495

tato.aoki

score 23

お世話になります。
AngularJS1.5.8にて開発を行っておりますが、どうしてもわからないことがありましたのでみなさまの知識をお借りできればと思い質問させていただきます。

【実現したいこと】
都道府県のマスターデータをJSON形式で作成して、このデータを読み込むServiceを作ってControllerから値を参照したい

【試してみた方法】
① 都道府県のマスターデータを以下のようにJSONで作成しました。

/** pref.json **/
{
    "1": "北海道",
    "2": "青森県",
    "3": "岩手県",
    "4": "宮城県",
    "5": "秋田県",
}

② マスターデータを読み込むサービスを作成しました

module.service('MasterDataService', function ($resource) {
    this.pref = $resource('asset/masterdata/pref.json').get().$promise.then(function(data){
        return data;
    })
});

    //Controllerから MasterDataService.pref で都道府県データを取得したい

③ ControllerからServiceを読み込んで都道府県データが使えるか確認しました

module.controller('AppController', function (MasterDataService, $scope) {
    this.masterdata = [];
    this.masterdata["pref"] = MasterDataService.pref;

    console.log(this.masterdata);
    //結果>>Promise {$$state: {…}}
});

【試した結果】
上記のコードで試してみたのですが、うまく都道府県データを取得して変数に入れることができませんでした。
なにか、実現できる方法はございませんでしょうか?

みなさまのお知恵をお貸しいただければ幸いでございます。
よろしくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

0

動作リンク

<html>
  <head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-resource/1.5.8/angular-resource.js"></script>
  <script>
    var module = angular.module('appName', ['ngResource']);
    module.service('MasterDataService', function ($resource, $timeout, $q) {
      // old
      this.pref = $resource('./pref.json').get().$promise.then(function(data){
        return data;
      });

      // new
      this.pref2 = function(){
        return $resource('./pref.json').get().$promise;
      };

    });

    module.controller('AppController', function(MasterDataService, $scope) {

      //old
      this.masterdata = [];
      this.masterdata["pref"] = MasterDataService.pref;
      console.log(this.masterdata);

      // new
      var self = this;
      self.masterdata2 = [];
      MasterDataService.pref2().then(function(ret){
        self.masterdata2["pref"] = ret;
        console.log(self.masterdata2);
      });

      // 画面から呼び出し
      $scope.pref2 = function(){
        return self.masterdata2["pref"];
      }

    });

  </script>
  </head>
  <body>
    <div ng-app="appName" ng-controller="AppController">
      <ul>
        <li ng-repeat="d in pref2()">{{d}}</li>
      </ul>
    </div>
  </body>
</html>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.98%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • AngularJS

    531questions

    AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。