CODEWITHSUNDEEP
javascriptreactjsfetch-api
zemmsoares
zemmsoares

Reputation: 353

ReactJS filter API data

I'm using an API to get an array of Objects. Each object has a lot of data, I want to filter this data to just grab the data I need so I can display it on a React-Table.

export default class Table extends React.Component {
  constructor(props){
    super(props);
    this.state = {
    }
  }

  fetchData() {
  const string = 'http://localhost:8000/issues/assigned/mike';
  fetch(string)
  .then(function(response) {
    return response.json();
  })
  .then((myJson) => this.setState(myJson));
  console.log(this.state)
}

  componentDidMount(){
    this.fetchData();
  }

  componentDidUpdate(prevProps) {
    if (prevProps.value !== this.props.value) {
        this.fetchData()
    }
  }

render() {
    return this.state.issues? (
      <div>
        <ResponseTable data={this.state.issues} />
      </div>
    ) : (
      <div>
         Loading ...
      </div>
    );
  }
}

The JSON file I'm receiving from the API: JSON DATA NEST

For the example there is only one object, I'm receiving 50 object with the exact same nesting, I'm looking forward to extract a few properties (for example, data.issues[0].fields.timespent ) so I can pass this data into my react-table and create a row for each "issue".

Upvotes: 0

Views: 1864

Answers (2)

Nazar Litvin
Nazar Litvin

Reputation: 778

setState function does not immediately update a component but you can use a callback function setState(updater[, callback]) to get your state right after it was updated.

Regarding data filtering, you can use .map() or .filter() function to transform or filter your collection after a response was converted to JSON.

Upvotes: 1

Igor Alemasow
Igor Alemasow

Reputation: 4889

You can use .filter() method to filter data that you need and .map() method to map this data to appropriate model.

Upvotes: 0

Related Questions