2020年12月30日水曜日

Angularでgetパラメータに配列を設定する方法。

オフィス狛 技術部のHammarです。

前回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側)が、その文字列を配列に変換する必要があります。

配列項目をリクエストするという時には、用途に合わせて良き書き方で書いていただければと思います。

0 件のコメント:

コメントを投稿