React:如何映射没有键名的嵌套JSON对象
React:如何映射没有键名的嵌套JSON对象
提问于 2018-08-13 05:00:46
我有一个JSON文件，里面没有每个对象的id-value的键。我不知道如何在没有id的键名的情况下访问每个值。
如何在react中将key-name添加到这些值？还是有其他方法可以访问它们？id的前5个字符总是相同的。
example.json：
{
"-KxhTabcdefgh": {
"name": "Alpha",
"description": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",
"logo": "http://www.example.com/img/08f6.png",
"location": {
"lat": 53.5,
"long": 10.0
}
},
"-KxhTstuvwxyz": {
"name": "Beta",
"description": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",
"logo": "http://www.example.com/img/f782.png",
"location": {
"lat": 53.0,
"long": 10.0
}
},
}app.js：
import React, { Component } from 'react'
import './index.css'
import Example from '../src/components/example/example'
import data from './example.json';
class App extends Component {
constructor(props)
{
super(props);
this.state={
data:[data]
}
};
render() {
return (
<div className = "App">
{this.state.data.map((exam, index) => {
return <Example
name={exam.name}
logo={exam.logo}
description={exam.description}/>
})}
</div>
);
}
}
console.log(data)
export default App;回答 1
Stack Overflow用户
回答已采纳
发布于 2018-08-13 05:07:28
您可以使用Object.keys获取一个包含对象中所有键的数组，然后对这些键使用map。
示例
const data = {
"-KxhTabcdefgh": {
name: "Alpha",
description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",
logo: "http://www.example.com/img/08f6.png",
location: {
lat: 53.5,
long: 10.0
}
},
"-KxhTstuvwxyz": {
name: "Beta",
description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",
logo: "http://www.example.com/img/f782.png",
location: {
lat: 53.0,
long: 10.0
}
}
};
class App extends React.Component {
state = {
data
};
render() {
const { data } = this.state;
return (
<div>
{Object.keys(data).map(key => {
const exam = data[key];
return (
<div key={key}>
<div>{exam.name}</div>
<div>{exam.logo}</div>
<div>{exam.description}</div>
</div>
);
})}
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51812813
复制相关文章
相似问题