Multi tool use

Javascript ES6: Get specific array from inside of JSON array and iterate them using map

I have a JSON at https://api.myjson.com/bins/9jyq4

"response": [{
"id": "1",
"title": "Star Wars",
"project": [
"Star Wars Proj1",
"Star Wars Proj2",
"Star Wars Proj3",
"Star Wars Proj4"
]
},
{
"id": "2",
"title": "Back to the Future",
"project": [
"Back to the Future Proj1",
"Back to the Future Proj2",
"Back to the Future Proj3",
"Back to the Future Proj4"
]
},
..
..


I have two pickers. "Title" and "Projects"
I am populating title picker using.

<Picker
mode="dialog"
selectedValue={this.state.Movietitle}
onValueChange={(itemValue, itemIndex) =>
this.setState({ Movietitle: itemValue });
}
enabled={!this.state.inRide}
>
{
this.state.responseData.map((item) => (
<Picker.Item label={item.title} value={item.id} key={item.id} />))
}
</Picker>


So now I want to populate second picker "Projects" using choice selected from first picker. Just need help in making a map query. Thanks

2 Answers
2

Use filter method to get tan array of object where the id matches, then use map method on it

let response = [{
"id": "1",
"title": "Star Wars",
"project": [
"Star Wars Proj1",
"Star Wars Proj2",
"Star Wars Proj3",
"Star Wars Proj4"
]
},
{
"id": "2",
"title": "Back to the Future",
"project": [
"Back to the Future Proj1",
"Back to the Future Proj2",
"Back to the Future Proj3",
"Back to the Future Proj4"
]
}
]

function getObject(srchId) {
let __obj = response.filter(function(item) {
return item.id === srchId;


})
return __obj;
}

getObject('2').map(function(item) {

//rest of the code
})

You should be able to access each project title by finding currently selected response item and simply mapping through each item in the project property of that response item.

find

project

Like this:

render() {
const { responseData, Movietitle, selectedProject } = this.state;
const selectedMovie = responseData.find(item => item.id === Movietitle);

return (
<Picker
mode="dialog"
selectedValue={selectedProject}
onValueChange={project => this.setState({ selectedProject: project })}
>
{
selectedMovie.project.map((project, projectIndex) => (
<Picker.Item label={project} value={project} key={`${Movietitle}-${projectIndex}`} />
))
}
</Picker>
);
}


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.