Ufdjrw

I have a Json arry like

 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

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. but for error message it shows x is not defined

 <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? here is my try

removemsg() 
 const data = this.props
 let out = null;
 if (data) 
 out = data.delete("validationMessage");
 

For your first question you can simply put an if statement (using the ternary operator) inside the brackets where you currently have the x. I think this should suffice. I've also taken the liberty to return the stuff within your map function.

<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>
 );
 ))
 : ''

First question

To render your error only if the length of your array is different to 0, you could use conditional rendering.

A length of 0 will not return anything using the && operator, as it is falsy :

<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>

Second question

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 :

removemsg() 
 const data = = this.props
 const validationMessage, ...newData = data

 console.log(newData)

However, you cannot directly modify your props.