在数组中查找对象并从中获取值以显示在选择列表中答案

【问题标题】：Finding an object in array and taking values from that to present in a select list在数组中查找对象并从中获取值以显示在选择列表中
【发布时间】：2017-01-09 06:05:54
【问题描述】：

我有一个字符串值（例如“表 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"}]
 }
]

找到该对象后，我需要从列键中获取值并将它们显示在选择列表中。

我知道如何做第二部分，但它首先要访问我遇到问题的对象。我正在尝试在 React 组件渲染中执行此操作。

对此的任何帮助将不胜感激。

感谢您的宝贵时间。

【问题讨论】：

所以你的问题是在数组中找到key = value的对象，对吧？！我会使用下划线 _.findWhere 或 lodash

标签： arrays reactjs javascript-objects

【解决方案1】：

第一部分使用find方法：

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

它将返回条件element.title === title 成立的第一个数组元素。

【讨论】：

【解决方案2】：

如果您需要从数组中获取所有具有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>

【讨论】：

【解决方案3】：

下面的方法将返回所有具有特定值的元素（即在下面的情况下它是 isEdit:true）。

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

下面的方法将只返回第一个元素。

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

【讨论】：