2

I am trying to populate a HTML table using JQUERY, AJAX and PHP code. When I run my code, my table is displayed but it is filled with 'undefined'.

I have three pieces of code. Here is my HTML and jQuery:

var integer = $("#transfers_in").attr("name");
alert("integer: " + integer);
$.ajax('includes/test.php', {
  type: 'POST', // http method
  data: {
    dataType: 'json',
    myData: integer
  }, // data to submit
  success: function(response) {
    var len = response.length;
    for (var i = 0; i < len; i++) {
      var name = response[i].name;
      var amount = response[i].amount;
      var tr_str = "<tr>" +
        "<td align='center'>" + (i + 1) + "</td>" +
        "<td align='center'>" + name + "</td>" +
        "<td align='center'>" + amount + "</td>" +
        "</tr>";

      $("#money_in").append(tr_str);
    }
  }
});
<table id="money_in">
  <tr>
    <th>Name</th>
    <th>Amount(Million £)</th>
  </tr>
</table>

and here is my PHP Code:

<?php

if (isset($_POST['myData'])) {
    $integer = $_POST['myData'];

    if ($integer === "1"){
        include 'db_connection.php';

        // Create connection
        $conn = new mysqli($servername, $username, $password, $dbname);
        // Check connection
        if ($conn->connect_error) {
            die("Connection failed: " . $conn->connect_error);
        }

        $return_arr = array();
        $query = "SELECT * FROM `money_in_19_20`";
        $result = mysqli_query($conn,$query);

        while($row = mysqli_fetch_array($result)){
            $name = $row['Name'];
            $amount = $row['Amount'];

            $return_arr[] = array("Name" => $name,
                              "Amount" => $Amount);
        }

        // Encoding array in JSON format
        echo json_encode($return_arr);
    }
}

The Json data is being received in the format of

{"Name":"Hazard","Amount":"103000000"}

2
  • 1
    Hi , you didn't parse your json i.e : JSON.parse(response); inside succes function then use same or set the dataType to just 'json' to have it converted automatically. Commented Dec 20, 2020 at 13:37
  • Read up a bit on jQuery AJAX and how to put parameters in the roght place learn.jquery.com/ajax/jquery-ajax-methods Commented Dec 20, 2020 at 13:40

1 Answer 1

1

You are returning object as Name,Amount and checking as name,amount

var name = response[i].name;
var amount = response[i].amount;

it should be

var name = response[i].Name;
var amount = response[i].Amount;
Sign up to request clarification or add additional context in comments.

7 Comments

Thank you very much for your help. This has populated my table. However, now if I click on the button twice. The data will now appear twice in the table. Is there anyway to sort this issue? Thanks again. I am very grateful for your help
Instead jQuery .append(), you could use .html()
I have tried using .html() however that then only adds the bottom row of data instead of all it. Thanks for the suggestion though.
var html=""; for (var i = 0; i < len; i++) { var name = response[i].Name; var amount = response[i].Amount; var tr_str = "<tr>" + "<td align='center'>" + (i + 1) + "</td>" + "<td align='center'>" + name + "</td>" + "<td align='center'>" + amount + "</td>" + "</tr>"; html+=tr_str; //$("#money_in").append(tr_str); } $("#money_in").html(html);
try this <table> <thead> <tr> <th>Name</th> <th>Amount(Million £)</th> </tr> </thead> <tbody id="money_in"> </tbody> </table>
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.