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);
      });
  }
                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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With