JavaScriptからAngularへの書き換え

前提・実現したいこと

Ajaxを用いて記述していたJavaScriptのコードを、Angualrへ書き換えたいです。
内容は、'http://localhost:8080/sampleData/data'上で、Ajax側で指定したdataIdとnumberをサーバーに渡して既存のデータベースからカラムをJSON形式で呼び出すという処理まで行い、受け取ったデータから適当な要素のみ取り出してHTML上に表示させます。

$.postでサーバーとデータのやり取りをしているのですが、"dataId=1&number=1"としている記述をどこに書けばいいかがわかりません。

'data.service.ts'というファイルの中でhttpの指定をしているので、ここに書けばいいのかなとおおよその目安を置いているのですが、どうもうまくいきません。

ご教示よろしくお願い致します。

書き換え前のコード

HTML
1<!doctype html>
2:(省略)
3　<div>${data.title}</div>
4</body>
5<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
6<script>
7	$.post( 'http://localhost:8080/sampleData/data', 'dataId=1&number=1' )
8	 
9	.done(function( data ) {
10		
11	})
12</script>
13</html>

書き換え後のコード

HTML
1■■■　@index.html　■■■
2:(省略)
3<body>
4		<app-root>Loading...</app-root>
5	</body>
6</html>
7
8
9■■■　@app.component.html　■■■
10:(省略)
11<my-dashboard></my-dashboard>
12      
13    </div>
14  </div>
15</div>
16
17
18■■■　@dashboard.component.html　■■■
19:(省略)
20<div>
21    <p>{{data.title}}</p>
22</div>

typescript
1■■■　@app.module.ts　■■■
2import { BrowserModule } from '@angular/platform-browser';
3import { NgModule } from '@angular/core';
4import { HttpModule,JsonpModule} from '@angular/http';
5
6import { DashboardComponent } from './component/dashboard/dashboard.component';
7import { AppComponent } from './app.component';
8
9import {DataService} from './services/data.service';
10
11@NgModule({
12  declarations: [
13    AppComponent,
14    DashboardComponent
15  ],
16  imports: [
17    BrowserModule,
18    HttpModule,
19    JsonpModule
20  ],
21  providers: [
22    DataService
23  ],
24  bootstrap: [AppComponent]
25})
26export class AppModule { }
27
28
29■■■　@app.component.ts　■■■
30import { Component } from '@angular/core';
31
32@Component({
33  selector: 'app-root',
34  templateUrl: './app.component.html',
35  styleUrls: ['./app.component.css']
36})
37export class AppComponent {
38}
39
40
41■■■　@dashboard.component.ts　■■■
42import {Component, OnInit} from "@angular/core";
43import {Data} from "../../data";
44import {DataService} from "../../services/data.service";
45
46@Component({
47    selector: 'my-dashboard',
48    templateUrl: './dashboard.component.html'
49})
50
51export class DashboardComponent implements OnInit{
52
53    constructor(private dataService: DataService){}
54
55    dataList : Data;
56
57    ngOnInit(): void {
58        this.dataService.data().subscribe(
59            result => this.setDatas(result),
60            error => alert('通信エラー' + error)
61        );
62    }
63
64    setDatas(result): void {
65        if(result.error) {
66            alert('Web APIエラー' + result.message);
67        }
68
69        this.dataList = result.data;
70    }
71}
72
73
74■■■　@data.service.ts　■■■
75import { Injectable }    from '@angular/core';
76import { Headers, Http, Jsonp, RequestOptionsArgs, RequestOptions, URLSearchParams} from '@angular/http';
77import {Observable} from  "rxjs/Observable";
78import "rxjs/add/operator/map";
79
80import { Data } from '../data';
81
82@Injectable()
83export class DataService {
84
85  private datasUrl = 'http://localhost:8080/sampleData/data';
86  //JSONPコールバック関数名(Angular固有値）
87  CALLBACK = 'JSONP_CALLBACK';
88
89  private gachaId = 10186;
90  
91  constructor(private http: Http, private jsonp: Jsonp) { }
92
93  data(): Observable<Data> {
94    let option : RequestOptions;
95    option = this.setHttpGetParam(this.datasUrl);
96    return this.jsonp.request(this.datasUrl, option)
97      .map((response) => {
98        let content;
99        let obj = response.json();
100        content = {
101          error: null,
102          data: obj
103        };
104        console.dir(content);
105        return content;
106      });
107  }
108  private setHttpGetParam(url: string): RequestOptions {
109    let param = new URLSearchParams();
110    param.set("callback", this.CALLBACK);
111    let options: RequestOptionsArgs = {
112      method: "get",
113      url: url,
114      search: param
115    };
116    return new RequestOptions(options);
117  }
118}
119

補足情報（FW/ツールのバージョンなど）

macOS
Angular
JavaScript
TypeScript

行動規範の内容に同意します

回答1件

ベストアンサー

$.postでサーバーとデータのやり取りをしているのですが

HTTP通信の仕様や、一般的に使われているRESTfulの思想でいうと、
情報欲しいのになんでPOSTを使ってるんだ？という話で、これ多分オレオレですよね。
従って、Angularで書き直しているフロントエンドと同じAPIサーバの話と認識しました。

constructor(private http: Http, private jsonp: Jsonp) { }

上を踏まえると何故JSONP？今どき？？？
正直意味不明です。

JSONPはCORSがない時代に別ドメインのAPIサーバへ取りに行く力技で、
Ajax等と同様に一般的な技術用語なのでググって調べてみてください。

$.postでサーバーとデータのやり取りをしているのですが、"dataId=1&number=1"としている記述をどこに書けばいいかがわかりません。

私もAngularは詳しくないのでぐぐったらQiitaの記事がヒットしました。
Angular2/Angular4のHTTPでPOSTリクエストのCORS問題を解決する

JavaScript
1    this.http.post('https://myhost.com/api/', postParam, {headers: headers} ) // ここでheadersを追加
2             .subscribe( response => console.log(response.json()) );

なるほど、第二引数に配列らしきものを入れれば要件を満たせそうですね。
「Angular http.post」でぐぐったら公式ドキュメントのガイドがヒットしました。
「HttpClient」というモジュールだそうです。

import { HttpClientModule } from '@angular/common/http';
import { HttpClient } from '@angular/common/http';

更にソースコード内のHttpClientにリンクが張ってあり、
クリックするとモジュールの詳細が表示されました。
その中の.postメソッドを見てみます。

Overload #1
post(url: string, body: any, options: { headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: Ht...): Observable<ArrayBuffer>

は？ body: anyって何？？？みたいな感じですが、
おそらく質問文の"dataId=1&number=1"みたいなStringや、
{dataId: 1, number: 1}みたいなObjectにも対応しているのでしょう。

とりあえず第二引数になんか入れて試してみてください。

投稿2018/11/19 03:14