Pushing API-data to nested array and render results

Question

I'm calling an API to get an array of users, sort them, and put them in an array if the personalTrainerId is equal to my userId, and then render them into cards.

I'd like to receive the data as

MyClients: [{'userId':86,'firstName':'Client','lastName':'23','email':'newclient@ab'},{'userId':96,'firstName':'cl','lastName':'ie','email':'cl@ie'}]

But instead I get the result

MyClients: {'userId':86,'firstName':'Client','lastName':'23','email':'newclient@ab'},{'userId':96,'firstName':'cl','lastName':'ie','email':'cl@ie'},

(Without the brackets)

I get the response from the call, but when I try to render them, the object comes back as "undefined" - I'm quite new to this, and I might be approaching it all wrong. Any help would be appreciated.

My code for adding the response to an array:

function AddClients(response){
    const users = response.data;
    var newClient="";
    const myId = parseInt(getUserId())

    for(var i = 0; i < users.length; i++ ){
            if (response.data[i].personalTrainerId === myId){
                newClient=("{'userId':"+response.data[i].userId+",'firstName':'"+response.data[i].firstName+"',
'lastName':'"+response.data[i].lastName+"','email':'"+response.data[i].email+"'}")
                    //
                myClients.push(JSON.parse(JSON.stringify(newClient)))
                
        }
    }
    
    console.log("Length after this: "+ myClients.length); // returns 57 as expected
    myClients.map(RenderCard) // Calling to render
}

Then I try to render it to a card with bootstrap:

const RenderCard = (card, index) =>{ 

    return(         
            <Card border="dark" style={{ width: '18rem' }} key={index}>
            <Card.Header>Client number: {card.userId} </Card.Header>
                <Card.Body>
                    <Card.Title>Name: 
                        {card.firstName} {card.lastName}{console.log("card firstname: " + card.firstName)} 
                    </Card.Title> // Console.log returns "card firstname: undefined"
                    <Card.Text>
                        Mail: {card.email}
                    </Card.Text>
                </Card.Body>
            </Card>
        )
    
}

__

I really don't know how to get the right data in. Is there a better approach? Am I just missing something? I get no errors, and as I'm new to this I don't really know how to debug it properly.

Why do you want to push your response to an array? If you want to get a list of data the response must be an array otherwise there is no need to push your data into an array. For render an object you just get the item of the object and put that to correct place — davood Sandoghsaz
– davood Sandoghsaz, Commented Dec 1, 2021 at 10:39

davood Sandoghsaz · Accepted Answer · 2021-12-01 11:11:19Z

0

You must add your response to a state:

const [card, setCard] = React.useState({});
function AddClients(response){
  setCard(response.data);
}

After that you can use that state to render the data. If you want to render an array you can use code like this:

return (
  <>
    {
      cards.map(card=>         
        <Card border="dark" style={{ width: '18rem' }} key={index}>
        <Card.Header>Client number: {card.userId} </Card.Header>
            <Card.Body>
                <Card.Title>Name: 
                    {card.firstName} {card.lastName}{console.log("card firstname: " + card.firstName)} 
                </Card.Title> // Console.log returns "card firstname: undefined"
                <Card.Text>
                    Mail: {card.email}
                </Card.Text>
            </Card.Body>
        </Card>
      )
    }
  </>
);

but if you have an object of card:

return (
  <>      
      <Card border="dark" style={{ width: '18rem' }} key={index}>
        <Card.Header>Client number: {card.userId} </Card.Header>
        <Card.Body>
            <Card.Title>Name: 
                    {card.firstName} {card.lastName}{console.log("card firstname: " + card.firstName)} 
                </Card.Title> // Console.log returns "card firstname: undefined"
                <Card.Text>
                    Mail: {card.email}
                </Card.Text>
            </Card.Body>
        </Card>
      )
    }
  </>
);

edited Dec 1, 2021 at 11:11

answered Dec 1, 2021 at 10:42

davood Sandoghsaz

6921 gold badge4 silver badges13 bronze badges

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

3 Comments

FrkKryds Over a year ago

I tried both of those, but I still get the same result of "card firstname : udefined" I tried calling RenderCard(newClient) in my for loop as well, but I still get udefined. It seems I'm not creating objects in the right way, but I'm not sure, what Im doing wrong.

FrkKryds Over a year ago

^ I addition to that, I tried just console.log(card) in my render, and gets card: 'userId':374,'firstName':'Gimli','lastName':'Yids','email':'gimli@client' I think I might just add a string instead of an object?

davood Sandoghsaz Over a year ago

You must put your response to a state and use it.. I edited my answer as well

Collectives™ on Stack Overflow

Pushing API-data to nested array and render results

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related