Passer une boucle dans du json_encode

Résolu

anthonyr_25 Messages postés 172 Statut Membre -
anthonyr_25 Messages postés 172 Statut Membre - 6 mai 2022 à 14:34

Bonjour,

Salut salut je voudrais passer une boucle php dans du json encode pour l'afficher avec js.

En fait j'ai une page html qui appele une function js dans laquelle il y as un fetch ->
Ce fetch fait appele à une page php ->
Cette page php insere ma donnée dans ma bdd ->
Puis elle boucle des éléments html en récupérant les données stocké dans ma table

Et bien j'aimerais afficher le resultat de cette boucle sur ma page html

voila ou je veux inserer mon résulat :

<section class="task">
            
</section>

voila mon fetch :

const value = document.querySelector('.box_text_add').value

    const form = new FormData()
    form.append("task_name_value", value)

    fetch('add.php', {
        method: "POST",
        body: form
    })
    .then( response => { return response.json() })
    .then(data=>{
        console.log(data);
    })

et voici mon php :

$data = $_POST['task_name_value'];

if ($data != null) {

    $etat = 2;
    $name = $data;

    $insert = $bdd->prepare('INSERT INTO task (task_name, task_etat) VALUES (?, ?)');
    $insert->execute(array($name, $etat));

} else {
    echo "error";
}

$recupProd = $bdd->query('SELECT * FROM task INNER JOIN task_not_complete ON task.id = task_not_complete.task_etat');
$valeurs = $recupProd->fetch();

while ($valeurs = $recupProd->fetch())
    {
        ?>
        <div class="box_task box">
            <div class="circle circle_all"><img src="complete.png" alt="" class="tchek"></div>
            <p class="box_task_text"><?= $valeurs['task_name'] ?></p>
        </div>
        <?php
    }
    
echo json_encode();

Alors j'ai bien essayer de mettre ma boucle dans le json_encode mais sa me le soulignait en rouge ...

Configuration: Windows / Chrome 101.0.4951.54

Afficher la suite

2 réponses

Réponse 1 / 2
Pitet Messages postés 2845 Statut Membre 530
Bonjour,

Si tu souhaites que ton fichier php retourne les données au format json, il ne faut pas créer de boucle pour générer du code html en php.
Tu peux directement envoyer toutes les valeurs (via fetchAll) avec la fonction json_encode :
```
$recupProd = $bdd->query('SELECT ...');
$valeurs = $recupProd->fetchAll();

echo json_enode($valeurs);
```
C'est ensuite dans le code JS qu'il faut parcourir les valeurs et générer le code html.

Si tu préfères générer le code html depuis le fichier php, dans ce cas il ne faut pas utiliser le format json.
1
1. anthonyr_25 Messages postés 172 Statut Membre 6
  
  Oui tout as fait je préfère générer le code depuis le php, donc je ne doit pas passer par le json c'est sa ?
  Donc depuis le js je ne fait pas de fetch ?
  Et depuis le php comment je renvoie les informations au js ?
  
  0
2. Pitet Messages postés 2845 Statut Membre 530 > anthonyr_25 Messages postés 172 Statut Membre
  
  En effet pas besoin de json, ton fichier PHP renvoie déjà du html.
  Tu peux utiliser fetch en js, mais il faut du coup utiliser la méthode response.text() au lieu de response.json() dans la première promise (le premier then).
  
  0
3. anthonyr_25 Messages postés 172 Statut Membre 6 > Pitet Messages postés 2845 Statut Membre
  
  ha j'ai déjà entendu parler de sa response.text()
  et donc ducoup le resultat correspond à data dans le js ?
  
  0
4. Pitet Messages postés 2845 Statut Membre 530 > anthonyr_25 Messages postés 172 Statut Membre
  
  C'est bien ca, ton log(data) devrait afficher le html renvoyé par ton PHP.
  Il te suffit ensuite de sélectionner ton élément .task (via querySelector par exemple) puis d'utiliser la propriété innerHTML pour insérer le contenu html dans cet élément.
  
  1
5. Pitet Messages postés 2845 Statut Membre 530 > anthonyr_25 Messages postés 172 Statut Membre
  
  Tu as une erreur 500 donc il s'agit d'une erreur sur le serveur.
  Essaye d'appeler ton fichier http://localhost/todo/vue.php dans ton navigateur et corrige les éventuelles erreurs pour t'assurer que ce fichier retourne bien le code html.
  
  1

yg_be Messages postés 23437 Date d'inscription Statut Contributeur Dernière intervention Ambassadeur 1 588

bonjour,
nous as-tu montré ce que tu as essayé?

anthonyr_25 Messages postés 172 Statut Membre 6

Non mais je peux te les montré, j'ai esayer deux choses mais je ne sais pas du tout comment faire je suis bloqué :

1er essaie :

function test_json(){
    return while ($valeurs = $recupProd->fetch())
    {
        ?>
        <div class="box_task box">
            <div class="circle circle_all"><img src="complete.png" alt="" class="tchek"></div>
            <p class="box_task_text"><?= $valeurs['task_name'] ?></p>
        </div>
        <?php
    };
}

    
echo json_encode(test_json());

2eme essaie :

echo json_encode(
    while ($valeurs = $recupProd->fetch())
    {
        ?>
        <div class="box_task box">
            <div class="circle circle_all"><img src="complete.png" alt="" class="tchek"></div>
            <p class="box_task_text"><?= $valeurs['task_name'] ?></p>
        </div>
        <?php
    }
);

Passer une boucle dans du json_encode

2 réponses

Discussions similaires

Newsletters