tolong di bantu, fetch data dari local storage ke table html tapi malah undifined

form.html

<!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">
    <title>Document</title>
    <link rel="stylesheet" href="style/styleRegis.css">
    <script src="js/jquery-3.6.1.min.js"></script>
</head>
<body>
    <div class="regis">
    <form action="">
        <label for="name">Name</label> <input type="text" name="name" id="name"><br>
        <label for="emailId">Email Id</label> <input type="email" name="emailId" id="emailId"><br>
        <label for="PhoneNumber">Phone Number</label> <input type="text" name="PhoneNumber" id="PhoneNumber"><br>
        <label for="password">password</label> <input type="password" name="password" id="password">
        <button type="submit" onclick="saveData()">Submit</button>
    </form>
    </div>
</body>
</html>

saveData function

function saveData(){
let users=localStorage.getItem("users");
users=JSON.parse(users);
if(users == null){
    users = [];
}

    var user = JSON.stringify( {
        Name : document.getElementById("name").value,
        email : document.getElementById("emailId").value,
        PhoneNumber : document.getElementById("PhoneNumber").value,
        password : document.getElementById("password").value,
    })
    users.push(user);
    localStorage.setItem("users",JSON.stringify(users));
}

localstorage

index.html

<!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">
    <title>admin</title>
    <script src="js/jquery-3.6.1.min.js"></script>

</head>
<body>
    <table border="1">
        <thead>
          <tr>
            <th> nama </th>
            <th> email </th>
            <th> Phone Number </th>
            <th> action </th>
          </tr>
        </thead>
        <tbody id="body">
        </tbody>
      </table>

      <script>
        var users= JSON.parse( localStorage.getItem('users' ));
        console.log(users);

        $.each(users, function(key, value){
          $('tbody').append(`<tr>
          <td class="name">${users.Name}</td>
          <td class="email">${users.email}</td>
          <td class="PhoneNumber">${users.PhoneNumber}</td>
          <td> <a href="">edit</a> <a href="">delete</a></td>
        </tr>`)
    })
        </script>
</body>
</html>

outputnya

tanya.png6.67 KB

html javascript

@fikriyasir

1 Kontribusi 0 Poin

Dipost 1 tahun yang lalu

Tanggapan

Sesuaikan judul dengan pertanyaan kamu ya. Baca aturan main cara membuat judul yang baik

@hilmanski

kalau kamu console hasil dari ini apa? users=JSON.parse(users);

@hilmanski

Belum ada Jawaban. Jadi yang pertama Jawaban

Kelas Premium! Belajar bikin website dari nol sekarang

tolong di bantu, fetch data dari local storage ke table html tapi malah undifined

Kelas Premium!
Belajar bikin website dari nol sekarang