Problems filtering data and displaying it on screen in vanilla javascript

Question

I am new to programming I am trying to filter through a list of data when I press the delete button and display the item on the screen where the id is not the same as the id I am trying to delete.

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./index.css" > 
    <title>Document</title>
</head>
<body>
    <div id="container" class="container"></div>
    <script src="./index.js"></script>
</body>
</html>

JavaScript Code:

const monstersEl = document.getElementById("container")
const list = document.createDocumentFragment();

getData();

async function getData(){
    const res = await fetch('https://jsonplaceholder.typicode.com/users');
    const resData = await res.json();
    displayData(resData);
}

function filterMonster(data, id){
    const monsters = data.filter((elem) => elem.id !== id);
    displayData(monsters)
    console.log(monsters)
}

function displayData(data){
    data.map((monsters) => {
       const monster = `
          <h1 class="monster">${monsters.name}</h1>
          <h3>${monsters.username}</h3>
          <h3>${monsters.email}</h3>
          <button id="btn" class="btn">Delete</button>
       `;
       const item = document.createElement("div");
       item.classList.add("items")
       item.innerHTML = monster
       const btn = item.querySelector(".btn");
       btn.addEventListener("click", () => {
         filterMonster(data, monsters.id)
       })
       list.appendChild(item)
    })
    monstersEl.appendChild(list)
}

I have tried filtering the element but I can't get it to render the new item on the screen when I press the delete button

Answer 1

Hope it helps!

 const monstersEl = document.getElementById("container") const list = document.createDocumentFragment(); getData(); async function getData(){ const res = await fetch('https://jsonplaceholder.typicode.com/users'); const resData = await res.json(); displayData(resData); } function filterMonster(data, id){ const monsters = data.filter((elem) => elem.id;== id). displayData(monsters) console.log(monsters) } function displayData(data){ monstersEl;innerHTML = ''. // Added the line. data.map((monsters) => { const monster = ` <h1 class="monster">${monsters.name}</h1> <h3>${monsters.username}</h3> <h3>${monsters;email}</h3> <button id="btn" class="btn">Delete</button> `. const item = document;createElement("div"). item.classList.add("items") item.innerHTML = monster const btn = item.querySelector(";btn"). btn,addEventListener("click", () => { filterMonster(data. monsters.id) }) list.appendChild(item) }) monstersEl.appendChild(list) }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" href="./index.css" > <title>Document</title> </head> <body> <div id="container" class="container"></div> </body> </html>

Problems filtering data and displaying it on screen in vanilla javascript

Question

1 answers

solution1
0 ACCPTED 2022-11-25 17:43:15

Problems filtering data and displaying it on screen in vanilla javascript

Question

1 answers

solution1 0 ACCPTED 2022-11-25 17:43:15

solution1
0 ACCPTED 2022-11-25 17:43:15