javascript - 如何在 React JS 中显示这个 JSON 数据?
问题描述
我正在使用 Fetch 发布一个返回以下答案的端点:
{
"movimientos": [
{
"Estado": 1,
"_id": "5e31ee4310ec6117387548a2",
"usuarios": "5e262750803c451ca4a27c36",
"empresas": {
"_id": "5e2f4c3ef80d8246f0e545d8",
"Nombre_Empresa": "ING. Y HER. S.A."
},
"Tipo_Documento": "AF",
"Numero_Documento": "2",
"Bodega_Origen": {
"_id": "5e2619ccbb29d71aa8455cad",
"Descripcion": "BODEGA PRINCIPAL"
},
"Bodega_Destino": {
"_id": "5e2629f110b9f32d10524ca5",
"Descripcion": "BODEGA Obra parma"
},
"Responsable": "Mauricio",
"Estado_Documento": "PR",
"Observaciones": "",
"Detalles": [
{
"_id": "5e31ee4c10ec6117387548a3",
"productos": {
"_id": "5e29c1f6bc44ee37687cd976",
"Descripcion": "MINICARGADOR No2"
}
}
],
"Fecha_Creacion": "2020-01-29T20:42:43.535Z"
}
]
}
到目前为止,我可以毫无问题地尝试将答案发送到我在视图中拥有的基本表。我毫无问题地展示了所有元素。但我必须访问这个项目
"Detalles": [
{
"_id": "5e31ee4c10ec6117387548a3",
"productos": {
"_id": "5e29c1f6bc44ee37687cd976",
"Descripcion": "MINICARGADOR No2"
}
}
]
特别是产品中“描述”的价值。我有一个简单的组件负责发出请求并显示数据。代码如下:
class Movimientos extends Component{
state = {movimientos: {}}
componentDidMount () {
const empresa = {
_id: '5e2f4c3ef80d8246f0e545d8'
};
const options = {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify(empresa)
}
fetch('http://localhost:3000/api/movimiento/mostrarMovimientosweb', options
).then((res) => res.json())
.then((data) => {
const {movimientos} = data
this.setState({movimientos})
})
.catch((err)=>console.log(err))
}
/*
"Numero_Documento": "1",
"Responsable": "Mauricio",
"Estado_Documento": "PR",
"Observaciones": "Mas una llanta de repuesto",
*/
renderMovimientos() {
const {movimientos} = this.state
return(
<table class="table">
<thead>
<tr>
<th><abbr title="Position">Numero documento</abbr></th>
<th>Bodega origen</th>
<th><abbr title="Played">Bodega destino</abbr></th>
<th><abbr title="Won">Responsable</abbr></th>
<th><abbr title="Drawn">Estado documento</abbr></th>
<th><abbr title="Lost">Observaciones</abbr></th>
</tr>
</thead>
<tfoot>
<tr>
<th><abbr title="Position">Numero documento</abbr></th>
<th>Bodega origen</th>
<th><abbr title="Played">Bodega destino</abbr></th>
<th><abbr title="Won">Responsable</abbr></th>
<th><abbr title="Drawn">Estado documento</abbr></th>
<th><abbr title="Lost">Observaciones</abbr></th>
<th><abbr title="Lost">Maquina</abbr></th>
</tr>
</tfoot>
<tbody>
{Object.keys(movimientos).map (datos => {
return (
<tr key={datos}>
<td> {movimientos[datos].Numero_Documento}</td>
<td>{movimientos[datos].Bodega_Origen.Descripcion}</td>
<td>{movimientos[datos].Bodega_Destino.Descripcion}</td>
<td>{movimientos[datos].Responsable}</td>
<td>{movimientos[datos].Estado_Documento}</td>
<td>{movimientos[datos].Observaciones}</td>
<td>{movimientos[datos].Observaciones}</td>
</tr>
)})}
</tbody>
</table>
)
}
render (){
return (
<div>
{this.renderMovimientos()}
</div>
)
}
}
export default Movimientos;
它工作正常,并为我带来了我要求的元素,但我无法输入前一个元素,我非常确定我能做到这一点。
解决方案
需要注意的是这Detalles
是一个数组,即使它只有一个元素。因此,如果您知道它始终只有一个元素,那么您可以使用 访问它Detalles[0].productos.Descripcion
,但循环或映射数组会更安全。
推荐阅读
- python - 有没有什么好的方法来表示对数据框中的值进行排序之前和之后的顺序变化?
- python - 在 pytest 中使用自定义测试资源修补第三方客户端
- ios - iOS 13 中 TabBar 上的 CGAffineTransform
- python - 从 fortran 返回四精度变量
- java - 在 Intellij IDEA Edu 中单击“运行”时如何过滤输出?
- kubernetes - Pod 相对于容器的优势
- bash - 剪切cmd不起作用时如何仅显示文件名?
- excel - 每次运行时自动移动到下一列
- mysql - 正则表达式:匹配 XYX,其中 X 和 Y 是任意字母
- firebase - Firebase:避免数据库争用:而不是事务,使用更新单个文档中的唯一字段