我如何從其余的 api 呈現表格

Question

{
  "firma": {
    "serialNo": 12345,
    "companyName": "facebook",
    "email": "admin@admin",
    "bankNo": 987,
    "adress": "london",
    "faturas": [
      {
        "fid": 123,
        "updateDate": [2021, 12, 14],
        "sellDate": 1241231,
        "price": 1500
      }
    ]
  }
}

這是我從我的 API 獲得的 json。 我正在嘗試使用 React 為給定的 API 制作一個前端：

class UserComponents extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      users: []
    };
  }

  componentDidMount() {
    UserService.getFatura().then((response) => {
      this.setState({ users: response.data });
    });
  }

  render() {
    return (
      <div>
        <h2 className="text-center">Faturalar</h2>
        <div className="row">
          <table className="table table-striped table-bordered">
            <thread>
              <tr>
                <th>User serialNo</th>
                <th>User companyName</th>
                <th>User email</th>
                <th>User bankNo</th>
                <th>User adress</th>
              </tr>
            </thread>
            <tbody>
              {this.state.users.map((users) => (
                <tr key={users.serialNo}>
                  <td> {users.serialNo}</td>
                  <td> {users.companyName}</td>
                  <td> {users.email}</td>
                  <td> {users.bankNo}</td>
                  <td> {users.adress}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    );
  }
}

export default UserComponents;

問題是我無法將 json 中的 faturas 放到我的桌子上以進行反應。 我嘗試了一些代碼但沒有用我很新，需要幫助做出反應。 請盡可能簡單。 注意：firma 和 faturas 是一對多的關系 serialNo 是 faturas 中的外鍵。

Answer 1

您的數據具有子字段firma 。 如果你想先打印數據，你必須得到這個字段。

像這樣;

{this.state.users.map(({firma}) => ( // javascript can get property like this
  <tr key={firma.serialNo}>
  <td> {firma.serialNo}</td>
  <td> {firma.companyName}</td>
  <td> {firma.email}</td>
  <td> {firma.bankNo}</td>
  <td> {firma.adress}</td>
 </tr>
))}

或這個;

{this.state.users.map((user) => (
  <tr key={user.firma.serialNo}>
  <td> {user.firma.serialNo}</td>
  <td> {user.firma.companyName}</td>
  <td> {user.firma.email}</td>
  <td> {user.firma.bankNo}</td>
  <td> {user.firma.adress}</td>
 </tr>
))}

如果你想打印faturas，你可以使用它；

{this.state.users.map((user) => (
  <tr key={user.firma.serialNo}>
  <td> {user.firma.serialNo}</td>
  <td> {user.firma.companyName}</td>
  <td> {user.firma.email}</td>
  <td> {user.firma.bankNo}</td>
  <td> {user.firma.adress}</td>
  <td> {user.firma.faturas.map((fatura) => (<div>
       <p>Fatura ID : {fatura.fid}</p>
       <p>Sell Date: {fatura.sellDate}</p>
       <p>Price: {fatura.price}</p>
     </div>)
  )}</td>
 </tr>
))}