Supprimer une ligne d'un tableau JSON
Frank_N
Messages postés
43
Statut
Membre
-
Frank_N Messages postés 43 Statut Membre -
Frank_N Messages postés 43 Statut Membre -
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 :
Le HTML est crée aussi à partir de JS
Le fichier post_json.php ressemble à ça :
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...)
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:
- Supprimer une ligne d'un tableau JSON
- Supprimer rond bleu whatsapp - Guide
- Tableau word - Guide
- Supprimer une page word - Guide
- Trier un tableau excel - Guide
- Tableau ascii - Guide
1 réponse
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...
Et donc, lorsque tu veux supprimer un lien.. il suffit de faire un unset de l'item correspondant...
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]);
Si sur chaque ligne tu as un bouton de suppression.... il faut, lors de l'appui sur ce bouton lui envoyer ces "id"
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; }