Home PHP ajax response working but there is "undefined" text in the beginning of the div

Questions

PHP ajax response working but there is "undefined" text in the beginning of the div

June 23, 2022

So, i want to populate div with id "listberita" with html code from ajax response.

Here is the php code where contain div with "listberita" id

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Jabary - Website Budaya Jabar</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://kit.fontawesome.com/f8535c9b97.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="berita.css">

</head>

<body>
    <!-- Navbar  -->
    <?php include 'php/navbar.php'; ?>




    <div class="container my-5">
        <div class="kategoricaption mb-5">
            <div class="row">
                <div class="col">
                    <h1 class="text-center fw-bold judulkategori">Berita</h1>
                    <hr class="mx-auto" style="width:10%; background-color: #f49f16;">

                </div>
            </div>

        </div>
        <div class="card-group vgr-cards" id="listberita">
        
        </div>
    </div>

    <!-- footer -->
    <?php include 'php/footer.php'; ?>

    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
    <script src="js/bootstrap.bundle.min.js "></script>
    <script src="berita.js"></script>

    
</body>

</html>

Here is my ajax js code

$(this).ready(function() {
    getNews()

    function getNews() {
        $.ajax({
            type: "GET",
            url: "_php/getBerita.php",
            dataType: "JSON",
            success: function(response) {
                var kode;
                $.each(response, function(i, obj) {
                    console.log(kode)
                    kode += '<div class="card kartu pb-3"><div class="card-img-body"><img class="card-img" src="img/Berita/' + obj.gambar_berita + '" alt="Card imagecap"></div><div class="card-body"><h4 class="card-title">' + obj.nama_berita + '</h4><p class="card-text">' + obj.keterangan_berita.substring(0, 250) + '....</p><a href="isiBerita.php?id=' + obj.id + '#disqus_thread" class="btn btn-success mt-5">Read More</a></div></div>'
                    $('#listberita').html(kode);
                })

            }
        });
    }

})

Here is my php code where ajax request to (php_/getBerita.php)

<?php 
  include '../koneksi.php';

    $result = $conn->query("SELECT * from tbl_berita");
    while($row=$result->fetch_assoc()){
        $data[]=$row;
    }
    echo json_encode($data);

?>

The code above is working, it’s return the data i want. But there is a problem.
Here is the problem

How to get rid the "undefined" thing on the beginning of div?

>Solution :

Try changing your var kode; to var kode = "";.

When you define the variable without initializing it, it will be undefined. And then your loop is appending text to an undefined variable. That’s probably why.