如何使用reactjs获取列work_status和text1的JSON记录值

Question

下面的代码用于在React.js中显示JSON记录，它工作得很好，因为我可以显示数据id和名称。

如何获取/显示work_status的值(例如状态1，状态3，状态9)和text1(例如:安，托尼，约翰)

?代码如下:

import React from "react";

class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data:[
{
"id": "2788621216",
"name": "Item 1",
"column_values": [
{
"id": "work_status",
"value": ""status1""
},
{
"id": "text1",
"value": ""Ann""
}
]
},
{
"id": "2757366595",
"name": "item 2",
"column_values": [
{
"id": "work_status",
"value": ""status 3""
},
{
"id": "text1",
"value": ""Tony""
}
]
},
{
"id": "2758432275",
"name": "Item 3",
"column_values": [
{
"id": "work_status",
"value": ""status 9""
},
{
"id": "text1",
"value": ""John""
}
]
}
],
};
}

componentDidMount() {}

render() {
const { } = this.state;
return (
<div>     
{this.state.data.map(b => (
<div key={b.id} className=''>
<div class="card-body">
<b>BId:</b> {b.id}
<br />
<b>Name:</b> {b.name}
</div>
</div>
))}
</div>
);
}
}

export default App;

Answer 1

如果你有固定位置的值，你可以使用这个

看这个jsfield

<div>
{this.state.data.map((b, i) => (
<div key={b.i}>
<div class="card-body">
<b>BId:</b> {b.id}
<br />
<b>Name:</b> {b.name}
</div>
<div class="work-status">
<h4>Work status</h4>
<p> {b.column_values[0].value.replace(/"/g, "")} </p>
</div>
<div class="text-1">
{/* text */}
<h4> Text</h4>
<p> {b.column_values[1].id} </p>
</div>
</div>
))}
</div>

Answer 2

您可以尝试创建一个具有所有相关属性的对象，如下所示

let output = data.map(x => {
let item = {};

item["id"] = x.id;
item["name"] = x.name;

x.column_values.forEach(y => {
item[y.id] = y.value;

})

return item;
});

和映射通过这个(所有需要的字段将在对象上可用)