如何从 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}/>