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.
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: []
})