Entrar Ainda não tem acesso?
2
respostas

Map de um array

Referente ao curso JavaScript: Arrays

por Iliziane Maria Czechowski Grondek
| 11.1k xp | 2 posts

Como poderia fazer para acessar o primeiro objeto de usuário e o array de dependentes no map?

const mock = [
    {
      success: true,
      data: {
        sequencia: 30200,
        cpf: "18071098876",
        dependentes: [
        {
          sequencia: 30200,
          cpf: "18071098876",
        },
        {
          sequencia: 30200,
          cpf: "18071098876",
          }
        ]
       }
      }

O map

const renderItem = ({item, index}) => {
    return (
      <>
            <Text style={styles.textUppercase}>
                 {item.data.cpf}
            </Text>
            <Text style={styles.textUppercase}>
               {item.data.plano}
            </Text>
      </>
    )
  }

A lista que renderiza o mock

<FlatList
          horizontal
          data={mock}
          keyExtractor={(item) => item.key}
          renderItem={renderItem}
          showsHorizontalScrollIndicator={false}
          showsVerticalScrollIndicator={false}
        />

Preciso renderizar na lista os primeiro usuário e os dependentes dele.

2 respostas
por João Manoel Lima
| 373.4k xp | 429 posts
Alura Scuba Team

Boa tarde Iliziane, tudo certo?

Eu sinto que não entendi perfeitamente a sua dúvida. Você deseja varrer o array de dependentes utilizando o método array.map() ou quer apenas filtrar e selecionar o primeiro usuário de uma lista e renderizar os seus dependentes?

Vou dar exemplos para essas tarefas, mas caso eu tenha interpretado errado não hesite em responder o tópico aqui. Lembrando que existem diversas formas de se realizar a mesma tarefa utilizando métodos bem diferentes.

1) Como varrer um array com o método map():

De acordo com a documentação, esse método cria um novo array com o resultado de uma função que passa por todos os campos do array. Para retornar os CPFs dos depententes podemos fazer:

let apenasDependentes = mock.data.dependentes.map( elemento => elemento.cpf() )

2) Como retornar apenas o primeiro usuário e seus dependentes:

Eu creio que você esteja utilizando alguma biblioteca de front-end como React ou algo do tipo, então podemos utilizar do JSX para ter o resultado desejado:

<Text style={styles.textUppercase}>
                {item.data.dependentes.map( elemento => <p> {elemento.cpf} </p>} 
</Text>

Eu deixo a recomendação de buscar pelas formações de front-end aqui na platafiorma e também esse conteúdo sobre template strings. Espero ter ajudado e bons estudos!

por Iliziane Maria Czechowski Grondek
| 11.1k xp | 2 posts

Olá! Acho que você não entendeu bem a minha dúvida, rs. Como você fez, eu pego e renderizo o elemento apenas dos dependentes. O que eu queria era o seguinte, na minha flatlist, renderizar o primeiro user (Titular, que está em data) e renderizar também os dependentes que estão dentro dele. Na forma que você sugeriu eu conseguiria apenas pegar os dependentes.

A alternativa que achei foi essa: 

          <ScrollView
            horizontal
            showsHorizontalScrollIndicator={false}
            showsVerticalScrollIndicator={false}
          >
            {renderItem(mock.data)}
            {mock.data.dependentes.map((dependente) => {
              return renderItem(dependente);
            })}
          </ScrollView>