[英]How to display JSON data inside render as table in React
我正在使用一个 API,它返回各种不同键值对的 JSON。 我试图在render()
中将它们显示为 2 列、键和值的表,其中分别包含对象键和值。
fetchBasicDetails()
的 API 是 POST,它以默认的 this.state 值作为输入并返回 JSON 输出。setState
方法将 JSON 输出对象存储到this.state 的birth_details属性。forEach
和 Object.keys 在<table>
标签中显示对象数据,这根本不显示任何内容。任何帮助表示赞赏。 谢谢你。
export default class HoroscopeReport extends React.Component {
constructor(props) {
super(props);
this.state = {
day: 11,
month: 2,
year: 2019,
hours: 12,
minutes: 59,
tzone: 5.5,
lat: 19.22,
lon: 25.2,
birth_details:{}
};
}
handleSubmit = event => {
event.preventDefault();
//console.log("Received user submitted data"+JSON.stringify(this.state))
this.fetchBasicDetails();
};
fetchBasicDetails() {
let myHeaders = new Headers();
myHeaders.append("Content-Type", "application/x-www-form-urlencoded");
myHeaders.append("Authorization", "Basic XXXXXXXXXXXXXXX");
let urlencoded = new URLSearchParams();
urlencoded.append("day", this.state.day);
urlencoded.append("month", this.state.month);
urlencoded.append("year", this.state.year);
urlencoded.append("hour", this.state.hours);
urlencoded.append("min", this.state.minutes);
urlencoded.append("lat", this.state.lat);
urlencoded.append("lon", this.state.lon);
urlencoded.append("tzone", this.state.tzone);
let requestOptions = {
method: 'POST',
headers: myHeaders,
body: urlencoded,
redirect: 'follow'
};
fetch("https://json.astrologyapi.com/v1/birth_details", requestOptions)
.then(response => response.text())
.then(result => {
this.setState({ birth_details: result });
})
.catch(error => console.log('error', error));
}
render() {
return (
<div>
{/* FORM SUBMITTION CODE HERE */}
<h2>Output:-</h2>
<table border={2} cellPadding={5}>
<thead>
<tr>
<td>Key</td>
<td>Value</td>
</tr>
</thead>
<tbody>
Object.keys(this.birth_details).forEach(function (element) {
return <tr><td>element</td><td>this.birth_details[element]</td></tr>;
});
</tbody>
</table>
</div>
);
}
}
作为参考,这是 JSON 的输出:-
{"year":2019,"month":2,"day":11,"hour":12,"minute":59,"latitude":19.22,"longitude":25.2,"timezone":5.5,"gender":" ","name":" ","seconds":0,"ayanamsha":24.124044280610406,"sunrise":"10:19:50","sunset":"21:47:13"}
通常在 React 中渲染基于数组的元素是使用map()
而不是forEach()
。 原因是使用map()
您可以在迭代的同时操作每个元素并为render
方法返回完全适合的JSX语法。 同时forEach()
不返回任何内容,只返回undefined
。
我想您可以尝试以下操作:
render() {
return (
<div>
<h2>Output:-</h2>
<table border={2} cellPadding={5}>
<thead>
<tr>
<td>Key</td>
<td>Value</td>
</tr>
</thead>
<tbody>
{
this.state.birth_details &&
Object.keys(this.state.birth_details).map(function (element) {
return <tr>
<td>{element}</td>
<td>{this.state.birth_details[element]}</td>
</tr>;
});
}
</tbody>
</table>
</div>
);
}
我希望这有帮助!
请记住,您需要在 JSX 中使用花括号来表示您想要呈现值,而不是按原样呈现代码。
您还需要使用map
而不是forEach
。 map
用于将数组转换为其他内容(我们正在获取字符串列表并将它们映射到 React 元素),而forEach
用于仅对每个元素执行某些操作而不返回任何内容。
此外,您可能指的是this.state.birth_details
而不是this.birth_details
>
<tbody>
{
Object.keys(this.state.birth_details).map(function (element) {
return (
<tr key={element}>
<td>{element}</td>
<td>{this.state.birth_details[element]}</td>
</tr>
);
})
}
</tbody>
我还在返回的元素上设置了key
。 在此处阅读有关 React 中列表和键的更多信息。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.