Reputation: 71
I'm very new in the client area and I want to ask how it is right to get data from the API. I made an API in the JSON format on MVC.ASP.NET and now I want to take two things from the API.
The first is the station numbers and their names (it will attach a screenshot) I want to take Station and NameStation on this point and and fill my dropdown with this data.
[Screen on API for Station and StationName][1]
I'm not sure if what I started doing is right.
The next data point of my API is weatherData: (Date, Temp, Rain, WindSpeed, Snow, Apress).
[API for Weather Data][2]
I just want to keep all this data in an array and then initialize them in the reaction graph, but for now I just want to keep them in an array.
Is it an example of how I can get the station data and fill my dropdown.
My code:
import React, { Component } from 'react';
import Select from 'react-select';
import 'react-select/dist/react-select.css';
export default class Weather extends Component {
constructor(props) {
super(props);
this.state = {
options: [
{ value: true, label: 'Yes' },
{ value: false, label: 'No' }
], stations: [],
value: null
}
this.onChange = this.onChange.bind(this);
}
onChange(event) {
this.setState({ value: event.value });
console.log('Boolean Select value changed to', event.value);
}
componentDidMount() {
this.getStations();
}
getStations() {
fetch('http://localhost:56348/api/stations', {
method: "GET"
}).then(res => res.json())
.then(res => this.setState({ stations: res.stations }))
//.catch(e => )
}
render() {
return (
<div className="MasterSection">
<div className="wrapper">
<div className="section">Изберете № на станция</div>
<Select
onChange={this.onChange}
options={this.state.stations}
stations={this.state.value}
value={this.state.value}
clearable={false}
/>
</div>
<div class="section">
<input type="text" class="form-control" placeholder="Брой дни назад" aria-label="Username" aria-describedby="basic-addon1"></input>
</div>
<div class="section">
<button type="button" class="btn btn-outline-dark">Покажи</button>
</div>
</div>
);
}
}
And my dropdown is empty :(
Upvotes: 1
Views: 1966
Reputation: 9684
I have a couple of notes.
1- It's common practice to write your class with a capital letter and not small.
2- You have a couple of mistakes (to be precise: duplications) in your class.
3- You can use the fetch function to get data from an API.
4- Also please note that react-native
and reactJs
are completely different. React Native is used to build native mobile apps on Android & iOS.
Example using fetch
export default class Weather extends React.Component {
constructor(props) {
super(props);
this.state = {
stations: [],
options: [
{ value: true, label: 'Yes' },
{ value: false, label: 'No' }
],
value: null
};
}
componentDidMount() {
this.getStations();
}
getStations() {
fetch('API URL', {
method: "GET" // POST
}).then(res => res.json())
.then(res => this.setState({stations: res.stations}))
.catch(e => /* catch any errors here */)
}
render() {
return(
<View></View>
)
}
}
Upvotes: 1