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

bm “bmjp” jp
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

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.