Как удалить строку таблицы и данные, с которыми она связана в Json файле? - PullRequest
Новая
       14

Как удалить строку таблицы и данные, с которыми она связана в Json файле?

0 голосов
/ 01 марта 2020

Я новичок в NodeJs / express / топор ios / мопс. В настоящее время я застрял в месте, где мне нужно удалить строку таблицы данных, используя ax ios .delete.

(Supprimer означает Удалить) https://i.imgur.com/3ftIcF2.png

На этом изображении мне нужно нажать «supprimer», и он должен удалить свою строку таблицы и данные, связанные с этой строкой в ​​файле json.

Мой самый большой проблема в части кода ax ios, как мне управлять динамическими c кнопками / строками для вызова ax ios .delete? Если я жестко закодировал название кнопки и использую селектор запросов, чтобы найти его, он работает, и в консоли отображается сообщение: "console.log (" On delete! ");" но кроме этого, я абсолютно не знаю, как выйти из этой ситуации.

Мне нужно сделать эту динамику c: const deleteButton = document.querySelector("#deleteButton");

, чтобы работать с этим: deleteButton.addEventListener("click", event => {}

и вызвать это 

router.delete("/", (req, res) => {
  ███delete a row + data in json███
});

Извините, если я не достаточно ясно, я не знаю точных слов для моих вопросов для начала. Но не стесняйтесь задавать вопросы. 

//█████████THIS IS THE PUG CODE FOR ADDING THE BUTTONS "DELETE"█████████\\

tr(id="row"+task.id)
    th=task.id
    td=task.title
    td=task.description
    td 
        button(id='deleteButton'+task.id class="btn btn-outline-danger" ) Supprimer

//█████████THIS IS THE AXIOS PART FOR ADDING / DELETING USING BUTTONS█████████\\
window.addEventListener("DOMContentLoaded", event => {
  const addButton = document.querySelector("#addButton");
  const description = document.querySelector("#description");
  const title = document.querySelector("#title");
  const tableBody = document.querySelector("#tableBody");
  const deleteButton = document.querySelector("#deleteButton");

  addButton.addEventListener("click", event => {
    axios
      .post("/tasks", {
        title: title.value,
        description: description.value
      })
      .then(res => {
        tableBody.insertAdjacentHTML("afterbegin", res.data);
        console.log(res);
      })
      .catch(err => {
        console.log(err);
      });
  });

  deleteButton.addEventListener("click", event => {
    axios
      .delete("/tasks", {})
      .then(res => {
        console.log(res);
      })
      .catch(err => {
        console.log(err);
      });
  });
});

//█████████THIS IS THE CODE TRIGGERED BY THE BUTTON CLICKED (add or delete)█████████\\
router.post("/", (req, res) => {
  newID = currentID[0].id + 1;
  //console.log(newID);

  const newTask = {
    id: newID,
    title: req.body.title,
    description: req.body.description
  };
  const updateID = {
    id: 55
  };

  res.render("includes/task", { task: newTask });

  tasks.push(newTask);

  fs.readFile(pathDuFichier, "utf8", (err, data) => {
    if (err) {
      console.log("File read failed:", err);
      return;
    }

    jsonData = JSON.parse(data);
    jsonData.task.push(newTask);
    jsonData.compteur[0].id = newID;
    json = JSON.stringify(jsonData, null, 4);
    console.log(json);


    fs.writeFile(pathDuFichier, json, err => {
      if (err) {
        console.log("Error writing file", err);
      } else {
        console.log("Successfully wrote file" + json);
      }
    });
  });

  //---------------------------------------------

  //██████████████████████████████████████████████████████


});

router.delete("/", (req, res) => {
  console.log("On delete!");
});

//█████████THIS IS THE ACTUAL JSON FILE I HAVE█████████\\

{
  "task": [
    {
      "id": 1,
      "title": "Balayeuse",
      "description": "Passer la balayeuse demain"
    },
    {
      "id": 2,
      "title": "Plancher",
      "description": "Laver le plancher ce soir"
    }
  ],
  "compteur": [
    {
      "id": 14
    }
  ]
}
...