React.js Iterate JSON and insert Card components based on ID count in the array

Question

So I have this API I am hitting GET http://localhost:23455/TicketApplication as shown below, it returns an array which is populated by Users and their choice selection as well as other peices of information. What i am trying to do is render a react Card component FOR EACH ID within the array block. So based on the ID, the card component should return the associated firstName, Surname etc... for that ID. `

[  
{
"id": "a25a9d38-3ce9-4fa7-910e-ac0d00c072b3",
"serviceNumber": "1234",
"firstName": "John",
"lastName": "Nobody",
"rankId": "8ee0ca42-a163-4b12-8609-ac0900f7dbcf",
"rank": {
  "id": "8ee0ca42-a163-4b12-8609-ac0900f7dbcf",
  "name": "Major",
  "shortName": "Maj"
  },
"choice1": {
  "id": "c7192b0c-3c65-437a-91c6-ac0d00cdbf8e",
  "date": "2020-08-04T12:22:40.561+00:00",
  "cost": 0
},
"choice2": {
  "id": "153db565-aba4-4ae1-8485-ac0d00d7ec54",
  "date": "2020-08-04T13:06:07.404+00:00",
  "cost": 0
},
 "choice3": {
  "id": "563d7c47-7359-431f-ace7-ac0d00de8791",
  "date": "2020-08-02T00:00:00+01:00",
  "cost": 12
}
},

{
"id": "a25a9d38-3ce9-4fa7-910e-ac0d00c072b3",
"serviceNumber": "1234",
"firstName": "John",
"lastName": "New",
"rankId": "8ee0ca42-a163-4b12-8609-ac0900f7dbcf",
"rank": {
  "id": "8ee0ca42-a163-4b12-8609-ac0900f7dbcf",
  "name": "Major",
  "shortName": "Maj"
  },
"choice1": {
  "id": "c7192b0c-3c65-437a-91c6-ac0d00cdbf8e",
  "date": "2020-08-04T12:22:40.561+00:00",
  "cost": 0
},
"choice2": {
  "id": "153db565-aba4-4ae1-8485-ac0d00d7ec54",
  "date": "2020-08-04T13:06:07.404+00:00",
  "cost": 0
},
 "choice3": {
  "id": "563d7c47-7359-431f-ace7-ac0d00de8791",
  "date": "2020-08-02T00:00:00+01:00",
  "cost": 12
}
},
]`

Here is the react component I have started building, it pulls in ALL information in the array and displays it on the card. So I have ended up with a card which displays ALL the ID's and names at once. My question is how could I iterate through the ID's and display several CARDs with the associated data per ID within the array. Thanks

export class TicketCard extends Component {
  state = {
   tickets: [],
 };

 constructor() {
   super();

// GET All Ticket Dates
axios.get("http://localhost:23455/TicketApplication").then((res) => {
  console.log(res.data);
  this.setState({ tickets: res.data });
});
}

render() {
 return (
  <div>
    <Card className="text-center">
      <Card.Header>
        Ticket:{" "}
        {this.state.tickets.map((ticket) => {
          return (
            <p key={ticket.id} value={ticket.id}>
              {ticket.id}
            </p>
          );
        })}
      </Card.Header>
      <Card.Body>
        <Card.Title>
          {this.state.tickets.map((ticket) => {
            return (
              <p key={ticket.id} value={ticket.id}>
                {ticket.firstName} {ticket.lastName}
              </p>
            );
          })}
        </Card.Title>
        <Card.Text>
          First choice:{" "}
          {this.state.tickets.map((ticket) => {
            return (
              <p key={ticket.id} value={ticket.id}>
                {ticket.choice1Id}
              </p>
            );
          })}
          &nbsp; &nbsp; Second choice:{" "}
          {this.state.tickets.map((ticket) => {
            return (
              <p key={ticket.id} value={ticket.id}>
                {ticket.choice2Id}
              </p>
            );
          })}
          &nbsp; &nbsp; Third choice:{" "}
          {this.state.tickets.map((ticket) => {
            return (
              <p key={ticket.id} value={ticket.id}>
                {ticket.choice3Id}
              </p>
            );
          })}
        </Card.Text>
      </Card.Body>
      <Card.Footer className="text-muted">
        <Button variant="primary">Remove Ticket</Button>
      </Card.Footer>
    </Card>
  </div>
);
}
}

Asutosh · Accepted Answer · 2020-08-04 15:43:32Z

1

You have to travese the tickets array and return card componentfor each ticket: Please check following code snippet.

export class TicketCard extends Component {
  state = {
   tickets: [],
 };

 constructor() {
   super();

// GET All Ticket Dates
axios.get("http://localhost:23455/TicketApplication").then((res) => {
  console.log(res.data);
  this.setState({ tickets: res.data });
});
}

render() {
 return (<div>{
this.state.tickets.map((ticket)=>(
  <Card className="text-center">
    <Card.Header>
      Ticket:{" "}
     
       
          <p key={ticket.id} value={ticket.id}>
            {ticket.id}
          </p>
    
    </Card.Header>
    <Card.Body>
      <Card.Title>
      
          
            <p key={ticket.id} value={ticket.id}>
              {ticket.firstName} {ticket.lastName}
            </p>
          
      
      </Card.Title>
      <Card.Text>
        First choice:{" "}
   
            <p key={ticket.id} value={ticket.id}>
              {ticket.choice1Id}
            </p>
         
        &nbsp; &nbsp; Second choice:{" "}
     
            <p key={ticket.id} value={ticket.id}>
              {ticket.choice2Id}
            </p>
          );
       
        &nbsp; &nbsp; Third choice:{" "}
       
            <p key={ticket.id} value={ticket.id}>
              {ticket.choice3Id}
            </p>
          );
       
      </Card.Text>
    </Card.Body>
    <Card.Footer className="text-muted">
      <Button variant="primary">Remove Ticket</Button>
    </Card.Footer>
  </Card>
);

 }</div>);
  
}

}

answered Aug 4, 2020 at 15:43

Asutosh

1,8382 gold badges16 silver badges22 bronze badges

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

2 Comments

Asutosh Over a year ago

Please mark it as answer, others may find it useful.

MD9 Over a year ago

I will review other answers first.

Collectives™ on Stack Overflow

React.js Iterate JSON and insert Card components based on ID count in the array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related