react native how to filter data with some key object on json - json

Question

if I have json like this
-----------------
{
title: "The Basics - Networking",
description: "Your app fetched this from a remote endpoint!",
movies: [
{
title: "Star Wars",
category: "space",
releaseYear: "1977"
},
{
title: "Back to the Future",
category: "time"
releaseYear: "1985"
},
{
title: "The Matrix",
category: "scifi",
releaseYear: "1999"
},
{
title: "Inception",
category: "fantasy",
releaseYear: "2010"
},
{
title: "Interstellar",
category: "space"
releaseYear: "2014"
}
]
}
-----------------
I need to filter some data of category = space
but I don't know how to filter data after fetch json form webservice
I want only data form category = space
(It's mean I want to get interstellar and star wars)
and set to datasource
like a " dataSource: ds.cloneWithRows(responseJson.movies)" but this method get all row without filter
componentDidMount() {
return fetch('https://facebook.github.io/react-native/movies.json')
.then((response) => response.json())
.then((responseJson) => {
let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.setState({
isLoading: false,
dataSource: ds.cloneWithRows(responseJson.movies),
}, function() {
// do something with new state
});
})
.catch((error) => {
console.error(error);
});
}

Answer 1

Use Array#Filter like this:
const movies = [{
title: "Star Wars",
category: "space",
releaseYear: "1977",
},
{
title: "Back to the Future",
category: "time",
releaseYear: "1985",
},
{
title: "The Matrix",
category: "scifi",
releaseYear: "1999",
},
{
title: "Inception",
category: "fantasy",
releaseYear: "2010",
},
{
title: "Interstellar",
category: "space",
releaseYear: "2014",
}
];
const space = movies.filter(x => x.category === 'space');
console.log(space);
Here you are another Array#Filter example,
filter posts where userId is 1.
https://jsonplaceholder.typicode.com/posts :
class Data extends React.Component {
constructor(props) {
super(props);
this.state = {
data: []
};
}
componentDidMount() {
return fetch('https://jsonplaceholder.typicode.com/posts')
.then(response => response.json())
.then(data => {
this.setState({ data: data.filter(d => d.userId === 1) })
})
.catch(error => {
console.error(error);
});
}
render() {
return (
<div>
<h1>Posts JSON:</h1>
<pre>
{JSON.stringify(this.state.data, null, 2)}
</pre>
</div>
);
}
}
ReactDOM.render(
<Data />,
document.getElementById('container')
);
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>