以图片格式显示API数据

Question

我是一个新的反应，目前正在做我的第一个项目。我有一个从API获得的数据。现在，我需要以图像格式显示数据。我知道map函数，但我无法映射同一行中的嵌套对象。{

"data": [
    {
        "ks_ref": {
            "id": 7,
            "shelf_position": 1,
            "mapped_shelf_name": "Shelf A",
            "mapped_kiosk_name": "Kiosk 1",
            "mapped_shelf_basket_name_reference": [
                {
                    "id": 1,
                    "basket_position": 1,
                    "mapped_basket_name_reference": [
                        {
                            "id": 1,
                            "mapped_basket_name": "B1",
                            "mapped_product_name": "ABC",
                            "available_product_quantity": 400,
                            "available_product_quantity_units": "Units",
                        }
                    ]
                },
                {
                    "id": 3,
                    "basket_position": 2,
                    "mapped_basket_name_reference": [
                        {
                            "id": 1,
                            "mapped_basket_name": "B1",
                            "mapped_product_name": "XYZ",
                            "available_product_quantity": 400,
                            "available_product_quantity_units": "Units",
                        }
                    ]
                },
            ]
        },
    }
]
}

​

​

这就是我的方法。我无法将嵌套的对象映射到html表的同一行。

const [allMappingData, setAllMappingData] = useState([]);
setAllMappingData(res.data.data);
return (
    <div className="container-fluid" style={{ maxWidth: "1000px" }}>
      <div className="py-4">
        <h2 style={{ textAlign: "center" }} className="mb-3">
          {" "}
          Listing All Mappings
        </h2>
        <Link
          className="btn btn-outline-dark float-left mb-2"
          id="basketback"
          to="/home"
        >
          Back
        </Link>
        <Link
          className="btn btn-outline-dark float-right mb-2"
          id="addBasket"
          to="/mappings/kioskshelfmapping"
        >
          Kiosk-Shelf Mapping
        </Link>
        <Link
          className="btn btn-outline-dark float-right mb-2 mr-2 ml-2"
          id="shelfbasketmapping"
          to="/mappings/shelfbasketmapping"
        >
          Shelf-Basket Mapping
        </Link>
        <Link
          className="btn btn-outline-dark float-right mb-2"
          id="basketproductmapping"
          to="/mappings/basketproductmapping"
        >
          Basket-Product Mapping
        </Link>
        <div style={{ width: "100%", overflow: "hidden" }}>
          {/* <div style={{ width: "320px", float: "left" }}> */}
          <table className="table border shadow" id="AllMapTable">
            <thead className="thead-dark">
              <tr>
                <th style={{ textAlign: "center" }} scope="col">
                  #
                </th>
                <th style={{ textAlign: "center" }} scope="col">
                  Kiosk
                </th>
                <th style={{ textAlign: "center" }} scope="col">
                  Shelf
                </th>
                <th style={{ textAlign: "center" }} scope="col">
                  Shelf Position
                </th>
                <th style={{ textAlign: "center" }} scope="col">
                  Basket Position
                </th>
                <th style={{ textAlign: "center" }} scope="col">
                  Basket Name
                </th>
                <th style={{ textAlign: "center" }} scope="col">
                  Product Name
                </th>
                <th style={{ textAlign: "center" }} scope="col">
                  Available Product Quantity
                </th>
              </tr>
            </thead>
            <tbody>
              <tr>
                {allMappingData.map((item, index) => (
                  <React.Fragment
                    style={{ textAlign: "center" }}
                    key={index + 1}
                  >
                    <th className={{ textAlign: "center" }}>{index + 1}</th>
                    <td className={{ textAlign: "center" }}>
                      {item.ks_ref.mapped_kiosk_name}
                    </td>
                    <td className={{ textAlign: "center" }}>
                      {item.ks_ref.mapped_shelf_name}
                    </td>
                    <td className={{ textAlign: "center" }}>
                      {item.ks_ref.shelf_position}
                    </td>
                  </React.Fragment>
                ))}

​

​

Answer 1

您可能应该先解析数据以使其看起来像您的表，然后再呈现它

const [allMappingData, setAllMappingData] = useState([]);

const parseData = (data) => {
  const parsedArray = [];

  data.forEach(({ ks_ref: item }) => {
    item.mapped_shelf_basket_name_reference.forEach((shelf_basket, index) => {
      shelf_basket.mapped_basket_name_reference.forEach((basket) => {
        parsedArray.push({
          shelf_position: index > 0 ? '' : item.shelf_position,
          mapped_shelf_name: index > 0 ? '' : item.mapped_shelf_name,
          mapped_kiosk_name: index > 0 ? '' : item.mapped_kiosk_name,
          basket_position: shelf_basket.basket_position,
          mapped_basket_name: basket.mapped_basket_name,
          mapped_product_name: basket.mapped_product_name,
          available_product_quantity: basket.available_product_quantity,
        })
      });
    });
  });

  return parsedArray;
}

setAllMappingData(parseData(res.data.data));

return (
  <div className="container-fluid" style={{ maxWidth: "1000px" }}>
    <div className="py-4">
      <h2 style={{ textAlign: "center" }} className="mb-3">
        {" "}
        Listing All Mappings
      </h2>
      <Link
        className="btn btn-outline-dark float-left mb-2"
        id="basketback"
        to="/home"
      >
        Back
      </Link>
      <Link
        className="btn btn-outline-dark float-right mb-2"
        id="addBasket"
        to="/mappings/kioskshelfmapping"
      >
        Kiosk-Shelf Mapping
      </Link>
      <Link
        className="btn btn-outline-dark float-right mb-2 mr-2 ml-2"
        id="shelfbasketmapping"
        to="/mappings/shelfbasketmapping"
      >
        Shelf-Basket Mapping
      </Link>
      <Link
        className="btn btn-outline-dark float-right mb-2"
        id="basketproductmapping"
        to="/mappings/basketproductmapping"
      >
        Basket-Product Mapping
      </Link>
      <div style={{ width: "100%", overflow: "hidden" }}>
        {/* <div style={{ width: "320px", float: "left" }}> */}
        <table className="table border shadow" id="AllMapTable">
          <thead className="thead-dark">
            <tr>
              <th style={{ textAlign: "center" }} scope="col">
                #
              </th>
              <th style={{ textAlign: "center" }} scope="col">
                Kiosk
              </th>
              <th style={{ textAlign: "center" }} scope="col">
                Shelf
              </th>
              <th style={{ textAlign: "center" }} scope="col">
                Shelf Position
              </th>
              <th style={{ textAlign: "center" }} scope="col">
                Basket Position
              </th>
              <th style={{ textAlign: "center" }} scope="col">
                Basket Name
              </th>
              <th style={{ textAlign: "center" }} scope="col">
                Product Name
              </th>
              <th style={{ textAlign: "center" }} scope="col">
                Available Product Quantity
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              {allMappingData.map((item, index) => (
                <React.Fragment
                  style={{ textAlign: "center" }}
                  key={index + 1}
                >
                  <th className={{ textAlign: "center" }}>{index + 1}</th>
                  <td className={{ textAlign: "center" }}>
                    {item.mapped_kiosk_name}
                  </td>
                  <td className={{ textAlign: "center" }}>
                    {item.mapped_shelf_name}
                  </td>
                  <td className={{ textAlign: "center" }}>
                    {item.shelf_position}
                  </td>
                  <td className={{ textAlign: "center" }}>
                    {item.basket_position}
                  </td>
                  <td className={{ textAlign: "center" }}>
                    {item.mapped_basket_name}
                  </td>
                  <td className={{ textAlign: "center" }}>
                    {item.mapped_product_name}
                  </td>
                  <td className={{ textAlign: "center" }}>
                    {item.available_product_quantity}
                  </td>
                </React.Fragment>
              ))}
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
);