Supprimer une ligne d'un tableau JSON

Fermé
Frank_N Messages postés 42 Date d'inscription dimanche 3 juin 2018 Statut Membre Dernière intervention 8 août 2019 - 26 juin 2019 à 13:35
Frank_N Messages postés 42 Date d'inscription dimanche 3 juin 2018 Statut Membre Dernière intervention 8 août 2019 - 26 juin 2019 à 17:57
Bonjour,

Cela fais plusieurs jours que je bloque complétement pour supprimer une ligne d'un tableau qui est crée "dynamiquement" ..
Je m'éxplique..
Il y a du JS et du PHP..
En gros un utilisateur arrive sur la page et peut rentrer son nom, le titre de son lien et l'url du lien
quand il appuis sur "ajouter" le code javascript rentre en action et envoie la requête suivante :

// Fonction permettant d'envoyer le lien au serveur
function envoyerLien(lien){
    ajaxPost("http://franknangy.com/liens/liens/post_json.php", lien, function(reponse) {
          update();
        },
        true);
}

// Fonction permettant d'afficher le dernier lien envoyé sur le serveur
function afficherLiens(nLink){
    ajaxGet(nLink, function (reponse) {
        var liens = JSON.parse(reponse);
        liens.forEach(function (lien) {
            var newLink = creerElementLien(lien);
            contenuElt.prepend(newLink, contenuElt.firstChild)
        });
    });
}

// Met à jour les deux tableau de liens
function update (){
    //on vide
   contenu.innerHTML = "";

   //On remet à jour
       listeLiens.forEach(function (lien) {
           var elementLien = creerElementLien(lien);
           contenu.appendChild(elementLien);
       });
        afficherLiens(nLink);
}


Le HTML est crée aussi à partir de JS
Le fichier post_json.php ressemble à ça :

<?php

// Converti la valeur reçue en array php
$dataLink = json_decode(file_get_contents('newLink.json'), true);
if (is_null($dataLink)){
    $dataLink = [];
}

// Récupère données utilisateur
$dataRaw = file_get_contents('php://input');

// Transforme les données en objet php
$data = json_decode($dataRaw);

//on va tester si la variable $data est un tableau
if(is_array($data)){
    //Si c'est un tableau on va utiliser array_merge pour fusionner les deux tableaux
    array_merge($dataLink,$data);
}else{
    //$data n'est pas un tableau, mais un objet php correspondant à l'objet JSON, on l'ajoute comme nouvelle ligne dans le tableau.
    array_push($dataLink, $data);
}

$encodedDataLink = json_encode($dataLink, true);

file_put_contents("newLink.json", $encodedDataLink);


Et ce que j'aimerais et que je n'arrive pas du tout à faire, c'est que l'utilisateur puisse supprimer une des lignes qu'il a crée, donc déjà, sur chaque nouveau lien crée il y a un bouton "supprimer" qui est disponible, il faudrait que j'arrive a selectionner le bon index, supprimer la ligne corréspondante, réindexer le tableau, mettre à jour le tableau...
Je pense qu'il faut sûrement une boucle pour parcourir le tableau suivi d'un "unset" mais je n'ai pas du tout la logique derrière....
Si quelqu'un peut m'aider s'il vous plait ? (vous pouvez voir l'exemple en direct à l'adresse suivante : http://franknangy.com/liens/html/liensweb.html j'avais déjà tenté de creer un bouton pour supprimer toutes les entrées d'un coup juste avec JS mais ça n'a pas marché non plus...)

Configuration: Windows / Firefox 67.0
A voir également:

1 réponse

jordane45 Messages postés 38156 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 4 mai 2024 4 655
26 juin 2019 à 14:00
Bonjour,

Lorsque tu génères l'affichage des liens sur ta page (dans ton foreach...) tu peux savoir à quelle "index" il est dans le tableau...
liens.forEach(function (lien,index) {

Et donc, lorsque tu veux supprimer un lien.. il suffit de faire un unset de l'item correspondant...
unset($dataLink[$index]);

0
Frank_N Messages postés 42 Date d'inscription dimanche 3 juin 2018 Statut Membre Dernière intervention 8 août 2019
26 juin 2019 à 14:34
Merci pour ta réponse, mais je ne vois pas comment l'index sera lu dans le php, il me faut sûrement une boucle aussi de ce côté là ? Et à quel moment dans ma boucle forEach j'utilise le parametre de l'index pour le connaitre ? Désolé mais je suis encore débutant donc il me faut quelques pistes supplémentaires
0
jordane45 Messages postés 38156 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 4 mai 2024 4 655 > Frank_N Messages postés 42 Date d'inscription dimanche 3 juin 2018 Statut Membre Dernière intervention 8 août 2019
26 juin 2019 à 17:28
Ca dépend comment tu souhaites déclencher la suppression.....
Si sur chaque ligne tu as un bouton de suppression.... il faut, lors de l'appui sur ce bouton lui envoyer ces "id"
0
Frank_N Messages postés 42 Date d'inscription dimanche 3 juin 2018 Statut Membre Dernière intervention 8 août 2019
26 juin 2019 à 17:57
C'est bien ça le problème, comment récupérer ces "id" d'abord ? sachant qu'un lien est crée de la sorte :
function creerElementLien(lien) {
    var titreElt = document.createElement("a");
    titreElt.href = lien.url;
    titreElt.style.color = "#428bca";
    titreElt.style.textDecoration = "none";
    titreElt.style.marginRight = "5px";
    titreElt.appendChild(document.createTextNode(lien.titre));

    var urlElt = document.createElement("span");
    urlElt.appendChild(document.createTextNode(lien.url));

    // Cette ligne contient le titre et l'URL du lien
    var ligneTitreElt = document.createElement("h4");
    ligneTitreElt.style.margin = "0px";
    ligneTitreElt.appendChild(titreElt);
    ligneTitreElt.appendChild(urlElt);

    // Cette ligne contient l'auteur
    var ligneDetailsElt = document.createElement("span");
    ligneDetailsElt.appendChild(document.createTextNode("Ajouté par " + lien.auteur));

    // Bouton de suppression
    var btnElt = document.createElement("button");
    btnElt.appendChild(document.createTextNode("Supprimer le lien"));
    btnElt.style.marginLeft = "270px";

    var divLienElt = document.createElement("div");
    divLienElt.classList.add("lien");
    divLienElt.appendChild(ligneTitreElt);
    divLienElt.appendChild(ligneDetailsElt);
    divLienElt.appendChild(btnElt);

    return divLienElt;
}
0