Populate my options data with react-select from API?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
0
This doesn't seem to be working when i try to populate my data with the data i fetched from my API. I am currently fetching the data, storing it in my array called ProductsAndAirlines which i instantiated in my constructor, then I am setting the data values dynamically in my options,but currently it doesn't. It only inserts the first static value which is PBS.
Code
getProductsAndAirlines = _ => {
fetch('http://localhost:4000/allProductAndAirlineValuesInJira')
.then(res => res.json())
.then( res =>
this.setState({ ProductsAndAirlines: res.data }
))
.catch(err => console.error(err))
}
componentDidMount() {
this.getAirlines();
this.getProductsAndAirlines();
setTimeout(() => {
this.setState({ show: true });
}, 10);
}
const optionsProduct = [
ProductsAndAirlines && ProductsAndAirlines.projects && Object.keys(ProductsAndAirlines.projects).map((issue, i) => (
ProductsAndAirlines.projects[0].issuetypes[0].fields.customfield_11600.allowedValues && Object.keys(ProductsAndAirlines.projects[0].issuetypes[0].fields.customfield_11600.allowedValues ).map((product, product_index) => (
{value: ProductsAndAirlines.projects[0].issuetypes[0].fields.customfield_11600.allowedValues[product_index].value, label: ProductsAndAirlines.projects[0].issuetypes[0].fields.customfield_11600.allowedValues[product_index].value}
))
))
render(){
<Select
placeholder = {this.state.Product}
onChange={this.handleChangeProduct}
options={optionsProduct()}
/>
}
reactjs api
asked Nov 23 '18 at 19:27
bobb1213131bobb1213131
728
add a comment |
0
This doesn't seem to be working when i try to populate my data with the data i fetched from my API. I am currently fetching the data, storing it in my array called ProductsAndAirlines which i instantiated in my constructor, then I am setting the data values dynamically in my options,but currently it doesn't. It only inserts the first static value which is PBS.
Code
getProductsAndAirlines = _ => {
fetch('http://localhost:4000/allProductAndAirlineValuesInJira')
.then(res => res.json())
.then( res =>
this.setState({ ProductsAndAirlines: res.data }
))
.catch(err => console.error(err))
}
componentDidMount() {
this.getAirlines();
this.getProductsAndAirlines();
setTimeout(() => {
this.setState({ show: true });
}, 10);
}
const optionsProduct = [
ProductsAndAirlines && ProductsAndAirlines.projects && Object.keys(ProductsAndAirlines.projects).map((issue, i) => (
ProductsAndAirlines.projects[0].issuetypes[0].fields.customfield_11600.allowedValues && Object.keys(ProductsAndAirlines.projects[0].issuetypes[0].fields.customfield_11600.allowedValues ).map((product, product_index) => (
{value: ProductsAndAirlines.projects[0].issuetypes[0].fields.customfield_11600.allowedValues[product_index].value, label: ProductsAndAirlines.projects[0].issuetypes[0].fields.customfield_11600.allowedValues[product_index].value}
))
))
render(){
<Select
placeholder = {this.state.Product}
onChange={this.handleChangeProduct}
options={optionsProduct()}
/>
}
reactjs api
asked Nov 23 '18 at 19:27
bobb1213131bobb1213131
728
Can you give us an example of thethis.state.ProductsAndAirlines.projectdata that was returned by your API?
– Shawn Andrews
Nov 23 '18 at 19:56
add a comment |
0
0
0
This doesn't seem to be working when i try to populate my data with the data i fetched from my API. I am currently fetching the data, storing it in my array called ProductsAndAirlines which i instantiated in my constructor, then I am setting the data values dynamically in my options,but currently it doesn't. It only inserts the first static value which is PBS.
Code
getProductsAndAirlines = _ => {
fetch('http://localhost:4000/allProductAndAirlineValuesInJira')
.then(res => res.json())
.then( res =>
this.setState({ ProductsAndAirlines: res.data }
))
.catch(err => console.error(err))
}
componentDidMount() {
this.getAirlines();
this.getProductsAndAirlines();
setTimeout(() => {
this.setState({ show: true });
}, 10);
}
const optionsProduct = [
ProductsAndAirlines && ProductsAndAirlines.projects && Object.keys(ProductsAndAirlines.projects).map((issue, i) => (
ProductsAndAirlines.projects[0].issuetypes[0].fields.customfield_11600.allowedValues && Object.keys(ProductsAndAirlines.projects[0].issuetypes[0].fields.customfield_11600.allowedValues ).map((product, product_index) => (
{value: ProductsAndAirlines.projects[0].issuetypes[0].fields.customfield_11600.allowedValues[product_index].value, label: ProductsAndAirlines.projects[0].issuetypes[0].fields.customfield_11600.allowedValues[product_index].value}
))
))
render(){
<Select
placeholder = {this.state.Product}
onChange={this.handleChangeProduct}
options={optionsProduct()}
/>
}
reactjs api
asked Nov 23 '18 at 19:27
bobb1213131bobb1213131
728
This doesn't seem to be working when i try to populate my data with the data i fetched from my API. I am currently fetching the data, storing it in my array called ProductsAndAirlines which i instantiated in my constructor, then I am setting the data values dynamically in my options,but currently it doesn't. It only inserts the first static value which is PBS.
Code
getProductsAndAirlines = _ => {
fetch('http://localhost:4000/allProductAndAirlineValuesInJira')
.then(res => res.json())
.then( res =>
this.setState({ ProductsAndAirlines: res.data }
))
.catch(err => console.error(err))
}
componentDidMount() {
this.getAirlines();
this.getProductsAndAirlines();
setTimeout(() => {
this.setState({ show: true });
}, 10);
}
const optionsProduct = [
ProductsAndAirlines && ProductsAndAirlines.projects && Object.keys(ProductsAndAirlines.projects).map((issue, i) => (
ProductsAndAirlines.projects[0].issuetypes[0].fields.customfield_11600.allowedValues && Object.keys(ProductsAndAirlines.projects[0].issuetypes[0].fields.customfield_11600.allowedValues ).map((product, product_index) => (
{value: ProductsAndAirlines.projects[0].issuetypes[0].fields.customfield_11600.allowedValues[product_index].value, label: ProductsAndAirlines.projects[0].issuetypes[0].fields.customfield_11600.allowedValues[product_index].value}
))
))
render(){
<Select
placeholder = {this.state.Product}
onChange={this.handleChangeProduct}
options={optionsProduct()}
/>
}
reactjs api
reactjs api
asked Nov 23 '18 at 19:27
bobb1213131bobb1213131
728
asked Nov 23 '18 at 19:27
bobb1213131bobb1213131
728
edited Nov 23 '18 at 20:18
bobb1213131
asked Nov 23 '18 at 19:27
bobb1213131bobb1213131
728
asked Nov 23 '18 at 19:27
bobb1213131bobb1213131
728
asked Nov 23 '18 at 19:27
bobb1213131bobb1213131
728
728
Can you give us an example of thethis.state.ProductsAndAirlines.projectdata that was returned by your API?
– Shawn Andrews
Nov 23 '18 at 19:56
add a comment |
Can you give us an example of thethis.state.ProductsAndAirlines.projectdata that was returned by your API?
– Shawn Andrews
Nov 23 '18 at 19:56
Can you give us an example of the
this.state.ProductsAndAirlines.project data that was returned by your API?– Shawn Andrews
Nov 23 '18 at 19:56
Can you give us an example of the
this.state.ProductsAndAirlines.project data that was returned by your API?– Shawn Andrews
Nov 23 '18 at 19:56
add a comment |
1 Answer
1
active
oldest
votes
1
It's, probably, because your map function is wrong somehow. If you take a deep look you can check, for each key in ProductsAndAirlines.projects, the map function is returning an entirely new array. in the end, the options are being like
[
[{ value: 'PBS', label: 'PBS' },
{ value: 'Pairing', label: 'Pairing' },
{ value: 'MPP - Insight', label: 'MPP - Insight' },
{ value: 'BLISS', label: 'BLISS' },
{ value: 'Shiftlogic', label: 'Shiftlogic'}
]],
[{ value: 'PBS', label: 'PBS' },
{ value: 'Pairing', label: 'Pairing' },
{ value: 'MPP - Insight', label: 'MPP - Insight' },
{ value: 'BLISS', label: 'BLISS' },
{ value: 'Shiftlogic', label: 'Shiftlogic'}
]]
]
answered Nov 23 '18 at 19:55
Arthur AlmeidaArthur Almeida
29915
hmm can you take a look at my code again i updated it with the dynamic data, when i console.log it , it prints the values of my data from api so no worries for that but the list is empty in my reactselect
– bobb1213131
Nov 23 '18 at 20:18
As far as I can see, this code is not working anymore. You are creating the optionsProduct outside the render method and it's a constant and you are calling as a function for the options property
– Arthur Almeida
Nov 23 '18 at 21:10
Yeah nvm i got it to work
– bobb1213131
Nov 23 '18 at 21:12
I had to put the constant within the render method, create a new empty array and then push it when calling my for loop
– bobb1213131
Nov 23 '18 at 21:12
thanks though!!
– bobb1213131
Nov 23 '18 at 21:13
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
});
}
});
draft saved
draft discarded
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%2f53452040%2fpopulate-my-options-data-with-react-select-from-api%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
1
It's, probably, because your map function is wrong somehow. If you take a deep look you can check, for each key in ProductsAndAirlines.projects, the map function is returning an entirely new array. in the end, the options are being like
[
[{ value: 'PBS', label: 'PBS' },
{ value: 'Pairing', label: 'Pairing' },
{ value: 'MPP - Insight', label: 'MPP - Insight' },
{ value: 'BLISS', label: 'BLISS' },
{ value: 'Shiftlogic', label: 'Shiftlogic'}
]],
[{ value: 'PBS', label: 'PBS' },
{ value: 'Pairing', label: 'Pairing' },
{ value: 'MPP - Insight', label: 'MPP - Insight' },
{ value: 'BLISS', label: 'BLISS' },
{ value: 'Shiftlogic', label: 'Shiftlogic'}
]]
]
answered Nov 23 '18 at 19:55
Arthur AlmeidaArthur Almeida
29915
hmm can you take a look at my code again i updated it with the dynamic data, when i console.log it , it prints the values of my data from api so no worries for that but the list is empty in my reactselect
– bobb1213131
Nov 23 '18 at 20:18
As far as I can see, this code is not working anymore. You are creating the optionsProduct outside the render method and it's a constant and you are calling as a function for the options property
– Arthur Almeida
Nov 23 '18 at 21:10
Yeah nvm i got it to work
– bobb1213131
Nov 23 '18 at 21:12
I had to put the constant within the render method, create a new empty array and then push it when calling my for loop
– bobb1213131
Nov 23 '18 at 21:12
thanks though!!
– bobb1213131
Nov 23 '18 at 21:13
add a comment |
1
It's, probably, because your map function is wrong somehow. If you take a deep look you can check, for each key in ProductsAndAirlines.projects, the map function is returning an entirely new array. in the end, the options are being like
[
[{ value: 'PBS', label: 'PBS' },
{ value: 'Pairing', label: 'Pairing' },
{ value: 'MPP - Insight', label: 'MPP - Insight' },
{ value: 'BLISS', label: 'BLISS' },
{ value: 'Shiftlogic', label: 'Shiftlogic'}
]],
[{ value: 'PBS', label: 'PBS' },
{ value: 'Pairing', label: 'Pairing' },
{ value: 'MPP - Insight', label: 'MPP - Insight' },
{ value: 'BLISS', label: 'BLISS' },
{ value: 'Shiftlogic', label: 'Shiftlogic'}
]]
]
answered Nov 23 '18 at 19:55
Arthur AlmeidaArthur Almeida
29915
hmm can you take a look at my code again i updated it with the dynamic data, when i console.log it , it prints the values of my data from api so no worries for that but the list is empty in my reactselect
– bobb1213131
Nov 23 '18 at 20:18
As far as I can see, this code is not working anymore. You are creating the optionsProduct outside the render method and it's a constant and you are calling as a function for the options property
– Arthur Almeida
Nov 23 '18 at 21:10
Yeah nvm i got it to work
– bobb1213131
Nov 23 '18 at 21:12
I had to put the constant within the render method, create a new empty array and then push it when calling my for loop
– bobb1213131
Nov 23 '18 at 21:12
thanks though!!
– bobb1213131
Nov 23 '18 at 21:13
add a comment |
1
1
1
It's, probably, because your map function is wrong somehow. If you take a deep look you can check, for each key in ProductsAndAirlines.projects, the map function is returning an entirely new array. in the end, the options are being like
[
[{ value: 'PBS', label: 'PBS' },
{ value: 'Pairing', label: 'Pairing' },
{ value: 'MPP - Insight', label: 'MPP - Insight' },
{ value: 'BLISS', label: 'BLISS' },
{ value: 'Shiftlogic', label: 'Shiftlogic'}
]],
[{ value: 'PBS', label: 'PBS' },
{ value: 'Pairing', label: 'Pairing' },
{ value: 'MPP - Insight', label: 'MPP - Insight' },
{ value: 'BLISS', label: 'BLISS' },
{ value: 'Shiftlogic', label: 'Shiftlogic'}
]]
]
answered Nov 23 '18 at 19:55
Arthur AlmeidaArthur Almeida
29915
It's, probably, because your map function is wrong somehow. If you take a deep look you can check, for each key in ProductsAndAirlines.projects, the map function is returning an entirely new array. in the end, the options are being like
[
[{ value: 'PBS', label: 'PBS' },
{ value: 'Pairing', label: 'Pairing' },
{ value: 'MPP - Insight', label: 'MPP - Insight' },
{ value: 'BLISS', label: 'BLISS' },
{ value: 'Shiftlogic', label: 'Shiftlogic'}
]],
[{ value: 'PBS', label: 'PBS' },
{ value: 'Pairing', label: 'Pairing' },
{ value: 'MPP - Insight', label: 'MPP - Insight' },
{ value: 'BLISS', label: 'BLISS' },
{ value: 'Shiftlogic', label: 'Shiftlogic'}
]]
]
answered Nov 23 '18 at 19:55
Arthur AlmeidaArthur Almeida
29915
answered Nov 23 '18 at 19:55
Arthur AlmeidaArthur Almeida
29915
answered Nov 23 '18 at 19:55
Arthur AlmeidaArthur Almeida
29915
answered Nov 23 '18 at 19:55
Arthur AlmeidaArthur Almeida
29915
29915
hmm can you take a look at my code again i updated it with the dynamic data, when i console.log it , it prints the values of my data from api so no worries for that but the list is empty in my reactselect
– bobb1213131
Nov 23 '18 at 20:18
As far as I can see, this code is not working anymore. You are creating the optionsProduct outside the render method and it's a constant and you are calling as a function for the options property
– Arthur Almeida
Nov 23 '18 at 21:10
Yeah nvm i got it to work
– bobb1213131
Nov 23 '18 at 21:12
I had to put the constant within the render method, create a new empty array and then push it when calling my for loop
– bobb1213131
Nov 23 '18 at 21:12
thanks though!!
– bobb1213131
Nov 23 '18 at 21:13
add a comment |
hmm can you take a look at my code again i updated it with the dynamic data, when i console.log it , it prints the values of my data from api so no worries for that but the list is empty in my reactselect
– bobb1213131
Nov 23 '18 at 20:18
As far as I can see, this code is not working anymore. You are creating the optionsProduct outside the render method and it's a constant and you are calling as a function for the options property
– Arthur Almeida
Nov 23 '18 at 21:10
Yeah nvm i got it to work
– bobb1213131
Nov 23 '18 at 21:12
I had to put the constant within the render method, create a new empty array and then push it when calling my for loop
– bobb1213131
Nov 23 '18 at 21:12
thanks though!!
– bobb1213131
Nov 23 '18 at 21:13
hmm can you take a look at my code again i updated it with the dynamic data, when i console.log it , it prints the values of my data from api so no worries for that but the list is empty in my reactselect
– bobb1213131
Nov 23 '18 at 20:18
hmm can you take a look at my code again i updated it with the dynamic data, when i console.log it , it prints the values of my data from api so no worries for that but the list is empty in my reactselect
– bobb1213131
Nov 23 '18 at 20:18
As far as I can see, this code is not working anymore. You are creating the optionsProduct outside the render method and it's a constant and you are calling as a function for the options property
– Arthur Almeida
Nov 23 '18 at 21:10
As far as I can see, this code is not working anymore. You are creating the optionsProduct outside the render method and it's a constant and you are calling as a function for the options property
– Arthur Almeida
Nov 23 '18 at 21:10
Yeah nvm i got it to work
– bobb1213131
Nov 23 '18 at 21:12
Yeah nvm i got it to work
– bobb1213131
Nov 23 '18 at 21:12
I had to put the constant within the render method, create a new empty array and then push it when calling my for loop
– bobb1213131
Nov 23 '18 at 21:12
I had to put the constant within the render method, create a new empty array and then push it when calling my for loop
– bobb1213131
Nov 23 '18 at 21:12
thanks though!!
– bobb1213131
Nov 23 '18 at 21:13
thanks though!!
– bobb1213131
Nov 23 '18 at 21:13
add a comment |
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f53452040%2fpopulate-my-options-data-with-react-select-from-api%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
Can you give us an example of the
this.state.ProductsAndAirlines.projectdata that was returned by your API?– Shawn Andrews
Nov 23 '18 at 19:56