JS fetch est vide, aucune donner retourner

Résolu

firpic Messages postés 90 Date d'inscription Statut Membre Dernière intervention -
firpic Messages postés 90 Date d'inscription Statut Membre Dernière intervention - 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 pc - Guide
Comment retourner une video - Guide
Supprimer page word vide - Guide
Caractere vide - Guide
Coeur vide ✓ - Forum Réseaux sociaux

5 réponses

Réponse 1 / 5

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

Bonjour,

Que donne ton console.log ?

firpic Messages postés 90 Date d'inscription Statut Membre Dernière intervention 1

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 Statut Membre Dernière intervention 527

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 Statut Membre Dernière intervention 1

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 Statut Membre Dernière intervention 1

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 Statut Membre Dernière intervention 527 > firpic Messages postés 90 Date d'inscription Statut Membre Dernière intervention

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 Statut Membre Dernière intervention 1

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 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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 Statut Membre Dernière intervention 1 > jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention

Merci, mon code était assez archaïque.

Réponse 4 / 5

Pitet Messages postés 2826 Date d'inscription Statut Membre Dernière intervention 527

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 Statut Membre Dernière intervention 1

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)

Pitet Messages postés 2826 Date d'inscription Statut Membre Dernière intervention 527 > firpic Messages postés 90 Date d'inscription Statut Membre Dernière intervention

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 Statut Membre Dernière intervention 1 > Pitet Messages postés 2826 Date d'inscription Statut Membre Dernière intervention

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 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

Bonjour,
Tu fais

  json.users.

Alors que ton json contient

user: [

firpic Messages postés 90 Date d'inscription Statut Membre Dernière intervention 1

Bonjour,

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

json.users.

firpic Messages postés 90 Date d'inscription Statut Membre Dernière intervention 1 > firpic Messages postés 90 Date d'inscription Statut Membre Dernière intervention

Nan desole, je vien de remarque ou etait ce

firpic Messages postés 90 Date d'inscription Statut Membre Dernière intervention 1

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 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752 > firpic Messages postés 90 Date d'inscription Statut Membre Dernière intervention

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

firpic Messages postés 90 Date d'inscription Statut Membre Dernière intervention 1 > jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention

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

Discussions similaires

le frigo ne marche pas....

Internat nourriture

Comment faire les coeur vide sur FB

raccourci coeur blanc

taxe foncière pour locataire

Votre réponse

Discussions similaires