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

Question

我有一个字符串值（例如“表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组件呈现中执行此操作。

任何帮助，这将不胜感激。

谢谢你的时间。

Answer 1

如果你需要得到阵列具有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>

Answer 2

在第一部分使用find方法：

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

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