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から複数の項目を配列として受け渡すことができます。
プロジェクト全体のソースコードはこちらにあります。
