web-dev-qa-db-fra.com

Trouver un objet dans un tableau et en prendre des valeurs pour le présenter dans une liste de sélection

J'ai une valeur de chaîne (par exemple "Tableau 1") que je dois utiliser pour trouver un objet spécifique dans un tableau qui ressemble à ceci:

[
 {
  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"}]
 }
]

Une fois que j'ai trouvé cet objet, j'ai besoin de prendre les valeurs de la clé des colonnes et de les afficher dans une liste de sélection.

Je sais comment faire la deuxième partie, mais c'est d'abord l'accès à l'objet qui me pose problème. J'essaie de le faire dans un composant React render).

Toute l'aide pouvant etre apportée serait très appréciée.

Merci pour votre temps.

arraysreactjsjavascript-objects
11
BeeNag

Si vous devez obtenir tous les éléments du tableau qui ont title: 'Table 1', vous pouvez utiliser .filter ( Example ) ., si vous n'avez besoin que du premier élément où title: 'Table 1' vous pouvez utiliser .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.

Pour la première partie, utilisez la méthode find :

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

Il renverra le premier élément du tableau pour lequel la condition element.title === title qui est vrai.

13
Igorsvee