{
"member": [
{
"name": "yusuke",
"age": 30
},
{
"name": "tanaka",
"age": 40
},
{
"name": "sasaki",
"age": 50
}
]
}
// 通常の JavaScript オブジェクトの書き方
export const data = {
member: [
{
name: "yusuke",
age: 30
},
{
name: "tanaka",
age: 40
},
{
name: "sasaki",
age: 50
}
]
};
{
// コメントは使えない
member: [ // key を文字列ではないものにはできない
{
"name": "yusuke",
"age": 30, // トレイリングコンマはダメ
},
{
'name': 'tanaka', // シングルクオーテーションはダメ
'age': 40
},
{
"name": "sasaki",
"age": 50
}
]
}
{
"member": [
{
"name": "nakanishi",
"age": 30
},
{
"name": "tanaka",
"age": 40
},
{
"name": "suzuki",
"age": 50
}
]
}
import axios from "axios";
const url = "https://api.myjson.com/bins/159wqn";
axios.get(url).then(res => {
console.log(res.data);
});
import React from "react";
import { render } from "react-dom";
import axios from "axios";
class App extends React.Component {
constructor() {
super();
this.state = { member: [] };
}
memberList(list) {
const memberList = list.map((member, index) => {
return (
<li>
{member.name} {member.age}
</li>
);
});
return <ul>{memberList}</ul>;
}
render() {
console.log(this.state.member);
return (
<div>
<button onClick={this.getJson}>Get Json</button>
{this.memberList(this.state.member)}
</div>
);
}
getJson = () => {
const url = "https://api.myjson.com/bins/159wqn";
axios.get(url).then(res => {
this.setState(res.data);
});
};
}
render(<App />, document.getElementById("root"));