array.push() avec un length qui et toujours égal a zéro

Par bm “bmjp” jp, il y a 7 ans

Javascript

Bonjour,

Voila je rencontre un petit problème avec mon code.

je fetch un url API pour récupere les data et le push() dans un array() vide. pour travailler plus tard avec cette array()

function fetchapi() { let tableau = []; fetch('https://reqres.in/api/users?page=2') .then(val => val.json()) .then(val => { val.data.map(data => { tableau.push(data); }); }); console.log(tableau); // [] // 0: {id: 4, first_name: "Eve", last_name: ... // 1: {id: 5, first_name: "Charles", last_name: ... // 2: {id: 6, first_name: "Tracey", last_name: ... // length: 3 console.log(tableau.length); //0 }; fetchapi();

je veux recupere les data dans un array () pour fait un map() plus tard avec

array() 'undified' parceque j'ai des contenu dans l'array si je fait un console.log(array), mais si je fait un console.log(array.length) j'ai '0'

merci d'avance pour votre aide.

1 réponse

Maenhyr, il y a 7 ans

Bonjour,

c'est normal que tu n'ait rien dans ton tableau car tu utilises une fonction asynchrone avec fetch. Voici l'ordre dans laquelle ton code est lu.

function fetchapi() { // 2 let tableau = []; // 3 fonction asynchrone retournant une promise. Les then seront appelés lorsque la requête HTTP sera terminée fetch('https://reqres.in/api/users?page=2') // 6 .then(val => val.json()) // 7 .then(val => { // 8 val.data.map(data => { tableau.push(data); }); }); // 4 console.log(tableau); // 5 console.log(tableau.length); }; // 1 fetchapi();

Voici deux solutions possibles pour ton problème

// solution une function fetchapi() { let tableau = []; fetch('https://reqres.in/api/users?page=2') .then(val => val.json()) .then(val => { tableau = val.data console.log(tableau); }); }; fetchapi(); // solution deux async function fetchapi() { let tableau = []; try { const response = await fetch('https://reqres.in/api/users?page=2') const data = response.json(); tableau = data.val } catch(e) { console.error(e); } }; fetchapi();

PS: map est utilisé pour transformer les objets. Si tu veux seulement itérer sur un tableau, il faut utiliser forEach.