JS fetch est vide, aucune donner retourner

Résolu/Fermé

firpic Messages postés 90 Date d'inscription jeudi 3 juin 2021 Statut Membre Dernière intervention 20 décembre 2022 - 25 févr. 2022 à 17:23
firpic Messages postés 90 Date d'inscription jeudi 3 juin 2021 Statut Membre Dernière intervention 20 décembre 2022 - 28 févr. 2022 à 18:36

Bonjour,

J'essaye de récupéré du json a partir d'une url mais cela ne fonctionne pas, le fichier est bien interpreter comme du json par d'autre logiciel mais quand j'utilise la fonction

fetch

, rien n'est retourner.
Du coup la fonction

forEach

ne fonctionne pas.

voici le code javascript :

const result = document.getElementById('list-search-user');
const filter = document.getElementById('search-bar');
const listItems = [];
getData();

filter.addEventListener("input", (e) => filterData(e.target.value))


async function getData(){
    const res = await fetch("http://localhost/disc/user/user-list/");
    //const res = await fetch("https://randomuser.me/api?results=50");
    console.log(res);
    const { results } = await res.json();

    result.innerHTML='';

    console.log(results);

    results.forEach( (user) => {
        const div = document.createElement("div");
        listItems.push(div);

        div.innerHTML=`<div class="user-case"><a href="#" class="click-case" onclick="open_user_info('${user.icon}')"><img src="${user.username}"><h1>${user.username}</h1></a></div>`;
        result.appendChild(div);
    });
}

function filterData(searchTerm){
    listItems.forEach((item)=>{
        if(item.innerText.toLowerCase().includes(searchTerm.toLowerCase())){
            item.classList.remove("none");
        }else{
            item.classList.add("none");
        }
    });
}

et voici le fichier générer avec PHP :


{

numberOfUser: "3",
user: [
{
username: "admin",
icon: "img/user-icon/user-lightgreen.png"
},
{
username: "test",
icon: "img/user-icon/user-red.png"
}
]
}

A voir également:

JS fetch est vide, aucune donner retourner
Retourner ecran windows - Guide
Supprimer page word vide - Guide
Comment retourner une video - Guide
Js round ✓ - Forum Javascript
Formate pour taxer client frigo vide - Forum PDF

5 réponses

Réponse 1 / 5

jordane45 Messages postés 38347 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 décembre 2024 4 719
25 févr. 2022 à 23:08

Bonjour,

Que donne ton console.log ?

firpic Messages postés 90 Date d'inscription jeudi 3 juin 2021 Statut Membre Dernière intervention 20 décembre 2022 1
26 févr. 2022 à 11:21

voici le console.log :


Responsebody: (…)bodyUsed: trueheaders: Headers {}ok: trueredirected: falsestatus: 200statusText: "OK"type: "basic"url: "http://localhost/disc/user/user-list/"[[Prototype]]: Response
search.js:17 undefined
search.js:19 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'forEach')
    at getData (search.js:19:13)

Réponse 2 / 5

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
26 févr. 2022 à 14:07

Bonjour,

Il ne faut pas déclarer la constante results à l'intérieur d'accolades :

const res = await fetch("http://localhost/disc/user/user-list/");
const results = await res.json();

firpic Messages postés 90 Date d'inscription jeudi 3 juin 2021 Statut Membre Dernière intervention 20 décembre 2022 1
26 févr. 2022 à 14:48

J'ai fait comme cela, car j'ai recopier un script sur internet et je l'ai adapter a mes besoin.
Quand j'essaye avec l'url du script que j'ai pris, la fonction

fetch

retourne bien du json.

firpic Messages postés 90 Date d'inscription jeudi 3 juin 2021 Statut Membre Dernière intervention 20 décembre 2022 1
26 févr. 2022 à 16:51

Et merci,
En enlevant les accolades, j'ai bien retour.

Mtn l'erreur est :


Uncaught (in promise) TypeError: results.forEach is not a function
    at getData (search.js:19:13)

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525 > firpic Messages postés 90 Date d'inscription jeudi 3 juin 2021 Statut Membre Dernière intervention 20 décembre 2022
26 févr. 2022 à 17:39

Oups j'ai parlé un peu vite, la syntaxe avec les accolades est correcte mais va dépendre de la réponse json.
Regarde la réponse de fetch dans l'onglet Réseau de ton navigateur pour voir et comparer le résultat json renvoyé avec les deux URLs (randomuser.me/... et localhost/...).

SInon, peux-tu nous montrer le code PHP qui génère la réponse json (ou un exemple simplifié) ?

Réponse 3 / 5

firpic Messages postés 90 Date d'inscription jeudi 3 juin 2021 Statut Membre Dernière intervention 20 décembre 2022 1
26 févr. 2022 à 17:46

Oui je peux te montrer le code PHP qui genere le json. Je préviens juste que le code que j'ai fais est archaïque mais je n'y arrivais pas autrement.

Et avec les accolades, j'ai aucun retour, la variable est vide alors que sans, j'ai un retour

voici le code php pour generer le json:

<?php
require('../config.php');
$q = mysqli_query($conn, "SELECT username, icon FROM user");
$n = mysqli_num_rows($q);
$nou = $n;
$n=$n-1;
$d=1;
echo '{ ';
echo '"numberOfUser":"'.$nou.'",';
echo '"user":[';
while($row = mysqli_fetch_assoc($q)){
    $arr = array("username"=>$row['username'], "icon"=>$row['icon']);
    echo json_encode($arr);
    if($d<=$n){
        echo ',';
    }
    $d=$d+1;
}

echo ']}';
?>

jordane45 Messages postés 38347 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 décembre 2024 4 719
26 févr. 2022 à 18:06

Ah oui.. ton json semble faut...
Essaye plutot

<?php
require('../config.php');
$q = mysqli_query($conn, "SELECT username, icon FROM user");
$n = mysqli_num_rows($q);
$nou = $n;

$result = []; // on initialise un array vide qui contiendra le résultat à renvoyer en json
$result['numberOfUser'] = $nou;
$result['user'] = []; // on initialise un array vide qui contiendra la liste des users
while($row = mysqli_fetch_assoc($q)){
  $result['user'][] = array("username"=>$row['username'], "icon"=>$row['icon']);
}

echo json_encode($result); // on retourne le résultat au format JSON
?>

firpic Messages postés 90 Date d'inscription jeudi 3 juin 2021 Statut Membre Dernière intervention 20 décembre 2022 1 > jordane45 Messages postés 38347 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 décembre 2024
26 févr. 2022 à 19:00

Merci, mon code était assez archaïque.

Réponse 4 / 5

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
26 févr. 2022 à 19:24

Tu te compliques la tâche en essayant de créer une partie du json à la main.
C'est plus simple de construire ta réponse à l'aide de tableau et/ou objet en PHP, puis d'utiliser un seul json_encode à la fin de ton script, avec le bon Content-Type dans l'entête http :

<?php
require '../config.php';
$resultUsers = mysqli_query($conn, 'SELECT username, icon FROM user');

if ($resultUsers === false) {
    $data = ['error' => 'Erreur sql'];
} else {
    $data = [
        'numberOfUsers' => mysqli_num_rows($resultUsers),
        'users' => mysqli_fetch_all($resultUsers, MYSQLI_ASSOC)
    ];
}

header('Content-Type: application/json; charset=utf-8');
echo json_encode($data);

Puisque le fichier ne contient que du code PHP, il n'est pas nécessaire d'ajouter la balise fermante "?>" à la fin du fichier.

Coté js, un exemple très simple pour récupérer le json :

async function getData(){
    const response = await fetch('http://localhost/json.php');
    const json = await response.json();

    console.log('Total : ' + json.numberOfUsers);
    
    json.users.forEach((user) => {
        console.log(user.username);
    });
}

ou en déclarant les variables avec l'utilisation des accolades :

async function getData(){
    const response = await fetch('json.php');
    const { numberOfUsers, users } = await response.json();
    
    console.log('Total : ' + numberOfUsers);

    users.forEach((user) => {
        console.log(user.username);
    });
}

firpic Messages postés 90 Date d'inscription jeudi 3 juin 2021 Statut Membre Dernière intervention 20 décembre 2022 1
26 févr. 2022 à 22:57

Merci, pour la refonte du code, mais la fonction

forEach

n'existe pas.

Voici le code d'erreur :


Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'forEach')
    at getData (search.js:25:16)

Avec quel code js tu as cette erreur ? Et quel est le résultat json renvoyé par php ?

firpic Messages postés 90 Date d'inscription jeudi 3 juin 2021 Statut Membre Dernière intervention 20 décembre 2022 1 > Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022
27 févr. 2022 à 15:20

J'ai cette erreur avec ce code :

async function getData(){
    const response = await fetch('http://localhost/json.php');
    const json = await response.json();

    console.log('Total : ' + json.numberOfUsers);
    
    json.users.forEach((user) => {
        console.log(user.username);
    });
}

Et le resultat renvoyer en json par php est :
<code>
{
numberOfUser: 3,
user: [
{username: "admin",icon: "img/user-icon/user-lightgreen.png"},
{username: "clem",icon: "img/user-icon/user-red.png"},
{username: "ethan...",icon: "img/user-icon/user-blue.png"}
]
}
/code>

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 5

jordane45 Messages postés 38347 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 décembre 2024 4 719
27 févr. 2022 à 16:33

Bonjour,
Tu fais

  json.users.

Alors que ton json contient

user: [

firpic Messages postés 90 Date d'inscription jeudi 3 juin 2021 Statut Membre Dernière intervention 20 décembre 2022 1
27 févr. 2022 à 18:15

Bonjour,

je ne voit pas ou est ce qu'est la ligne du

json.users.

firpic Messages postés 90 Date d'inscription jeudi 3 juin 2021 Statut Membre Dernière intervention 20 décembre 2022 1 > firpic Messages postés 90 Date d'inscription jeudi 3 juin 2021 Statut Membre Dernière intervention 20 décembre 2022
27 févr. 2022 à 18:19

Nan desole, je vien de remarque ou etait ce

firpic Messages postés 90 Date d'inscription jeudi 3 juin 2021 Statut Membre Dernière intervention 20 décembre 2022 1
27 févr. 2022 à 18:39

Mtn j'ai cette erreur la :

Total : 3
search.js:16 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'username')
    at search.js:16:31
    at Array.forEach (<anonymous>)
    at search_ (search.js:15:15)

Et voici le nouveau code js:

async function search_(){
    const response = await fetch('http://localhost/disc/user/user-list/');
    const json = await response.json();

    console.log('Total : ' + json.numberOfUser);
    
    json.user.forEach((user) => {
        console.log(user.user.username);
    });

}

jordane45 Messages postés 38347 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 décembre 2024 4 719 > firpic Messages postés 90 Date d'inscription jeudi 3 juin 2021 Statut Membre Dernière intervention 20 décembre 2022
27 févr. 2022 à 18:55

Tu as 5 lignes de code... Tu devrais être capable de la voir...
Mais bon.. devant le mot forEach

Nan, j'ai renvoyé un message comme quoi je l'avais vu

Discussions similaires

Comment faire le symbole coeur vide/coeur blanc

le frigo ne marche pas....

Formaté mais pas de connexion Internet ?

Internat nourriture

Comment faire les coeur vide sur FB