Finding an object in array and taking values from that to present in a select list

Question

I have a string value (e.g. "Table 1") that I need to use to find a specific object in an array that looks like so:

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

Once I have found that object I then need to take the values from the columns key and display them in a select list.

I know how to do the second part, but it is getting access to the object in the first place that I am having trouble with. I am trying to do this within a React component render.

Any help with this would be greatly appreciated.

Thanks for your time.

So your problems is to find object in array where key = value, right?! I would use underscore _.findWhere or lodash — d-bro82, Sep 01 '16 at 11:28

Igorsvee · Answer 1 · 2016-09-01T11:31:30.317

39

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.

edited Sep 01 '16 at 11:31

answered Sep 01 '16 at 11:25

Igorsvee

4,101
1
25
21

Oleksandr T. · Accepted Answer · 2018-05-29T15:41:49.513

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>

Senthuran · Answer 3 · 2020-02-25T17:31:26.247

The below method will return the all the elements having the particular value(i.e in the below case it is isEdit:true).

 filterArrayElementByEdit(array) {
    return array.filter((element) => {
      return element.isEdit === true;
    })
  }

Below method will return only the first element.

 findArrayElementByEdit(array) {
    return array.find((element) => {
      return element.isEdit === true;
    })
  }

Finding an object in array and taking values from that to present in a select list

3 Answers3

Linked