我是反應 js 的新手，我試圖從資料庫中獲取資料并將其顯示在網頁上。使用 Axios 成功從 DB 獲取資料作為 JSON，但我不知道如何在陣列內回圈物件。我嘗試使用 map 函式但它不起作用，因為回應在單個陣列中有多個物件。誰能幫我解決這個問題？
這是我的 json
{
"selva": [
{
"cus_id": "1",
"name": "selva",
"loc_name": "chennai",
"loc_phone": "986478393",
"loc_email": "[email protected]"
},
{
"cus_id": "1",
"name": "selva",
"loc_name": "Trichy",
"loc_phone": "123456789",
"loc_email": "[email protected]"
}
],
"ram": [
{
"cus_id": "3",
"name": "ram",
"loc_name": "tnager",
"loc_phone": "45654345",
"loc_email": "[email protected]"
}
],
"Sam": [
{
"cus_id": "4",
"name": "Sam",
"loc_name": "chrompet",
"loc_phone": "234545634",
"loc_email": "[email protected]"
},
{
"cus_id": "4",
"name": "Sam",
"loc_name": "mount",
"loc_phone": "234545634",
"loc_email": "[email protected]"
},
{
"cus_id": "4",
"name": "Sam",
"loc_name": "adambakkam",
"loc_phone": "45654345",
"loc_email": "[email protected]"
}
]
}
這就是我在 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>
誰能幫我這個？
uj5u.com熱心網友回復：
你可以像這樣回圈它們：
{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>
))}
</>
))}
uj5u.com熱心網友回復：
您正在嘗試迭代一個物件。因此，您不能直接使用“地圖”作為選項。您可以嘗試如下迭代：
var jData = {
"selva": [{
"cus_id": "1",
"name": "selva",
"loc_name": "chennai",
"loc_phone": "986478393",
"loc_email": "[email protected]"
},
{
"cus_id": "1",
"name": "selva",
"loc_name": "Trichy",
"loc_phone": "123456789",
"loc_email": "[email protected]"
}
],
"ram": [{
"cus_id": "3",
"name": "ram",
"loc_name": "tnager",
"loc_phone": "45654345",
"loc_email": "[email protected]"
}],
"Sam": [{
"cus_id": "4",
"name": "Sam",
"loc_name": "chrompet",
"loc_phone": "234545634",
"loc_email": "[email protected]"
},
{
"cus_id": "4",
"name": "Sam",
"loc_name": "mount",
"loc_phone": "234545634",
"loc_email": "[email protected]"
},
{
"cus_id": "4",
"name": "Sam",
"loc_name": "adambakkam",
"loc_phone": "45654345",
"loc_email": "[email protected]"
}
]
};
Object.keys(jData).map(val => {
jData[val].map(cusData => {
//Print your data here
console.log(cusData['loc_name']);
console.log(cusData['loc_phone']);
});
});這是迭代物件的想法。但是請確保您的 json 不會太大。否則它會影響您的性能，然后您可能必須找到列印資料的替代方法。
uj5u.com熱心網友回復：
干得好
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}/>
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/400046.html
標籤：javascript 反应 json 循环 foreach