CODEWITHSUNDEEP
javascriptarraysjson
Zlatka Pijeva
Zlatka Pijeva

Reputation: 71

How to get data from API in JSON format on ReactJS and Fill dropdown

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

Answers (1)

Ray
Ray

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

Related Questions