Getting values from an object in phoneno and email parameters in Reactjs - reactjs

Question

The code below is working fine and it display record from Monday API.
Here is the outputed JSON record via JSON.stringify()
[ { "id": "3150569213", "name": "Task 1", "column_values": [ { "id": "fullname", "value": null }, { "id": "status", "value": null }, { "id": "email", "value": null }, { "id": "phone_number", "value": null }, { "id": "address", "value": null }, { "id": "product", "value": null }, { "id": "quantity", "value": null }, { "id": "reward", "value": null } ] }, { "id": "3150569636", "name": "Recycle Products Share By ann balling", "column_values": [ { "id": "fullname", "value": "\"ann balling\"" }, { "id": "status", "value": "{\"index\":0}" }, { "id": "email", "value": "{\"text\":\"nancy#gmail.com\",\"email\":\"nancy#gmail.com\",\"changed_at\":\"2022-08-27T12:16:47.728Z\"}" }, { "id": "phone_number", "value": "{\"phone\":\"1234567890\",\"countryShortName\":null}" }, { "id": "address", "value": "{\"lat\":\"Texas,\",\"lng\":\"US\",\"address\":\"unknown\"}" }, { "id": "product", "value": "{\"text\":\"Paper,Bottles,Plastic Cans\"}" }, { "id": "quantity", "value": "\"200\"" }, { "id": "reward", "value": "\"Gift\"" } ] } ]
The property i.column_values[0].value displays record "Nancy More" and I remove the double quotes around it using json.parse() hence JSON.parse(i.column_values[0].value) and its okay.
Here is my issue. The property i.column_values[1].value display record object
{"text":"nancy#gmail.com","email":"nancy#gmail.com","changed_at":"2022-08-27T12:16:47.728Z"}
How do I get email value hence nancy#gmail.com.
Here is the code
import React from "react";
import "./App.css";
import mondaySdk from "monday-sdk-js";
const monday = mondaySdk();
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
loading: false,
datax: [],
};
}
componentDidMount() {
monday.api(`query {boards (ids: 34443234) {items(limit: 3 page: 1) {id name column_values {
id
value
} }}}`).then(res => {
console.log(res);
this.setState({datax: res.data.boards[0].items});
});
}
render() {
const {loading } = this.state;
return (
<div>
<table class="table table-hover">
<thead>
<tr>
<th>Fullname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
{this.state.datax.map((i, index) => (
<tr key={index}>
<td>{JSON.parse(i.column_values[0].value)}</td>
<td>{i.column_values[1].value}</td>
</tr>
))}
</tbody>
</table>
{JSON.stringify(this.state.datax, null, 2)}
<br />
</div>
);
}
}
export default App;

Answer 1

The code below is how I got the email address value working
<td>{i.column_values[2].value.split(':')[1].split('"')[1]}</td>