我有一个JSON文件,其中没有用于其中每个对象的id值的键。 我不知道如何在没有ID的键名的情况下访问每个值。
如何在React中为这些值添加键名?还是有另一种访问方式? 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;
答案 0 :(得分:1)
您可以使用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>