前回6月くらいにAngularについて投稿したのですが、そこからお久しぶりのAngularについての投稿になります。
またご存知の方には基本的なお話しかもしれませんが、「angularでgetパラメータに配列をつかってリクエストする方法」についてご紹介しようと思います。
実はすこし前にKoma(Twitterアカウントの中の人&CEO)より「HttpParams を動的に追加したい。」という投稿で、配列形式でクエリパラメータを追加するという投稿があったのですが、これに少し似ている内容で、今回は1つのパラメータに配列を設定する方法になります。
まずは最初こんな感じでいけるのかなーと思って下記作ってみました。
※HogeInfoRequestModelにitemArrayという配列項目があるとします。
getHogeInfo(req: HogeInfoRequestModel): Observable<HogeInfoModel> { const options = { params: new HttpParams() .set('items[]', req.itemArray) }; return this.http.get('xxxxx/yyyyy/hoge/info', options).pipe(tap(console.log)); }
上記で上手くいきそうな感じはするんですが、もちろん上手くいきません。。。
ここで「HttpParams を動的に追加したい。」の方法で、改めて配列追加という流れでやってももちろん大丈夫ですが、すでに配列になっている項目をリクエストしたい場合、下記のような記述方法でもいけました。
getHogeInfo(req: HogeInfoRequestModel): Observable<HogeInfoModel> { const options = { params: new HttpParams() .set('items', JSON.stringify(req.itemArray)) }; return this.http.get('xxxxx/yyyyy/hoge/info', options).pipe(tap(console.log)); }
JSON.stringifyを使ってここでJSON文字列に変換しちゃおうという方法です。
【注意!】結果的に、「配列を送っている」というのは正しくなく、ただの文字列を送っているにすぎないので、当然受け手側(WebAPI側)が、その文字列を配列に変換する必要があります。
配列項目をリクエストするという時には、用途に合わせて良き書き方で書いていただければと思います。
Angular
0 件のコメント:
コメントを投稿