javascript - How to loop through nested objects in reactjs?
问题描述
Since this in an object i doing this but it doesn't work. How would I get the 'key' field through a loop?
<div>
<ul>
{tickets && tickets.issues && Object.keys(tickets.issues).map((issue, i) =>
(
<li key={i}>
Issue number: {tickets.issues.key}
</li>
))}
</ul>
</div>
SOLUTION
<div>
<ul>
{this.state.tickets && this.state.tickets.issues && Object.keys(this.state.tickets.issues).map((issue, i) =>
(
<li key={i}>
Issue number: {this.state.tickets.issues[i].key}
</li>
))}
</ul>
</div>
解决方案
Looking at your response image the key field exists in issues[] but not in fields, so it should be fine just (no nesting required):
{ Object.keys(tickets.issues).map((issue, i) => (
<li key={issue.key}>
Issue number: {issue.key}
</li>
))}
If you have the key in fields (not expanded in the image)
{ Object.keys(tickets.issues).map((issue, i) => (
Object.keys(issue.fields).map(field=>(
<li key={field.key}>
Issue number: { field.key }
</li>
)
))}
推荐阅读
- javascript - JavaScript:将没有时区的时间戳转换为毫秒
- github - Angular 7 项目未在 Github 上发布 - 仅显示自述文件(我使用过 GitHub Pages)
- javascript - 使用节点流将 JSON 附加到文件
- javascript - 如何将 XML 文件中的转义 unicode 字符读入 Javascript?
- java - 我想使用 3 args 命令应该是这样的:/event pop on
- python - Pandas.apply 在 spacy doc 列上返回无值
- reactjs - 如何让屏幕阅读器在滚动后开始阅读网页内容
- dockerfile - Docker 错误:入口点权限被拒绝
- typescript - 使用 TypeScript 和 fp-ts 进行类型建模以及使用 Either 时出现错误
- reactjs - React、Typescript 和 Webpack 将 bundle.js 添加到页面的问题