Executando verificação de segurança...
2

RESOLVIDO: Uma ajuda, em uma conversão de uma Array(string) Json para Js

Resolvido 👍

Faço a conexão com a API, e busco os dados da planilha:

.then((resp) => resp.json())
    .then(function(data) {
        const dataConvert = JSON.stringify(data)
        
        console.log(dataConvert);

Retorno:

{
   "página1":[
      {
         "id":2,
         "nomeUsuario":"Roberto",
         "senhaUsuario":55555
      },
      {
         "id":3,
         "nomeUsuario":"Gabriel",
         "senhaUsuario":546165
      },
      {
         "id":4,
         "nomeUsuario":"Roh",
         "senhaUsuario":6465
      },
      {
         "id":5,
         "nomeUsuario":"Robertoo",
         "senhaUsuario":645572
      }
   ]
}

Como faria para organizar essa array(string), em elementos separados, como id[], nomeUsuario[], senhaUsuario[]

Carregando publicação patrocinada...
6

Olá,

No primeiro then:

.then((resp) => resp.json())

você está parseando a resposta da sua API para JSON. No segundo:

.then(function(data) { ...

Você recebe data e esse valor já é um JSON. o fato de você realizar um JSON.stringfy(data) faz com que ele vire uma string.

'{"página1":[{"id":2,"nomeUsuario":"Roberto","senhaUsuario":55555},{"id":3,"nomeUsuario":"Gabriel","senhaUsuario":546165},{"id":4,"nomeUsuario":"Roh","senhaUsuario":6465},{"id":5,"nomeUsuario":"Robertoo","senhaUsuario":645572}]}'

Supondo que o resultado desejado seja o array que responde à chave página:

{
  "página1": [
    { "id": 2, "nomeUsuario": "Roberto", "senhaUsuario": 55555 },
    { "id": 3, "nomeUsuario": "Gabriel", "senhaUsuario": 546165 },
    { "id": 4, "nomeUsuario": "Roh", "senhaUsuario": 6465 },
    { "id": 5, "nomeUsuario": "Robertoo", "senhaUsuario": 645572 }
  ]
}

você pode simplesmente, no segundo then acessar ele, ou seja:

fetch(...)
    .then(resp => resp.json())
    .then(data => {
        const pagina1 = data['página1']; // => (4) [{…}, {…}, {…}, {…}];
    	console.table(pagina1);
        
        // cada elemento poderia ser acessado facilmente agora. Por exemplo:
        console.log(pagina1[0].id) // => 2
        console.log(pagina1[0].nomeUsuario) // => 'Roberto'
        console.log(pagina1[0].senhaUsuario) // => 55555
        
        // ou, um array para cada conjunto de dados, ids.. nomes.. senhas..
        const ids = pagina1.map(inf => inf.id); 
        const nomes = pagina1.map(inf => inf.nomeUsuario); 
        const senhas = pagina1.map(inf => inf.senhaUsuario); 
        
        console.log('IDs: ', ids); // => IDs: (4) [2, 3, 4, 5]
        console.log('Nomes: ', nomes); // => Nomes: (4) ['Roberto', 'Gabriel', 'Roh', 'Robertoo']
        console.log('Senhas: ', senhas); // => Senhas: (4) [55555, 546165, 6465, 645572]
    });

Sem necessidade da utilização do método JSON.stringify. Mas, vai muito do que você realmente precisa.

Espero ter ajudado.

3

Uma sugestão para deixar mais performático seria substituir os 3 .maps por um .reduce e desestruturar os dados no retorno do reduce.

Assim o array seria iterado uma única vez e não três.

Estou no celular, a idéia seria algo como:

const { ids, nomes, senhas } = pagina1.reduce((data, item) => {
  // passa os dados pra dentro de cada propriedade do data
}, {
  ids: [],
  nomes: [],
  senhas: []
})
1

Boa observação. Usei vários maps ali apenas para simplificar os exemplos mas com o reduce realmente da uma boa enxugada no código. Valeu!

1
2

Ajudou bastante, obrigado <3

Pensei que precisasse primeiro transformar em string, para assim o Js conseguir ler e me retornar com os valores, mas pelo visto não há necessidade

1
3

Provavelmente seria algo assim:

const resultado = {
  página1: [
    { id: 2, nomeUsuario: 'Roberto', senhaUsuario: 55555 },
    { id: 3, nomeUsuario: 'Gabriel', senhaUsuario: 546165 },
    { id: 4, nomeUsuario: 'Roh', senhaUsuario: 6465 },
    { id: 5, nomeUsuario: 'Robertoo', senhaUsuario: 645572 },
  ],
}

const ids = resultado.página1.map((item) => item.id)
const nomesDeUsuario = resultado.página1.map((item) => item.nomeUsuario)
const senhasDeUsuario = resultado.página1.map((item) => item.senhaUsuario)

console.log({
  ids,
  nomesDeUsuario,
  senhasDeUsuario,
})

O método Array.map() percorre os elementos de um array e o valor que voçê retorna nessa função é usardo para compor um novo array.

1

Boa tarde Nathan
Eu testei, mas ele da esse erro aqui:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'map')

Acredito que seja porque os elementos antes dos :, são strings (estão entre aspas duplas), e por isso não funciona o .map para eles

Obs: Sou meio q novato na área, então não sei muito.

3

Uma das formas possíveis e acho que mais simples de se entender seria utilizando o map:

const ids = dataConvert.página1.map(p1=>p1.id)
const nomes = dataConvert.página1.map(p1=>p1.nomeUsuario)
const ids = dataConvert.página1.map(p1=>p1.senhaUsuario)

A documentação te dá mais detalhes sobre o uso do map

Se você tiver mais de uma página ai seria necessário modificar um pouco a lógica, acho que uma combinação do map e concat já te atenderia.

1

Boa tarde Fernandes
Mas o .map continua dando erro, igual com o do Nathan, pois os elementos antes dos :, são strings (acredito eu)

3

Olá, como vai?

poderia ser feito algo como:

const obj = JSON.parse(dataConvert);
const idArray = obj["página1"].map(item => item.id);
const nomeUsuarioArray = obj["página1"].map(item => item.nomeUsuario);
const senhaUsuarioArray = obj["página1"].map(item => item.senhaUsuario);

Espero ter ajudado, vou deixar minhas redes a baixo 👇🏼

Linkedin - GitHub

1
2
2

Sei que já foi resolvido (e provavelmente quase ninguém vai ler, pois o site só dá destaque para os posts criados recentemente, e respostas dadas em tópicos antigos ficam "enterradas"), mas enfim, se a ideia é simplificar, então não precisa de map e nem reduce. Um único for simples já resolve:

const data = [
    { "id": 2, "nomeUsuario": "Roberto", "senhaUsuario": 55555 },
    { "id": 3, "nomeUsuario": "Gabriel", "senhaUsuario": 546165 },
    { "id": 4, "nomeUsuario": "Roh", "senhaUsuario": 6465 },
    { "id": 5, "nomeUsuario": "Robertoo", "senhaUsuario": 645572 }
];

var ids = [], names = [], passwords = [];
for (const item of data) {
    ids.push(item.id);
    names.push(item.nomeUsuario);
    passwords.push(item.senhaUsuario);
}
console.log(ids, names, passwords);

Também mudei os nomes dos arrays para ids, names e passwords (no plural). Afinal, o primeiro contém vários id's, o segundo, vários nomes, e o terceiro, várias senhas. Pode parecer um detalhe besta, mas dar nomes melhores ajuda na hora de programar.

Se quiser um único objeto contendo os 3 arrays, basta mudar para:

const data = [
    { "id": 2, "nomeUsuario": "Roberto", "senhaUsuario": 55555 },
    { "id": 3, "nomeUsuario": "Gabriel", "senhaUsuario": 546165 },
    { "id": 4, "nomeUsuario": "Roh", "senhaUsuario": 6465 },
    { "id": 5, "nomeUsuario": "Robertoo", "senhaUsuario": 645572 }
];

var result = { ids: [], names: [], passwords: [] };
for (const item of data) {
    result.ids.push(item.id);
    result.names.push(item.nomeUsuario);
    result.passwords.push(item.senhaUsuario);
}
console.log(result);

E claro, também tem o for "tradicional":

var ids = [], names = [], passwords = [];
for (var i = 0; i < data.length; i++) {
    ids.push(data[i].id);
    names.push(data[i].nomeUsuario);
    passwords.push(data[i].senhaUsuario);
}

Pronto. Usar map, como já explicaram, não é uma boa nesse caso porque cada chamada percorre o array, então você estará percorrendo o mesmo array 3 vezes sem necessidade (sim, o map tem um for implícito, ou "escondido").

reduce, apesar de só percorrer uma vez (também tem um for implícito), faz várias chamadas de função (sim, o (acc, el) => { etc é uma função que é chamada para cada elemento do array). E chamar funções têm o seu custo. Tudo bem que para poucos arrays pequenos, a diferença será insignificante, mas para muitos arrays grandes, pode começar a fazer diferença (veja neste teste como reduce e map são bem mais lentos - embora para arrays pequenos nem sempre é verdade, para arrays grandes é uma boa diferença). Também fiz testes na minha máquina usando o Benchmark.js e os resultados foram similares.

Não estou criticando map e reduce, somente alertando que nem sempre a solução "com menos código", ou "funcional", ou seja lá o que for, é necessariamente a "melhor". É preciso conhecer as opções e saber avaliar quando uma pode ser melhor que outra (por exemplo, se vc já tivesse as funções prontas, poderia compensar chamar reduce, ou se o framework "obriga" a usar esses métodos, aí não tem escolha, etc)

2

Existem algumas formas formas de fazer, mas eu iria nesse caso com o reduce

const data = [{
        "id": 2,
        "nomeUsuario": "Roberto",
        "senhaUsuario": 55555
    },
    {
        "id": 3,
        "nomeUsuario": "Gabriel",
        "senhaUsuario": 546165
    },
    {
        "id": 4,
        "nomeUsuario": "Roh",
        "senhaUsuario": 6465
    },
    {
        "id": 5,
        "nomeUsuario": "Robertoo",
        "senhaUsuario": 645572
    }
]

Tendo conhecimento da estrutura

data.reduce((acc, {
   id,
   name,
   password
}) => {
   acc.id.push(id)
   acc.name.push(name)
   acc.password.push(password)
   return acc
}, {
   id: [],
   name: [],
   password: []
});

{
   "id": [2, 3, 4, 5],
   "nomeUsuario": ["Roberto", "Gabriel", "Roh", "Robertoo"],
   "senhaUsuario": [55555, 546165, 6465, 645572]
}

Estrutura dinâmica

data.reduce((acc, el) => {
   for (const [key, value] of Object.entries(el)) {
       acc[key] = acc[key] ? [...acc[key], value] : [value]
   }
   return acc
}, {});

{
   "id": [2, 3, 4, 5],
   "nomeUsuario": ["Roberto", "Gabriel", "Roh", "Robertoo"],
   "senhaUsuario": [55555, 546165, 6465, 645572]
}
0

Uma dúvida/provocação.

Os dados já parecem vir bem estruturados nesse array de objetos. Qual vantagem você busca em separá-los em 3 arrays?

1

Faz sentido sua pergunta kkk

Tava com a ideia de criar a própria validação no Js, onde ele busca o usuário, já cadastrado, caso exista algum usuario com mesmo nome, ele impede o cadastro. E o contrário também, caso não exista, ele continua com o cadastro.

Obs: Sei que não é seguro fazer isso, pois o banco de dados fica meio que exposto, mas estou estudando programação, então vou fazendo o que da na mente kkkk e outra não tem como abrir Access pelo celular, onde eu faço os códigos.

2