Velo 第５４回 Set オブジェクトを使う
第26回の続編です。
Set オブジェクトは要素の重複を許さない反復可能なオブジェクトです。
例えばコレクションのフィールドから見出しを作る時などには最適なオブジェクトです。
見出しを配列で作成する場合は if 文で重複を検出する必要がありますが、Set オブジェクトではその必要がないからです。
またSet オブジェクトは反復可能ですので for/of 文や forEach( ) メソッドが使えます。
今回はコレクションのタイトルフィールドから、ホビーの目次を作ってドロップダウンに設定し、リピーターで表示するコードを作ってみましょう。
ページ要素
ドロップダウン(myDropdown)、リピーター(myRepeater)、データセット(myDataset)をページに追加します。リピーターをデータセットに接続し、コレクションのタイトル(title)、名前(name)、画像(picture)をリピーター要素に接続します。
コード(ドロップダウンオプション)
冒頭で wixData をインポートし、クエリーを使ってコレクションアイテムを取得します。
新規セットオブジェクト(hobbySet)を使ってアイテムからホビーを取得します。
アイテムではホビーが重複しますが、hobbySetでは重複しません。
また hobbySetは反復可能ですので、forEach( ) メソッドが使えます。
それを使ってドロップダウン(myDropdown)のオプション(options)を設定します。
以下のコードをご覧下さい。
コード(チェンジイベント)
ドロップダウンのチェンジオプションを設定します。
'All' を選んだときは全データを、ホビーを選択したときにはフィルターをデータセットに設定します。
以下のコードをご覧下さい。
プレビュー
テニスを選んだリピーター表示です。
Velo開発のご依頼はこちら