How to fetch data from API based on params in the URL
I'm building an app in React Native fetching data from an API.
The API data is information about flights departures/arrivals.
What I'm trying to do is very simple, I want that the app has 2 tabs which switch screens between Arrivals and Departure. The 2 screens will show all the flights departures or arrivals.
At the moment I did the app only to show the departures flights and getting data from the URL like URL/flights/departures
. What I cannot understand as I'm new in Native is how can I fetch data based on the URL params. What I mean is that I have the API URL and I would like to fetch the data if it is departures or arrivals adding to the URL like API/flights/flightType
so when a screen changes the correct data is fetched. What I did for now is below but only for departures and I would like to understand how to change it to do as I need.
import axios from 'axios';
import apiBaseURL from "../Utils/Constants";
import
FETCHING_FLIGHTS_DATA
,FETCHING_FLIGHTS_DATA_SUCCESS,
FETCHING_FLIGHTS_DATA_FAIL
from "../Utils/ActionTypes";
export default function FetchFlightData()
return dispatch =>
dispatch( type: FETCHING_FLIGHTS_DATA);
return axios.get(`$apiBaseURL/departures`)
.then(res =>
dispatch( type: FETCHING_FLIGHTS_DATA_SUCCESS, payload: res.data)
)
.catch(err =>
dispatch( type: FETCHING_FLIGHTS_DATA_FAIL, payload: err.data)
)
react-native react-redux axios
add a comment |
I'm building an app in React Native fetching data from an API.
The API data is information about flights departures/arrivals.
What I'm trying to do is very simple, I want that the app has 2 tabs which switch screens between Arrivals and Departure. The 2 screens will show all the flights departures or arrivals.
At the moment I did the app only to show the departures flights and getting data from the URL like URL/flights/departures
. What I cannot understand as I'm new in Native is how can I fetch data based on the URL params. What I mean is that I have the API URL and I would like to fetch the data if it is departures or arrivals adding to the URL like API/flights/flightType
so when a screen changes the correct data is fetched. What I did for now is below but only for departures and I would like to understand how to change it to do as I need.
import axios from 'axios';
import apiBaseURL from "../Utils/Constants";
import
FETCHING_FLIGHTS_DATA
,FETCHING_FLIGHTS_DATA_SUCCESS,
FETCHING_FLIGHTS_DATA_FAIL
from "../Utils/ActionTypes";
export default function FetchFlightData()
return dispatch =>
dispatch( type: FETCHING_FLIGHTS_DATA);
return axios.get(`$apiBaseURL/departures`)
.then(res =>
dispatch( type: FETCHING_FLIGHTS_DATA_SUCCESS, payload: res.data)
)
.catch(err =>
dispatch( type: FETCHING_FLIGHTS_DATA_FAIL, payload: err.data)
)
react-native react-redux axios
What exactly do you want to aceive? Are you getting the expected response from the api endpoint? You want to render the flights? what?
– Shivam
Nov 14 '18 at 18:52
@Shivam I want to fetch flights data from this two endpoints URL/flights/departures and URL/flights/arrivals when I switch screen pressing the tab. To be clear when I press the tab for departures I should fetch departures and when press arrivals fetch for arrivals. So what I need is how to add params to the URL to fetch data based on flights type.
– Jakub
Nov 14 '18 at 19:04
add a comment |
I'm building an app in React Native fetching data from an API.
The API data is information about flights departures/arrivals.
What I'm trying to do is very simple, I want that the app has 2 tabs which switch screens between Arrivals and Departure. The 2 screens will show all the flights departures or arrivals.
At the moment I did the app only to show the departures flights and getting data from the URL like URL/flights/departures
. What I cannot understand as I'm new in Native is how can I fetch data based on the URL params. What I mean is that I have the API URL and I would like to fetch the data if it is departures or arrivals adding to the URL like API/flights/flightType
so when a screen changes the correct data is fetched. What I did for now is below but only for departures and I would like to understand how to change it to do as I need.
import axios from 'axios';
import apiBaseURL from "../Utils/Constants";
import
FETCHING_FLIGHTS_DATA
,FETCHING_FLIGHTS_DATA_SUCCESS,
FETCHING_FLIGHTS_DATA_FAIL
from "../Utils/ActionTypes";
export default function FetchFlightData()
return dispatch =>
dispatch( type: FETCHING_FLIGHTS_DATA);
return axios.get(`$apiBaseURL/departures`)
.then(res =>
dispatch( type: FETCHING_FLIGHTS_DATA_SUCCESS, payload: res.data)
)
.catch(err =>
dispatch( type: FETCHING_FLIGHTS_DATA_FAIL, payload: err.data)
)
react-native react-redux axios
I'm building an app in React Native fetching data from an API.
The API data is information about flights departures/arrivals.
What I'm trying to do is very simple, I want that the app has 2 tabs which switch screens between Arrivals and Departure. The 2 screens will show all the flights departures or arrivals.
At the moment I did the app only to show the departures flights and getting data from the URL like URL/flights/departures
. What I cannot understand as I'm new in Native is how can I fetch data based on the URL params. What I mean is that I have the API URL and I would like to fetch the data if it is departures or arrivals adding to the URL like API/flights/flightType
so when a screen changes the correct data is fetched. What I did for now is below but only for departures and I would like to understand how to change it to do as I need.
import axios from 'axios';
import apiBaseURL from "../Utils/Constants";
import
FETCHING_FLIGHTS_DATA
,FETCHING_FLIGHTS_DATA_SUCCESS,
FETCHING_FLIGHTS_DATA_FAIL
from "../Utils/ActionTypes";
export default function FetchFlightData()
return dispatch =>
dispatch( type: FETCHING_FLIGHTS_DATA);
return axios.get(`$apiBaseURL/departures`)
.then(res =>
dispatch( type: FETCHING_FLIGHTS_DATA_SUCCESS, payload: res.data)
)
.catch(err =>
dispatch( type: FETCHING_FLIGHTS_DATA_FAIL, payload: err.data)
)
react-native react-redux axios
react-native react-redux axios
asked Nov 14 '18 at 18:39
JakubJakub
2331518
2331518
What exactly do you want to aceive? Are you getting the expected response from the api endpoint? You want to render the flights? what?
– Shivam
Nov 14 '18 at 18:52
@Shivam I want to fetch flights data from this two endpoints URL/flights/departures and URL/flights/arrivals when I switch screen pressing the tab. To be clear when I press the tab for departures I should fetch departures and when press arrivals fetch for arrivals. So what I need is how to add params to the URL to fetch data based on flights type.
– Jakub
Nov 14 '18 at 19:04
add a comment |
What exactly do you want to aceive? Are you getting the expected response from the api endpoint? You want to render the flights? what?
– Shivam
Nov 14 '18 at 18:52
@Shivam I want to fetch flights data from this two endpoints URL/flights/departures and URL/flights/arrivals when I switch screen pressing the tab. To be clear when I press the tab for departures I should fetch departures and when press arrivals fetch for arrivals. So what I need is how to add params to the URL to fetch data based on flights type.
– Jakub
Nov 14 '18 at 19:04
What exactly do you want to aceive? Are you getting the expected response from the api endpoint? You want to render the flights? what?
– Shivam
Nov 14 '18 at 18:52
What exactly do you want to aceive? Are you getting the expected response from the api endpoint? You want to render the flights? what?
– Shivam
Nov 14 '18 at 18:52
@Shivam I want to fetch flights data from this two endpoints URL/flights/departures and URL/flights/arrivals when I switch screen pressing the tab. To be clear when I press the tab for departures I should fetch departures and when press arrivals fetch for arrivals. So what I need is how to add params to the URL to fetch data based on flights type.
– Jakub
Nov 14 '18 at 19:04
@Shivam I want to fetch flights data from this two endpoints URL/flights/departures and URL/flights/arrivals when I switch screen pressing the tab. To be clear when I press the tab for departures I should fetch departures and when press arrivals fetch for arrivals. So what I need is how to add params to the URL to fetch data based on flights type.
– Jakub
Nov 14 '18 at 19:04
add a comment |
1 Answer
1
active
oldest
votes
You can pass the flight type as a parameter to your function and when switching the tab call the FetchFlightData
with the right type. You probably should separate the fetch success for each type or add the flight type as a parameter to your payload and then in the reducer make the difference between data of departures or data of arrivals
import axios from 'axios';
import apiBaseURL from "../Utils/Constants";
import
FETCHING_FLIGHTS_DATA,
FETCHING_FLIGHTS_DATA_SUCCESS,
FETCHING_FLIGHTS_DATA_FAIL
from "../Utils/ActionTypes";
export default function FetchFlightData(flightType)
return dispatch =>
dispatch( type: FETCHING_FLIGHTS_DATA);
return axios.get(`$apiBaseURL/$flightType`)
.then(res =>
dispatch( type: FETCHING_FLIGHTS_DATA_SUCCESS, payload: data:res.data,type:flightType)
)
.catch(err =>
dispatch( type: FETCHING_FLIGHTS_DATA_FAIL, payload: err.data)
)
//somewhere in the reducer
case FETCHING_FLIGHTS_DATA_SUCCESS:
return
...state,
arrivals: action.payload.type === 'arrival' ? action.payload.data: state.arrivals,
departures: action.payload.type === 'departures' ? action.payload.data:state.departures
break;
// somewhere in your code when you detect a change of tab
FetchFlightData('arrivals');
FetchFlightData('departures');
I did the changes but get this error: TypeError: TypeError: TypeError: undefined is not a function (near '...flight.data.map...') here pastebin.com/gtR1brsQ
– Jakub
Nov 14 '18 at 19:59
Maybe the issue is in my reducer pastebin.com/B4ejBJ8e
– Jakub
Nov 14 '18 at 20:23
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53306790%2fhow-to-fetch-data-from-api-based-on-params-in-the-url%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You can pass the flight type as a parameter to your function and when switching the tab call the FetchFlightData
with the right type. You probably should separate the fetch success for each type or add the flight type as a parameter to your payload and then in the reducer make the difference between data of departures or data of arrivals
import axios from 'axios';
import apiBaseURL from "../Utils/Constants";
import
FETCHING_FLIGHTS_DATA,
FETCHING_FLIGHTS_DATA_SUCCESS,
FETCHING_FLIGHTS_DATA_FAIL
from "../Utils/ActionTypes";
export default function FetchFlightData(flightType)
return dispatch =>
dispatch( type: FETCHING_FLIGHTS_DATA);
return axios.get(`$apiBaseURL/$flightType`)
.then(res =>
dispatch( type: FETCHING_FLIGHTS_DATA_SUCCESS, payload: data:res.data,type:flightType)
)
.catch(err =>
dispatch( type: FETCHING_FLIGHTS_DATA_FAIL, payload: err.data)
)
//somewhere in the reducer
case FETCHING_FLIGHTS_DATA_SUCCESS:
return
...state,
arrivals: action.payload.type === 'arrival' ? action.payload.data: state.arrivals,
departures: action.payload.type === 'departures' ? action.payload.data:state.departures
break;
// somewhere in your code when you detect a change of tab
FetchFlightData('arrivals');
FetchFlightData('departures');
I did the changes but get this error: TypeError: TypeError: TypeError: undefined is not a function (near '...flight.data.map...') here pastebin.com/gtR1brsQ
– Jakub
Nov 14 '18 at 19:59
Maybe the issue is in my reducer pastebin.com/B4ejBJ8e
– Jakub
Nov 14 '18 at 20:23
add a comment |
You can pass the flight type as a parameter to your function and when switching the tab call the FetchFlightData
with the right type. You probably should separate the fetch success for each type or add the flight type as a parameter to your payload and then in the reducer make the difference between data of departures or data of arrivals
import axios from 'axios';
import apiBaseURL from "../Utils/Constants";
import
FETCHING_FLIGHTS_DATA,
FETCHING_FLIGHTS_DATA_SUCCESS,
FETCHING_FLIGHTS_DATA_FAIL
from "../Utils/ActionTypes";
export default function FetchFlightData(flightType)
return dispatch =>
dispatch( type: FETCHING_FLIGHTS_DATA);
return axios.get(`$apiBaseURL/$flightType`)
.then(res =>
dispatch( type: FETCHING_FLIGHTS_DATA_SUCCESS, payload: data:res.data,type:flightType)
)
.catch(err =>
dispatch( type: FETCHING_FLIGHTS_DATA_FAIL, payload: err.data)
)
//somewhere in the reducer
case FETCHING_FLIGHTS_DATA_SUCCESS:
return
...state,
arrivals: action.payload.type === 'arrival' ? action.payload.data: state.arrivals,
departures: action.payload.type === 'departures' ? action.payload.data:state.departures
break;
// somewhere in your code when you detect a change of tab
FetchFlightData('arrivals');
FetchFlightData('departures');
I did the changes but get this error: TypeError: TypeError: TypeError: undefined is not a function (near '...flight.data.map...') here pastebin.com/gtR1brsQ
– Jakub
Nov 14 '18 at 19:59
Maybe the issue is in my reducer pastebin.com/B4ejBJ8e
– Jakub
Nov 14 '18 at 20:23
add a comment |
You can pass the flight type as a parameter to your function and when switching the tab call the FetchFlightData
with the right type. You probably should separate the fetch success for each type or add the flight type as a parameter to your payload and then in the reducer make the difference between data of departures or data of arrivals
import axios from 'axios';
import apiBaseURL from "../Utils/Constants";
import
FETCHING_FLIGHTS_DATA,
FETCHING_FLIGHTS_DATA_SUCCESS,
FETCHING_FLIGHTS_DATA_FAIL
from "../Utils/ActionTypes";
export default function FetchFlightData(flightType)
return dispatch =>
dispatch( type: FETCHING_FLIGHTS_DATA);
return axios.get(`$apiBaseURL/$flightType`)
.then(res =>
dispatch( type: FETCHING_FLIGHTS_DATA_SUCCESS, payload: data:res.data,type:flightType)
)
.catch(err =>
dispatch( type: FETCHING_FLIGHTS_DATA_FAIL, payload: err.data)
)
//somewhere in the reducer
case FETCHING_FLIGHTS_DATA_SUCCESS:
return
...state,
arrivals: action.payload.type === 'arrival' ? action.payload.data: state.arrivals,
departures: action.payload.type === 'departures' ? action.payload.data:state.departures
break;
// somewhere in your code when you detect a change of tab
FetchFlightData('arrivals');
FetchFlightData('departures');
You can pass the flight type as a parameter to your function and when switching the tab call the FetchFlightData
with the right type. You probably should separate the fetch success for each type or add the flight type as a parameter to your payload and then in the reducer make the difference between data of departures or data of arrivals
import axios from 'axios';
import apiBaseURL from "../Utils/Constants";
import
FETCHING_FLIGHTS_DATA,
FETCHING_FLIGHTS_DATA_SUCCESS,
FETCHING_FLIGHTS_DATA_FAIL
from "../Utils/ActionTypes";
export default function FetchFlightData(flightType)
return dispatch =>
dispatch( type: FETCHING_FLIGHTS_DATA);
return axios.get(`$apiBaseURL/$flightType`)
.then(res =>
dispatch( type: FETCHING_FLIGHTS_DATA_SUCCESS, payload: data:res.data,type:flightType)
)
.catch(err =>
dispatch( type: FETCHING_FLIGHTS_DATA_FAIL, payload: err.data)
)
//somewhere in the reducer
case FETCHING_FLIGHTS_DATA_SUCCESS:
return
...state,
arrivals: action.payload.type === 'arrival' ? action.payload.data: state.arrivals,
departures: action.payload.type === 'departures' ? action.payload.data:state.departures
break;
// somewhere in your code when you detect a change of tab
FetchFlightData('arrivals');
FetchFlightData('departures');
answered Nov 14 '18 at 19:18
LHIOUILHIOUI
2,24511629
2,24511629
I did the changes but get this error: TypeError: TypeError: TypeError: undefined is not a function (near '...flight.data.map...') here pastebin.com/gtR1brsQ
– Jakub
Nov 14 '18 at 19:59
Maybe the issue is in my reducer pastebin.com/B4ejBJ8e
– Jakub
Nov 14 '18 at 20:23
add a comment |
I did the changes but get this error: TypeError: TypeError: TypeError: undefined is not a function (near '...flight.data.map...') here pastebin.com/gtR1brsQ
– Jakub
Nov 14 '18 at 19:59
Maybe the issue is in my reducer pastebin.com/B4ejBJ8e
– Jakub
Nov 14 '18 at 20:23
I did the changes but get this error: TypeError: TypeError: TypeError: undefined is not a function (near '...flight.data.map...') here pastebin.com/gtR1brsQ
– Jakub
Nov 14 '18 at 19:59
I did the changes but get this error: TypeError: TypeError: TypeError: undefined is not a function (near '...flight.data.map...') here pastebin.com/gtR1brsQ
– Jakub
Nov 14 '18 at 19:59
Maybe the issue is in my reducer pastebin.com/B4ejBJ8e
– Jakub
Nov 14 '18 at 20:23
Maybe the issue is in my reducer pastebin.com/B4ejBJ8e
– Jakub
Nov 14 '18 at 20:23
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53306790%2fhow-to-fetch-data-from-api-based-on-params-in-the-url%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
What exactly do you want to aceive? Are you getting the expected response from the api endpoint? You want to render the flights? what?
– Shivam
Nov 14 '18 at 18:52
@Shivam I want to fetch flights data from this two endpoints URL/flights/departures and URL/flights/arrivals when I switch screen pressing the tab. To be clear when I press the tab for departures I should fetch departures and when press arrivals fetch for arrivals. So what I need is how to add params to the URL to fetch data based on flights type.
– Jakub
Nov 14 '18 at 19:04