web-dev-qa-db-ja.com

配列内のオブジェクトを検索し、そこから値を取得して選択リストに表示する

次のような配列内の特定のオブジェクトを見つけるために使用する必要がある文字列値（「Table 1」など）があります。

[
 {
  lookups: [], 
  rows: [{data: {a: 1, b: 2}}, {data: {a: 3, b: 4}}], 
  title: "Table 1", 
  columns: [{name: "a"}, {name: "b"}]
 },
 {
  lookups: [],
  rows: [{data: {c: 5, d: 6}}, {data: {c: 7, d: 8}}],
  title: "Table 2",
  columns: [{name: "c"}, {name: "d"}]
 }
]

そのオブジェクトを見つけたら、列キーから値を取得し、選択リストに表示する必要があります。

2番目の部分を行う方法は知っていますが、最初に問題になっているのはオブジェクトにアクセスすることです。 Reactコンポーネントレンダリング内でこれを実行しようとしています。

これに関するヘルプは大歓迎です。

御時間ありがとうございます。

arraysreactjsjavascript-objects
11
BeeNag

title: 'Table 1'を持つ配列からすべてのアイテムを取得する必要がある場合は、 .filter（ Example ）。最初のアイテムだけが必要な場合、title: 'Table 1'を使用できます .find（ Example ）

var App = React.createClass({
  columns: function(condition) {
    return this.props.data
      .filter((e) => e.title === condition)
      .map(e => e.columns)
      .reduce((prev, current) => prev.concat(current), [])
      .map((column, index) => <p key={ index }>{ column.name }</p>)
  },

  render: function() {
    const condition = 'Table 1';
    return <div>{ this.columns( condition ) }</div>;
  }
});

const data = [{
  lookups: [], 
  rows: [{data: {a: 1, b: 2}}, {data: {a: 3, b: 4}}], 
  title: "Table 1", 
  columns: [{name: "a"}, {name: "b"}]
}, {
  lookups: [],
  rows: [{data: {c: 5, d: 6}}, {data: {c: 7, d: 8}}],
  title: "Table 2",
  columns: [{name: "c"}, {name: "d"}]
}, {
  lookups: [],
  rows: [],
  title: "Table 1",
  columns: [{name: "m"}, {name: "n"}]
}];

ReactDOM.render(
  <App data={ data } />,
  document.getElementById('container')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"></div>
17
Alexander T.

最初の部分では find メソッドを使用します：

function findArrayElementByTitle(array, title) {
  return array.find((element) => {
    return element.title === title;
  })
}

条件element.title === titleが真である最初の配列要素を返します。

13
Igorsvee