我无法显示JSON中的数据。
我的JSON数据如下:
data1 = [
{
id:'1',
name: 'one',
on: [
{
id:'1.1',
type: 'Anna',
},
{
id:'1.2',
type: 'John',
},
],
},
{
id:'2',
name: 'two',
on: [
{
id:'1.1',
type: 'John',
},
{
id:'1.2',
type: 'Anna',
},
],
},
]
我正在通过axios从本地API获取JSON。这种方法在其他表中效果很好。使用此JSON,我尝试过这种方式:
getData = () => {
axios
.get("Localhost", { params : {token : this.state.token }})
.then(response =>
response.data.map(data1 => ({
id: `${data1.id}`,
name: `${data1.name}`,
onid: `${data1.on.id}`,
ontype: `${data1.on.type}`,
}))
)
.then(data1 => {
this.setState({ data1 });
})
}
然后在渲染中我尝试将其映射:
<ol>
{data1.map(user => {
const { id, name } = user;
return (
<li key={id}>
{name}
{data1.on.map(user2 => {
const { onid, ontype } = user2;
return <li key={onid}> {ontype}</li>;
})}
</li>
);
})}
</ol>
但是data1.on的地图不起作用
我希望数据会像这样:
我应该怎么做?
答案 0 :(得分:2)
我认为您只需要重新整理地图即可。尝试这样的事情:
<ol>
{this.state.data1.map(item => {
return (
<li>
{item.name.toUpperCase()}
<ol>
{item.on.map(person => {
return <li>{person.type}</li>;
})}
</ol>
</li>
);
})}
</ol>
);
答案 1 :(得分:0)
尝试像这样通过JSON映射:
<ol>
{data1.map(user => {
const { id, name, on } = user;
return (
<li key={id}>
{name}
<ol>
{on.map(elem => {
const { id, type } = elem;
return <li key={id}>{type}</li>;
})}
</ol>
</li>
);
})}
</ol>