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

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.

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.

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.

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

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").

Já 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)

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]
}

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?