react native how to filter data with some key object on 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);
      });
  }

Solution

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>

Comments

[Hassan Imam]

Try this var filteredData = responseJson.movies.filter(movie => movie.category === 'space')