JS fetch est vide, aucune donner retourner Résolu

Question

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=`

${user.username}

`; 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"}]}

jordane45 · Answer

Bonjour,

Que donne ton console.log ?

Pitet · Answer

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 · Answer

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: $row['username'], "icon"=>$row['icon']); echo json_encode($arr); if($d<=$n){ echo ','; } $d=$d+1; } echo ']}'; ?>

Pitet · Answer

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);
    });
}

jordane45 · Answer

Bonjour,
Tu fais

json.users.

Alors que ton json contient

user: [

JS fetch est vide, aucune donner retourner

5 réponses

Discussions similaires

Newsletters