How to properly display name, fullname, email from json record in reactjs-CodePudding

I have the following code which displays record from monday api successfully.

I can get the json record via {JSON.stringify(this.state.datax, null, 2)} as per below

[ { "items": [ { "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":"[email protected]","email":"[email protected]","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"" } ] } ] } ]

Here is my issues:

Please how do I get values for name, fullname, email

Here is the code

import React from "react";
import "./App.css";
import mondaySdk from "monday-sdk-js";
import "monday-ui-react-core/dist/main.css"


const monday = mondaySdk();
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
      
            loading: false,
            datax: [],

        };      

    }

  componentDidMount() {
monday.api(`query {boards (ids: 3150569212) {items(limit: 3 page: 1) {id name column_values {
        id
        value
      } }}}`).then(res => {
  console.log(res);
this.setState({datax: res.data.boards});
//this.setState({datax: res.data.boards[0].items});
});

  }

    render() {
const {loading } = this.state;
        return (
            <div>


  
  
   <table >
    <thead>
      <tr>
 <th>Name</th>
        <th>Fullname</th>
<th>Email</th>
       
      </tr>
    </thead>
     <tbody>
   {this.state.datax.map((i, index) => (
  
        <tr  key={index}>
<td >{ i.name }</td>
            <td >{ i.fullname }</td>
           
<td>{ i.email }</td>
         
            
        </tr>
        
        ))}
    </tbody>
  </table>



{JSON.stringify(this.state.datax, null, 2)}

            
            <br />



            </div>
        );
    }
}

export default App;

CodePudding user response：

You need to map the first element in that case items and then map column_values since it is an array:

  {this.state.datax[0].items.map((i, index) => (
     <tr key={index}>
        <td>{i.name}</td>
        <td>{i.fullname}</td>
        <td>{i.column_values.map((val) => val.value)}</td>
      </tr>
  ))}

I have try it with the example you send and the output I get is like this, not very clean: