JS fetch est vide, aucune donner retourner
Résolu
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
Du coup la fonction
voici le code javascript :
et voici le fichier générer avec PHP :
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
forEachne 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"
}
]
}
5 réponses
-
ModérateurBonjour,
Que donne ton console.log ?
-
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)
-
-
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();-
-
-
@firpicOups 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é) ?
-
-
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 ']}'; ?>-
ModérateurAh 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 ?> -
@jordane45Merci, mon code était assez archaïque.
-
-
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); }); }-
-
@firpicAvec quel code js tu as cette erreur ? Et quel est le résultat json renvoyé par php ?
-
@PitetJ'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>
-
-
ModérateurBonjour,
Tu faisjson.users.
Alors que ton json contientuser: [
-
-
@firpicNan desole, je vien de remarque ou etait ce
-
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); }); } -
Modérateur@firpicTu as 5 lignes de code... Tu devrais être capable de la voir...
Mais bon.. devant le mot forEach -
@jordane45Nan, j'ai renvoyé un message comme quoi je l'avais vu
-
