如何在 react js 中循环遍历来自 axios json 响应的对象数组并将它们设置在 div 中？

Question

我是 React js 的新手，我正在尝试从数据库中获取数据并将其显示在网页上。使用 Axios 成功地从数据库中以 JSON 的形式获取数据，但我不知道如何在数组中循环对象。我尝试使用 map 函数，但它不起作用，因为响应在单个数组中有多个对象。谁能帮我解决这个问题？

这是我的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})   
    });

  }

这是我在网页上寻找的输出，一个客户姓名，多个电话，电子邮件，位置在一个 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

您可以像这样遍历它们：

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

Answer 2

您正在尝试迭代一个对象。因此，您不能直接使用“地图”作为选项。您可以尝试如下迭代：

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']);
  });
});

这是迭代对象的想法。但请确保您的 json 不是太大。否则它会影响你的表现，然后你可能不得不寻找其他方法来打印你的数据。

Answer 3

给你

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}/>

我得到的输出是：

如何在 react js 中循环遍历来自 axios json 响应的对象数组并将它们设置在 div 中？

how to loop throgh array of object from axios json respone in react js and set them in div?

javascript

foreach

json

loops

reactjs