ReactJS filter API data

Question

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".

Hi Colin, this is the data which i receive from the API, jsonblob.com/8e148758-4f83-11e8-9df1-01379195c3a0 For the example purpose the "Issues" only has one object.. i'm looking to filter some info, for example, timespent, description... — zemmsoares
– zemmsoares, Commented May 4, 2018 at 10:12

Nazar Litvin · Accepted Answer · 2020-08-24 05:08:42Z

1

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.

edited Aug 24, 2020 at 5:08

answered May 4, 2018 at 9:36

Nazar Litvin

7786 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Igor Alemasow · Accepted Answer · 2018-05-04 09:29:51Z

0

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

answered May 4, 2018 at 9:29

Igor Alemasow

4,9592 gold badges32 silver badges28 bronze badges

Collectives™ on Stack Overflow

ReactJS filter API data

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related