web-dev-qa-db-ja.com

ネストされたデータを効果的にキャプチャする方法は？

次の構造でデータをキャプチャする必要があります（jsonペイロードは、私が知っている構造を表す最も簡単な方法です）。

{
  "A": [{
    "B1": "foo",
    "B2": 1,
    "B3": [{
      "C1": "bar",
      "C2": 2,
      "C3": [{
        "D1": "baz"
      }] 
    }]
  }]
}

ユーザーはこの情報をフォーム/フォーム/テーブルに取り込む必要があります。ご覧のとおり、Aはデータのコレクションであり、B3とC3もそうです。基本的には、データのネストされたコレクションです。

注意すべき点は、構造が単一のドメインエンティティを表すことです。つまり、D1は、Cアイテムのコンテキスト外では意味をなさないなどです。

最初は、コンテキストを失うことなくキャプチャプロセスを分割する最も簡単な方法は、Aアイテムのテーブルを含むBページと、Bアイテムを追加できるボタンを用意することだと考えていました。 Add new B itemボタンをクリックすると、B1、B2、およびB3ボタンなどのC項目を含むAdd new C itemのテーブルをキャプチャするページに移動します。ブレッドクラムとのコンテキストを維持しながら。したがって、ユーザーが最も深いページでD1をキャプチャしている場合、ブレッドクラムはA/foo/barを表示します

システムの主要ユーザーは、多くのAアイテムをキャプチャする必要があることに懸念を表明しました。また、画面間を移動することはイライラするでしょう。彼らの提案は、データをテーブルに取り込むことです。例えば.

Table Capture

これに関する私たちの問題は、何度も何度も入力される非常に多くの重複データがあることです。また、別の問題は、ユーザーがタイプミスをして、1つだけが意図されていた場合に2つのインスタンスを作成する可能性があることです。つまり、fooとfo0

私の質問は、ユーザーが一度に大量のネストされたデータをキャプチャできるようにする素晴らしい方法があると思いますか？

tablesinputnested-tables
1
Storm Muller

ここで親子関係があり、AからのデータがBを指示し、BがCを指示することをユーザーが確実に理解するように注意する必要があります。テーブルはそれを効果的に伝えません。

ある種のツリー/マップUIを使用すると、子アイテムをキャプチャする際に親の値のコンテキストを失わないようにすることができます。 、複製の代わりに。問題の値が数値の場合は、何らかのドロップダウンで以前に入力した値にリンクし、数値入力フィールドに新しい値を追加できるようにします。これにより、ユーザーが行った決定/入力をツリー/マップでグラフィカルに表すことができるため、ユーザーは間違いを簡単に見つけることができます。

Value creation

TreeStructure

これは、マルチレベルのメニュートラバーサルを構築するようなもので、すべての関係を一度に簡単に確認できます。

編集：あなたはそれをマルチリーフツリー/マルチリンクリスト/マップと考えることもできます。

Aのバリアントが複数ある場合は、A1、A2などになります。その場合、マトリックスUI構造の方が理にかなっています。

1
MegaFisshy