1

私はフロント エンド プログラミングにかなり慣れていませんが、アプリケーションの Web UI を構築するのを手伝っています。少し難しい機能を追加しようとしていますが、ほとんどの場合、すべてが何をするかについての基本的な考え方を理解するのに十分なほど学びました。

簡単に言うと、2 つの ag-grid があります (reactJS を使用)。メインのものはデータを保持し、フィルタリングすることができます。メインのものから列名を保持するだけでなく、適用されたフィルターを動的にリストする2番目のものを作成しようとしています. この 2 番目のグリッドは、ユーザーのアシスタント/ヘルパー グリッドのようなものです。

私の理解は、これまでの実装の途中で役立ちました (2 番目の ag-grid にメイン グリッドのすべての列ヘッダーを設定することができました)。

列見出しのデータは保存され、小道具から取得されました。次のようなもの：

rowData : this.props.report.view.columns

console.log(this.props.report.view.columns) を実行すると (Chrome 開発者ツールのコンソールを使用しています)、列情報を保持する 17 個のオブジェクトの配列が表示されます。以下に示す構造：

report: Object
|
--view: Object
  |
  --columns: Array(17)
    |
    --0: Object
    |  |
    |  -- field: "testColumn"
    |     headerName: "testColumn"
    |
    --1: Object
    --2: Object
    --3: Object
.
.
.   
    --16: Object

これは 17 個のオブジェクトの配列のように見え、それぞれが 2 つのキーと値のペアを保持しているように見えます。私がやりたいことは、3 番目のキーと値のペアを追加することです

フィルターが適用された列のみの key:value ペアを提供する別の小道具があります (つまり、列名が別のキー名で保存されている columnName:blah 、 filter:blahh )。

実装する予定の疑似コードは次のようになります。

For EACH element in the 17 Object array (this.props.report.view.columns)
    if headername = columnName (i.e. from column from filter prop)
THEN
    add new key:value pair headerName:filter; to that object element
ELSE 
    add new key:value pair headerName:''; (an empty value) to that object

最終的には、この 2 つのキーと値のペアの 17 個のオブジェクト配列を、3 つのキーと値のペアを持つ 17 個のオブジェクト配列に変更します。このようなことは可能ですか? もしそうなら、アドバイスをもらえますか？使用したプラン全体が間違っているのではないかと少し心配しています。先輩の同僚は、コールバックを使用する別の計画を使用することを提案しましたが、コードを大幅に変更しない限り、それがどのように可能になるかわかりませんでした (そのため、私は直感に固執しました)。

4

1 に答える 1

0

メソッドでmap？https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/map

const data = [
  {a: 7, b: 0},
  {a: 4, b: 7},
  {a: 9, b: 6},
  {a: 1, b: 7},
];

const newData = data.map(currObj => ({...currObj, c: 0}));

console.log(newData);

于 2017-06-24T18:53:36.040 に答える