Lightning Web ComponentsからApexクラスにJSONデータを受け渡す方法

Lighting Web Componentsで、一覧形式で編集できる画面を作った場合、複数の項目を、配列で渡したいことってありませんか？

複数の項目を渡すには、項目ごとのパラメータを準備すればOKです。

更新するデータ量が100個以内であれば、パラメータにして必要な回数分、Apexクラスのメソッドを呼び出せば大丈夫です。

100個を超えるとどうなるか･･･。

そうです。SOQLを101回以上コールしたというガバナ制限にひかかります。

これを回避するためには、Lightning Web ComponentsからApexクラスに一度にデータを受け渡す必要があります。

Lightning Web Componentsは、Javascriptなので、JSONが扱えるようにすると便利です。

そこで、ApexクラスにJSONデータを渡してみようと思います。JSONデータはもちろん配列です。

Lightning Web Component側

Lighting Web Components側の実装は、以下の通りです。JSONデータを作って、Apexクラスのメソッドをコールするだけです。1点、JSON.stringifyを使うのを忘れないようにしてください。

import { LightningElement, track } from 'lwc';
import setParam from '@salesforce/apex/ArrayParam.setParam';

export default class ArrayParam extends LightningElement {
   @track
   result;

   handleClick() {
       const param = [
           { intParam: 1, boolParam: true, strParam: 'ABC' },
           { intParam: 2, boolParam: false, strParam: 'DEF' }
       ];

       setParam({param: JSON.stringify(param)})
       .then(result => {
           this.result = result;
       })
       .catch(error => {
           /*eslint no-console: "off"*/
           console.log(error);
           this.result = error;
       })
   }
}

Apexクラス側

Apexクラス側は、パラメータをStringで受けます。そのパラメータをJSON.deserializeUntypedで解析します。

配列のJSONですので、復帰値はList<Object>になります。ヘルプにはMap<String, Object>とありますが、配列のJSONの場合はList<Object>です。

返って来たList<Object>の一つ一つが、Map<String, Object>になります。

このサンプルでは、3つの項目を渡しています。intParamはInteger型、boolParamはBoolean型、strParamはString型になっています。

get('intParam')で値を取得するとInteger型になりますので、(Integer)とキャストして使いましょう。

public with sharing class ArrayParam {
   @AuraEnabled
   public static string setParam(string param){
       string result = '';

       List<Object> lm = (List<Object>)JSON.deserializeUntyped(param);

       for(Integer i=0 ; i<lm.size() ; i++) {
           Map<String, Object> m = (Map<String, Object>)lm[i];
           result += '[ \r\n';
           result += '{' + (Integer)m.get('intParam') + ',' + (Boolean)m.get('boolParam') + ',' + (String)m.get('strParam') + '}\r\n';
           result += '], \r\n';
       }

       return result;
   }
}

これで、Lighting Web Componentsから複数の項目を配列として受け渡すことができます。

プロジェクト全体のソースコードはこちらにあります。

kmatae-pitadigi/sample-sf-arrayparam