0

Estou recebendo dados do Firebase com o ReactJS e o meu problema é que quero organizar esses dados na tabela da seguinte forma:

inserir a descrição da imagem aqui

Mas não estou conseguindo fazer, esse é o resultado que consegui:

inserir a descrição da imagem aqui

Sei que é um problema relativamente simples e ficaria grato se alguém pudesse ajudar. Abaixo está meu código.

function Exemplo() {
  const [users, setUsers] = React.useState([])

  React.useEffect(() => {
    // const db = firebase.firestore()
    // db.collection('equipes').onSnapshot(data => {
    //  setUsers(data.docs.map(doc => ({ ...doc.data() })))
    // })
    // Esses são os dados mapeados do firebase:
    setUsers([
     {
        "name": "Furia",
        "players": [
           { "name": "Eduardo", "attack": 18, "defense": 2 },
           { "name": "Tiago", "attack": 15, "defense": 3 },
           { "name": "Julia", "attack": 10, "defense": 0 }
        ]
     },
     {
        "name": "Incriveis",
        "players": [
           { "name": "Eduardo", "attack": 11, "defense": 4 },
           { "name": "Tiago", "attack": 17, "defense": 0 },
           { "name": "13", "attack": 13, "defense": 6 }
        ]
     }
    ]);
  }, [])

  if (users) {
    return (
      <div>
        <table>
          <thead>
            <tr>
              <th rowSpan="2">#</th>
              <th rowSpan="2">Nome</th>
              <th colSpan="2">Furia</th>
              <th colSpan="2">Incriveis</th>
            </tr>

            <tr>
              <td>Ataques</td>
              <td>Defesas</td>
              <td>Ataques</td>
              <td>Defesas</td>
            </tr>
          </thead>
          <tbody>
            {users.map((user, index) => (
              <React.Fragment key={index}>
                {user.players.map((u, index) => (
                  <tr key={index}>
                    <td>{index + 1}</td>
                    <td>{u.name}</td>
                    <td>{u.attack}</td>
                    <td>{u.defense}</td>
                  </tr>
                ))}
              </React.Fragment>
            ))}
          </tbody>
        </table>
      </div>
    )
  }
}

ReactDOM.render(<Exemplo />, document.querySelector("#container"));
<div id="container"></div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

5
  • Ao invés de compartilhar uma print do Firebase, é mais fácil compartilhar o que seu array users possui como valor. O que me parece é que a pessoa está repetida em user.players, precisaria fazer um .reduce se for isso mesmo. Commented 16/12/2020 às 14:06
  • Obrigado pelo toque. Mas realmente está repetido. A idéia é que a equipe fosse associada aos players que nem a primeira imagem da tabela que mostrei. Estruturei no firestore naquela forma como exemplo, porque não tive nenhuma idéia melhor. Commented 16/12/2020 às 14:11
  • Pronto amigo, adicionei Commented 16/12/2020 às 14:52
  • A resposta solucionou seu problema, Bruno? Commented 17/12/2020 às 13:29
  • Realmente os dados vão ser dinâmicos usando um formulário para adicionar. Coloquei somente 2 equipes e 3 players de exemplo. Sobre o banco de dados a estrutura que coloquei foi para ter uma idéia. Mas sua resposta tá ajudando eu ter algumas idéias. Se eu conseguir resolver o problema ou tiver alguma dúvida volto com o feedback. Obrigado! Commented 17/12/2020 às 15:55

1 Resposta 1

0

O problema é que o formato dos dados não é o mesmo formato que você deseja exibir. Existem algumas maneiras de resolver, mas acho que o jeito mais fácil/legível é ter o array já pronto para ser mapeado para a tabela, onde cada elemento do array representa uma linha.

Digamos que nosso objetivo é ter o seguinte array:

[
  {
    "name":"Eduardo",
    "furia":{
      "attack":18,
      "defense":2
    },
    "incriveis":{
      "attack":11,
      "defense":4
    }
  },
  {
    "name":"Tiago",
    "furia":{
      "attack":15,
      "defense":3
    },
    "incriveis":{
      "attack":17,
      "defense":0
    }
  },
  {
    "name":"Julia",
    "furia":{
      "attack":10,
      "defense":0
    },
    "incriveis":{
      "attack":13,
      "defense":6
    }
  }
]

Podemos alcançar esse objetivo com a função .map, veja o código dentro do useEffect:

function Exemplo() {
  const [users, setUsers] = React.useState([])

  React.useEffect(() => {
    const data = [
     {
        "name": "Furia",
        "players": [
           { "name": "Eduardo", "attack": 18, "defense": 2 },
           { "name": "Tiago", "attack": 15, "defense": 3 },
           { "name": "Julia", "attack": 10, "defense": 0 }
        ]
     },
     {
        "name": "Incriveis",
        "players": [
           { "name": "Eduardo", "attack": 11, "defense": 4 },
           { "name": "Tiago", "attack": 17, "defense": 0 },
           { "name": "Julia", "attack": 13, "defense": 6 }
        ]
     }
    ];

    // data[0] representa "Furia", data[1] representa "Incriveis"
    const parsedUsers = data[0].players.map(player => {
      // Considerando que o jogador seja único por "name", procuramos ele no
      // array de "Incriveis" para pegar seu "attack" e "defense"
      const incriveisStatus = data[1].players.find(
        incriveisPlayer => incriveisPlayer.name === player.name
      );

      return {
        name: player.name,
        furia: {
          attack: player.attack,
          defense: player.defense
        },
        incriveis: {
          attack: incriveisStatus.attack,
          defense: incriveisStatus.defense
        }
      }
    });
    
    setUsers(parsedUsers);
  }, [])

  if (users) {
    return (
      <div>
        <table>
          <thead>
            <tr>
              <th rowSpan="2">#</th>
              <th rowSpan="2">Nome</th>
              <th colSpan="2">Furia</th>
              <th colSpan="2">Incriveis</th>
            </tr>

            <tr>
              <td>Ataques</td>
              <td>Defesas</td>
              <td>Ataques</td>
              <td>Defesas</td>
            </tr>
          </thead>
          <tbody>
            {users.map((user, index) => (
              <tr key={user.name}>
                <td>{index + 1}</td>
                <td>{user.name}</td>
                <td>{user.furia.attack}</td>
                <td>{user.furia.defense}</td>
                <td>{user.incriveis.attack}</td>
                <td>{user.incriveis.defense}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    )
  }
}

ReactDOM.render(<Exemplo />, document.querySelector("#container"));
<div id="container"></div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

Observações:

  1. Eu tinha resolvido isso com reduce, mas ficou muito complexo apenas para ser algo mais "dinâmico", e isso não traria benefício porque a tabela não é dinâmica (possui apenas Furia e Incriveis).
  2. Mudei a key para o name do user porque index não é bom para servir como chave, e name é o único valor que parece ser usado como único nos teus dados. Se você tiver um id, mude a key para o id e também no .find para procurar por id.

Provavelmente essa não é a solução ideal, mas para uma pequena quantidade de dados e para apenas dois "tipos" (Furia e Incriveis), funciona bem. Se quiser algo dinâmico, pode tentar fazer um reduce, mas lembre que terá que deixar a tabela com as colunas dinâmicas também. Pode ser um bom exercício para praticar.

É complicado porque o array dos dados não está num bom formato, talvez mudar o banco seja uma boa ideia, mas é preciso de contexto para entender como ele poderia ser e eu não tenho experiência com bancos não estruturados para opinar aqui.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .