How to loop through complex object using Map in React

Question

I have a functional component which is reading data from an API. I have defined an Interface but unable to assign API data to Interface, followed by loop and display in table using Map in react.

Interface

export interface IEziTrackerStatus{
    Schedules:  EziSchedules [],
    eziClient: {
      clientId: number,
      isActive: boolean,
      name: string
    }
 }

..

export interface EziSchedules
{
  id: number,
  startTime: Date,
  endTime: Date
 }

component

const MyComponent = () => {
  const [eziStatusCollection, setEziTrackerStatus] = useState<IEziTrackerStatus>();

 useEffect(() =>{
   getEziTrackerStatusReport();
 },[]);

  const getEziTrackerStatusReport = () =>{
 (async () =>{
  try{
    const resp = await apiRequest(EcpApiMethod.GET, `${api.eziTrackerStatus}`, null);

    setEziTrackerStatus(resp);
    var x= eziStatusCollection;   //HELP HERE - Undefined error 
    debugger;
   }
  catch (error) {
  console.log(error);
  }
 })();
}

need help here

  {eziStatusCollection && eziStatusCollection.eziAreaManager ????
    <table  className="table">
      <tr>
        <td>SideIt</td>
      </tr>
      {
        eziStatusCollection.Schedules.map(item => (
          <tr>
            <td>{item.siteId}</td>
          </tr>
        ))
      }

score 0 · Answer 1 · answered Dec 02 '20 at 10:20

Why do you have a Immediately Invoked Function Expression which is wrap getEziTrackerStatusReport method.

Define it like this,

const getEziTrackerStatusReport = async () => {
  try{
    const resp = await apiRequest(EcpApiMethod.GET, `${api.eziTrackerStatus}`, null);

    setEziTrackerStatus(resp);
    var x= eziStatusCollection;   //HELP HERE - Undefined error 
    debugger;
   }
  catch (error) {
    console.log(error);
  }
 }

When you wrap it with immediately invoked function it act as kind of similar to a namespace. If you want to keep it same as above code in your question, you can pass down the parameters you want like below,

(async (setVal, val) =>{
  try{
    const resp = await apiRequest(EcpApiMethod.GET, `${api.eziTrackerStatus}`, null);

    setVal(resp);
    var x= val;   //HELP HERE - Undefined error 
    debugger;
   }
  catch (error) {
  console.log(error);
  }
 })(setEziTrackerStatus, eziStatusCollection);

You can read more from here - https://stackoverflow.com/a/2421949/11306028

score 0 · Answer 2 · answered Dec 02 '20 at 12:37

I have found the answer, the eziClient is nested object so need to access object data against it

return (
  
<div>
  <h2>EziTracker Dashboard Report</h2>
    {eziStatusCollection && eziStatusCollection.length >0 && (
    <table  className="table">
      <thead>
        <tr>
          <th>ClientId</th>
          <th>Is Active</th>
          <th>Name</th>
        </tr>
      </thead>
      <tbody>
      {
        eziStatusCollection.map((item, index) => {
          
          return(
            <tr key={index}>
              <td>{item.eziClient.clientId}</td>
              <td>{item.eziClient.isActive}</td>
              <td>{item.eziClient.name}</td>
            </tr>           
        )})
        }
        </tbody>
      </table>)}
  </div>
 );
};

How to loop through complex object using Map in React

Interface

component

2 Answers2