Retrieving Array from API and filtering through in React

Question

I have successfully called and passed the token to my API endpoint. However, I do not need both objects. I just want to work with the first index in the array that has fields. So I would like to retrieve all the details and print them out in the browser but for now all what can be printed is ID and type

enter image description here

I have tried filtering through the data array but it did not work.

var config = {
    headers: {'Authorization': 'Bearer token'}
};

class App extends React.Component  {

  constructor(props) {
     super(props)
     this.state = {
       data: [],
     }
   }

   componentDidMount() {
     axios.get('https://api.transferwise.com/v1/profiles',config)
       .then(response => {
         if (response.status === 200 && response != null) {
           this.setState({
             data: response.data
           });
         } else {
           console.log('problem');
         }
       })
       .catch(error => {
         console.log(error);
       });
     }

     render() {
       const { data } = this.state;
       return (
         <div >
           {this.state.data.map(object => (
             <p key={object.uid}>{object.id} {object.type}</p>
           ))}
         </div>
       )
     }};

export default App;

"first index in the array that has fields" which fields? Sounds like you're looking for Array#find. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — Tyler Sebastian
– Tyler Sebastian, Commented Sep 13, 2019 at 20:05
Hey thank you for responding, I have attached a screenshot, so I just want to retrieve for example firstName from the first object in the array — Tim Prozorov
– Tim Prozorov, Commented Sep 13, 2019 at 20:06
Depends what you want this.state.data to be. If you want it to be just the first name, this.setState({ data: response.data[0].details.firstName }). — Tyler Sebastian
– Tyler Sebastian, Commented Sep 13, 2019 at 20:12

automasean · Accepted Answer · 2019-09-13 20:41:35Z

1

Looks like your data consists of an array where each item can be an object with details of a different type.

To dynamically render the field values of each object you could do something like:

{this.state.data.map(({ id, type, details }) => {
  return (
    <>
      <p key={id}>
        {id} {type}
      </p>

      {Object.keys(details).map((key, index) => (
        <p key={index}>{details[key]}</p>
      ))}
    </>
  );
})}

edited Sep 13, 2019 at 20:41

answered Sep 13, 2019 at 20:29

automasean

4313 silver badges9 bronze badges

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

3 Comments

Tim Prozorov Over a year ago

Hey dude, thank you for your answer, after trying this, I receive the following Objects are not valid as a React child (found: object with keys {name, registrationNumber, acn, abn, arbn, companyType, companyRole, descriptionOfBusiness, primaryAddress, webpage, businessCategory, businessSubCategory}). If you meant to render a collection of children, use an array instead.

automasean Over a year ago

Hey just updated to address your nested data structure. Give that a shot

Tim Prozorov Over a year ago

Hey, your answer totally makes sense but I am stuck due to braces issues and can't sort it out for some reason Line 36: Your render method should have return statement react/require-render-return / or unexpected token

Khaladin · Accepted Answer · 2019-09-13 20:22:13Z

0

So it looks to me like you're not going deep enough in your mapped object. which means you should access the details portion of the object to get the info you want

this.state.data.map(object => (
   // The object data structure at this point should look like this
   // {
   //  details: {firstName: 'firstExample', lastName: 'lastExample', ...},
   //  id: 'example'
   //  type: 'personal'
   // } if you console.log(object) you should be able to see it

   {<p key={object.details.id}>{object.details.id} {object.details.type}</p>
))}

answered Sep 13, 2019 at 20:22

Khaladin

5065 silver badges13 bronze badges

1 Comment

Tim Prozorov Over a year ago

Thank you for your time, I have tried this and nothing prints out, I am sorry if its some basic question I am asking, I cannot figure it out for some reason

Collectives™ on Stack Overflow

Retrieving Array from API and filtering through in React

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related