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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Q&A

解決済

1回答

4629閲覧

Angularで取得したJSONPの内容をプロパティに格納したい

takets

総合スコア43

Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

0グッド

0クリップ

投稿2017/10/24 07:25

編集2017/10/24 08:22

###前提・実現したいこと
jsonp.get(http://xxx.com/api)で取得したJSONPデータを変数に格納して、使えるようにすることを考えております。

###発生している問題・エラーメッセージ

subscribe()の中であればjsonの中身を操作できるが、プロパティ等の変数に格納できないため、 該当ソースコード console.log(this.result)の結果が undefined になってしまう。

###該当のソースコード
データを取得したいjsonp

json

1__ng_jsonp__.__req0.finished( 2{"rsp":{"stat":"ok","frob":"zzzzzzzzzzzzzzzzzzz"}} 3)

上記のfrobの値をプロパティ変数として格納したい。

typescript

1import { Component, OnInit } from '@angular/core'; 2import { Md5 } from "ts-md5/dist/md5"; 3import { HttpClient } from '@angular/common/http'; 4import { Jsonp, Response } from "@angular/http"; 5import { Observable } from "rxjs/Rx"; 6import 'rxjs/add/operator/map'; 7 8@Component({ 9 selector: 'app-root', 10 templateUrl: './app.component.html', 11 styleUrls: ['./app.component.css'], 12}) 13export class AppComponent implements OnInit { 14 title = 'app'; 15 url = 'http://api.rememberthemilk.com/services/rest/?' 16 api_key = 'xxxxx' 17 shared_secret = 'yyyyy' 18 19 public result: string[] 20 21 constructor( 22 private http: HttpClient, 23 private jsonp: Jsonp, 24 ) {} 25 26 ngOnInit() { 27 let api_sig = Md5.hashStr(this.shared_secret + 'api_key' + this.api_key + 'callback__ng_jsonp__.__req0.finishedformatjsonmethodrtm.auth.getFrob'); 28 let api_url = this.url + 'api_key=' + this.api_key + '&callback=__ng_jsonp__.__req0.finished&format=json&method=rtm.auth.getFrob&api_sig=' + api_sig; 29 30 this.result = this.http.request(api_url) 31 .map(res => res.json()) 32 .subscribe(json => { 33 JSON.parse(JSON.stringify(json), function(key, value) { 34 if (key == 'frob') { 35 return value; 36 } 37 }) 38 }); 39 console.log(this.result); 40 } 41}

###試したこと

  • return valueを this.result = valueにした
  • http.get()で試した
  • .subscribe(json => this.result = json)で保存しようとした

###補足情報(言語/FW/ツール等のバージョンなど)
angular4
typescript 2.5.3

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

Httpクラスのrequestは

request(url: string | Request, options?: RequestOptionsArgs): Observable<Response>;

Observable(非同期)ですので**console.log(this.result);**が通る時はthis.resultが確定していないと思いますよ

投稿2017/10/24 08:30

mosapride

総合スコア1480

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

takets

2017/10/24 09:05

ご回答ありがとうございます。 手続き型的に動作するとおりましたが、非同期のためできないのですね。 調べたところ、JsonpなどもObservableであり、最初の狙いだったプロパティ変数に格納するのは難しそうなため、 1.なにがしかの同期的にhttprequestをする方法を探す 2.subscribe()でデータを取得できるようになったところに続けて処理を書く という方法を思いつきました。 しかし、仮に2の方法で処理を記述する場合、コードのネストが深くなってしまいそうな不安があります(実際はサービスやメソッドに分割するためそれほどでもない?)が、angularの記述方法としてはアリなのでしょうか。
mosapride

2017/10/25 00:14

多少のネストは許容範囲ですし、Promise等を使う方法もあります。 本来、Angular標準ではサーバーサイドレンダリングではないのと、データbindがあるのでhtml側(表現がわからない)でデータ取得時に表示させるようにするのも一つだと思います。 https://angular.io/api/common/AsyncPipe ↑のExampleの一番下の方がObservables表示例があります
takets

2017/10/25 02:26

ありがとうございます。 データbindのサンプルソースはとても参考になりました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問