React(Json)で、入れ子のデータを扱うには、data.map((value) => と書くと、for(let d in data) のような処理ができる。
main.rs
#[derive(Serialize, Deserialize, Debug, Clone)] struct Name { first : String, last: String, } #[tokio::main] async fn main() { let mut names : Vec<Name> = Vec::new(); let n1 = Name { first:"taro".to_string(), last:"yamata".to_string()}; let n2 = Name { first:"hajime".to_string(), last:"tanaka".to_string()}; let n3 = Name { first:"hanako".to_string(), last:"yoshida".to_string()}; names.push(n1); names.push(n2); names.push(n3); println!("{:?}", names); let serialized: Vec<u8> = serde_json::to_vec(&names).unwrap(); println!("{:?}", serialized); let file_path = format!("./data/data.txt"); let mut file = File::create(file_path.clone()).unwrap(); file.write_all(&serialized).expect("write failed"); }
data.txt
[{"first":"taro","last":"yamata"},{"first":"hajime","last":"tanaka"},{"first":"hanako","last":"yoshida"}]
App.js
import React, {Component} from 'react'; import './App.css'; class App extends Component { render() { return <div className="App"> <h1>React</h1> <Blocks /> </div>; } } class Blocks extends React.Component { constructor(props) { super(props); this.state = { data: null, }; } componentDidMount() { this.timer = setInterval( () => fetch('./data/data.text').then(response => { return response.json(); }).then(json => { this.setState({ data: json}); }), 2000, ); } componentWillUnmount() { clearInterval(this.timer); } render() { if (this.state.data) { return <div> {this.state.data.map((value) => ( <p>名前:{value.first} {value.last}</p> ))} </div> } else { return <div>Loading...</div> } } } export default App;
これを少し応用したい。