Реагировать. js Итерировать JSON и вставлять компоненты карты на основе количества идентификаторов в массиве - PullRequest
Новая
       92

Реагировать. js Итерировать JSON и вставлять компоненты карты на основе количества идентификаторов в массиве

0 голосов
/ 04 августа 2020

Итак, у меня есть этот API. Я нажимаю GET http://localhost: 23455 / TicketApplication, как показано ниже, он возвращает массив, который заполняется пользователями и их выбором, а также другими частями информации. Я пытаюсь визуализировать компонент React Card ДЛЯ КАЖДОГО ID в блоке массива. Таким образом, на основе идентификатора компонент карты должен вернуть связанные firstName, Surname и c ... для этого идентификатора. `

[  
{
"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
}
},
]`

Вот компонент React, который я начал создавать, он извлекает ВСЮ информацию из массива и отображает ее на карте. Итак, я получил карту, которая отображает ВСЕ идентификаторы и имена сразу. Мой вопрос в том, как я могу перебирать идентификаторы и отображать несколько карт со связанными данными для каждого идентификатора в массиве. Спасибо 

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>
);
}
}

1 Ответ

1 голос
/ 04 августа 2020

Вы должны пройти массив билетов и компонент карты возврата для каждого билета: проверьте следующий фрагмент кода. 

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>);
  
}

}
...