[英]How to render grand child and remove JSON object
I have a Json arry like 我有一个Json arry像
Array(3)
0: {validationMessage: {…}, id: -2147482623, partTypeId: null, partType: null, partCategoryId: 5, …}
1: {validationMessage: {…}, id: -2147482622, partTypeId: null, partType: null, partCategoryId: 2, …}
2: {validationMessage: {…}, id: -2147482621, partTypeId: null, partType: null, partCategoryId: 5, …}
from insde it looks like this 从insde看起来像这样
Array(3)
0: {validationMessage: {…}, id: -2147482623, partTypeId: null, partType: null, partCategoryId: 5, …}
1:
repairFacility: null
resourcePredictions: null
revision: null
specification: null
validationMessage:
errors: Array(1)
0:
attemptedValue: "147-6268-5715"
customState: null
errorCode: "PredicateValidator"
errorMessage: "This is warning "
[Solved]My first question how can I render my validation errorMessage: which is under each of my array element ->validationMessage>errors[0]->errorMessage so far I can render other elements and here is my code. [已解决]我的第一个问题是如何呈现我的验证errorMessage:目前位于我每个数组元素下的-> validationMessage> errors [0]-> errorMessage下,我现在可以呈现其他元素,这是我的代码。 but for error message it shows x is not defined
但对于错误消息,它显示x未定义
<TableBody>
{this.props.data ? this.props.data.map((item, i) => (
<TableRow key={i}>
{
x = function myFunction(item) {
if (item.validationMessage.erros[0].length > 0) {
return item.validationMessage.erros[0].errorMessage
} else {
return ''
}
}
}
<TableCell align="right">{x}</TableCell> ////Want to render ERRORMESSAGE
<TableCell align="right">{item.partNumber}</TableCell>
<TableCell align="right">{item.description}</TableCell>
<TableCell align="right">{item.partCategoryId}</TableCell>
<TableCell align="right">{item.oemPartNumber}</TableCell>
</TableRow>
)) : ''}
</TableBody>
My second question is how can I remove "validationMessage:" from my JSON? 我的第二个问题是如何从JSON中删除“ validationMessage:”? here is my try
这是我的尝试
removemsg() {
const { data } = this.props
let out = null;
if (data) {
out = data.delete("validationMessage");
}
}
To render your error only if the length of your array is different to 0
, you could use conditional rendering. 若要仅在数组的长度不同于
0
呈现错误,可以使用条件呈现。
A length of 0
will not return anything using the &&
operator, as it is falsy : 长度为
0
不会使用&&
运算符返回任何内容,因为它是错误的:
<TableBody>
{this.props.data && this.props.data.map((item, i) => (
<TableRow key={i}>
<TableCell align="right">{item.validationMessage.erros[0].length && item.validationMessage.erros[0].errorMessage}</TableCell>
<TableCell align="right">{item.partNumber}</TableCell>
<TableCell align="right">{item.description}</TableCell>
<TableCell align="right">{item.partCategoryId}</TableCell>
<TableCell align="right">{item.oemPartNumber}</TableCell>
</TableRow>
))}
</TableBody>
To extract only a given variable out of a JSON, you can use deconstruction and then use the deconstructing operator ...
to get everything lefy of your object in a variable, here named newData
: 要仅从JSON中提取给定的变量,可以使用解构,然后使用解构运算符
...
将对象的所有内容都保留在变量中,这里称为newData
:
removemsg() {
const { data = {} } = this.props
const { validationMessage, ...newData } = data
console.log(newData)
}
However, you cannot directly modify your props. 但是,您不能直接修改道具。
For your first question you can simply put an if statement (using the ternary operator) inside the {}
brackets where you currently have the x
. 对于您的第一个问题,您可以简单地将if语句(使用三元运算符)放在
{}
括号内,其中您当前拥有x
。 I think this should suffice. 我认为这足够了。 I've also taken the liberty to return the stuff within your map function.
我还可以自由地在map函数中返回内容。
<TableBody>
{
(this.props.data)
? this.props.data.map((item, i) => (
return (
<TableRow key={i}>
<TableCell align="right">
{
(item.validationMessage.errors[0].length > 0)
? item.validationMessage.errors[0].errorMessage
: ''
}
</TableCell>
<TableCell align="right">{item.partNumber}</TableCell>
<TableCell align="right">{item.description}</TableCell>
<TableCell align="right">{item.partCategoryId}</TableCell>
<TableCell align="right">{item.oemPartNumber}</TableCell>
</TableRow>
);
))
: ''
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.