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から複数の項目を配列として受け渡すことができます。

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

https://github.com/kmatae-pitadigi/sample-sf-arrayparam