Calling child API in React JS-CodePudding

I am trying to call API and display the data on table in react js. The API structure is like:

     "items" : [ { 
        "@id" : "http://ABCD......" ,
        "dateTime" : "2022-05-28T00:00:00Z" ,
        "measure" : "http://measurement_1/abc" ,
        "value" : 0.066
      }
      , { 
        "@id" : "http://ABCD......" ,
        "dateTime" : "2022-05-28T00:15:00Z" ,
        "measure" : "http://measurement_2/abc" ,
        "value" : 0.066
      }
      , { 
        "@id" : "http://ABCD......" ,
        "dateTime" : "2022-05-28T00:45:00Z" ,
        "measure" : "http://measurement_3/abc" ,
        "value" : 0.066
      }
]

I was able to display 3 columns 'dateTime','measure','value' using following code.

class App extends React.Component{

  state ={
    items:[]
  };

  async componentDidMount(){
    const response = await fetch('/L1931/readings?today');
    const body = await response.json();
    this.setState({items:body.items});
  }
  render(){
    const {items} = this.state;
    const itemList = items.map(item => {
        return <tr key={item.dateTime}>
            <td style={{whiteSpace: 'nowrap'}}>{item.dateTime}</td>
            <td>{item.value}</td>
            <td>{item.measure}</td>
        </tr>
    });

    return (
      <div>
              <Table className="mt-4">
                  <thead>
                  <tr>
                      <th width="30%">Date</th>
                      <th width="30%">Value</th>
                      <th width="40%">Measurement</th>
                  </tr>
                  </thead>
                  <tbody>
                  {itemList}
                  </tbody>
              </Table>
      </div>
  );


  }
}

The output is like

Now, I want to call the child API under 'Measurement' column and display a certain column in the table. Can anybody help me to achieve this?

CodePudding user response：

You can use