Finding an object in array and taking values from that to present in a select list
If you need to get all items from array which have title: 'Table 1', you can use .filter(Example)., if you need only first item where title: 'Table 1' you can use .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>For the first part use find method:
function findArrayElementByTitle(array, title) {
return array.find((element) => {
return element.title === title;
})
}
It will return the first array element for which the condition element.title === title holds true.