如何從 axios json 中循環 object 數組並在反應 js 中響應並將它們設置在 div 中？

Question

我是反應 js 的新手，我正在嘗試從數據庫中獲取數據並將其顯示在網頁上。 使用 Axios 成功從 DB 獲取數據為 JSON，但我不知道如何在數組內循環 object。 我嘗試使用 map function 但它不起作用，因為響應在單個數組中有多個對象。 誰能幫我解決這個問題？

這是我的 json

    {
    "selva": [
        {
            "cus_id": "1",
            "name": "selva",
            "loc_name": "chennai",
            "loc_phone": "986478393",
            "loc_email": "selva@gmail.com"
        },
        {
            "cus_id": "1",
            "name": "selva",
            "loc_name": "Trichy",
            "loc_phone": "123456789",
            "loc_email": "surya@gmail.com"
        }
    ],
    "ram": [
        {
            "cus_id": "3",
            "name": "ram",
            "loc_name": "tnager",
            "loc_phone": "45654345",
            "loc_email": "ram@gmail.com"
        }
    ],
    "Sam": [
        {
            "cus_id": "4",
            "name": "Sam",
            "loc_name": "chrompet",
            "loc_phone": "234545634",
            "loc_email": "sam@gmail.com"
        },
        {
            "cus_id": "4",
            "name": "Sam",
            "loc_name": "mount",
            "loc_phone": "234545634",
            "loc_email": "sam@gmail.com"
        },
        {
            "cus_id": "4",
            "name": "Sam",
            "loc_name": "adambakkam",
            "loc_phone": "45654345",
            "loc_email": "sam@gmail.com"
        }
    ]
}

這就是我在 react js 中獲取數據並存儲在數組中的方式

    componentDidMount(){
    let formData = new FormData();
    formData.append("f_SearchWord", "null");
    const url = "http://localhost/cusPHP/dashAllCustomer.php";
    const config = {
      headers: { "content-type": "multipart/form-data" },
    };
    axios.post(url, formData, config).then((result) => { 
     this.setState({jData: result.data})   
    });

  }

這是我在網頁上尋找的 output，一個客戶名稱，多個電話，email，位置在一個 div，下一個客戶在下一個 div。

這是反應頁面代碼

<div className="commodities">
                <div className="grid-x">
                  <div className="cell large-12">
                    <h2>Customers</h2>
                     
                  </div>
                </div>
                <div className="grid-x small-up-12">

                { 
                     


                 //loop the data
                  
                }
                  <div className="cell">
                    <div className="callout">
                      <div className="grid-x">
                        <div className="cell large-3">
                          <h3>name</h3>
                        </div>
                        <div className="cell large-9">
                          <div className="table-break">
                            <div className="grid-x">
                              <div className="cell medium-4">
                                <div className="grid-x">
                                  <div className="cell large-12">
                                    <span>location name</span>
                                  </div>
                                </div>
                              </div>
                              <div className="cell medium-3">
                                <span>Phone Number</span>
                              </div>
                              <div className="cell medium-3">
                                <span>Email Address</span>
                              </div>
                              <div className="cell medium-2">
                                <input
                                  type="button"
                                  className="label label-button float-right"
                                  value="Edit"
                                  onClick={this.EdittogglePopup}
                                />
                              </div>
                            </div>
                          </div>
                          <div className="table-break">
                            <div className="grid-x">
                              <div className="cell medium-4">
                                <div className="grid-x">
                                  <div className="cell large-12">
                                    <span>location name</span>
                                  </div>
                                </div>
                              </div>
                              <div className="cell medium-3">
                                <span>Phone Number</span>
                              </div>
                              <div className="cell medium-3">
                                <span>Email Address</span>
                              </div>
                              <div className="cell medium-2">
                                <input
                                  type="button"
                                  className="label label-button float-right"
                                  value="Edit"
                                  onClick={this.EdittogglePopup}
                                />
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

誰能幫我這個？

Answer 1

您可以像這樣遍歷它們：

{Object.keys(jData).map(key => (
    <>
        {jData[key].map(data => (
            <div className="cell large-3">
                <h3>{data.name}</h3>
            </div>
        )}
    </>
))}

Answer 2

您正在嘗試迭代 object。 因此，您不能直接使用“地圖”作為選項。 您可以嘗試如下迭代：

 var jData = { "selva": [{ "cus_id": "1", "name": "selva", "loc_name": "chennai", "loc_phone": "986478393", "loc_email": "selva@gmail.com" }, { "cus_id": "1", "name": "selva", "loc_name": "Trichy", "loc_phone": "123456789", "loc_email": "surya@gmail.com" } ], "ram": [{ "cus_id": "3", "name": "ram", "loc_name": "tnager", "loc_phone": "45654345", "loc_email": "ram@gmail.com" }], "Sam": [{ "cus_id": "4", "name": "Sam", "loc_name": "chrompet", "loc_phone": "234545634", "loc_email": "sam@gmail.com" }, { "cus_id": "4", "name": "Sam", "loc_name": "mount", "loc_phone": "234545634", "loc_email": "sam@gmail.com" }, { "cus_id": "4", "name": "Sam", "loc_name": "adambakkam", "loc_phone": "45654345", "loc_email": "sam@gmail.com" } ] }; Object.keys(jData).map(val => { jData[val].map(cusData => { //Print your data here console.log(cusData['loc_name']); console.log(cusData['loc_phone']); }); });

這是迭代您的 object 的想法。 但請確保您的 json 不會太大。 否則它會影響你的表現，然后你可能不得不尋找替代方法來打印你的數據。

Answer 3

給你 go

export default function DetailTable({data}) {

  return (
      <div className="grid-x small-up-12">
        <BuildDetailTable data={data} />
      </div>
    );
}

const BuildDetailTable = ({ data }) => {
  const result = [];
  for (const [key, value] of Object.entries(data)) {
    result.push(
      <div className="cell">
        <div className="callout">
          <div className="grid-x">
            <div className="cell large-3">
              <h3>{key}</h3>
              <BuildDetailRow data={value} />
            </div>
          </div>
        </div>
      </div>
    );
  }
  return result;
};

const BuildDetailRow = ({ data }) => {
  const result = [];
  for (const item of data) {
    result.push(
      <div className="cell large-9">
        <div className="table-break">
          <div className="grid-x">
            <div className="cell medium-4">
              <div className="grid-x">
                <div className="cell large-12">
                  <span>Name: {item.loc_name}</span>
                </div>
              </div>
            </div>
            <div className="cell medium-3">
              <span>Phone: {item.loc_phone}</span>
            </div>
            <div className="cell medium-3">
              <span>Email: {item.loc_email}</span>
            </div>
            <div className="cell medium-2">
              <input
                type="button"
                className="label label-button float-right"
                value="Edit"
              />
            </div>
          </div>
        </div>
      </div>
    );
  }

  return result;
};

您是否將 api 數據傳遞給DetailTable組件，它將呈現所需的結果

<DetailTable data={data from api}/>