-2

I am trying to get all rows with same name from my MySQL database to my HTML table. So basically, my php script called getRequestToShow.php echoes value to .js file (which asks php script for values by using XMLHttpRequest). Then this .js file adds the rows in HTML table.

I am echoing MySQL rows from php like this:

$conn = new mysqli($servername, $username, $password, $db_name);

if ($conn->connect_error){
  die("Connection failed: " . $conn->connect_error);
}
$id = $_GET['id'];
$id = mysqli_real_escape_string($conn,$id);
$query = "SELECT * FROM `requests` WHERE `name`='$id'";
$result = mysqli_query($conn,$query);

while($row = mysqli_fetch_array($result)) {
echo json_encode(array('first'=>$row['name'],'second'=>$row['amount'],'third'=>$row['date'],'fourth'=>$row['state']));
}

..but I am able to get only from value from my database to HTML table. If there is more than one row with same name, it will not show anything on HTML table.

function showUser45(str) {
    var tableRef = document.getElementById('customers').getElementsByTagName('tbody')[0];
    var newRow   = tableRef.insertRow(tableRef.rows.length);
    var xmlhttp22 = new XMLHttpRequest();
    xmlhttp22.onreadystatechange = function() {
      if (xmlhttp22.readyState == 4 && xmlhttp22.status == 200) {
          if(xmlhttp22.responseText === "") {
            var newCell  = newRow.insertCell(0);
            var newText  = document.createTextNode("No earlier withdraws");
            newCell.appendChild(newText);  
        } else {
            var h2 = JSON.parse(xmlhttp22.responseText);
            var newCell1  = newRow.insertCell(0);
            var newText1  = document.createTextNode(h2.first); 
            var newCell2  = newRow.insertCell(1);
            var newText2  = document.createTextNode(h2.second); 
            var newCell3  = newRow.insertCell(2);
            var newText3  = document.createTextNode(h2.third); 
            newCell1.appendChild(newText1); 
            newCell2.appendChild(newText2);
            newCell3.appendChild(newText3);
            if (h2.fourth == 1) {
                var newCell4  = newRow.insertCell(3);
                var newText4  = document.createTextNode("Completed"); 
                newCell4.appendChild(newText4);
            } else {
                var newCell5  = newRow.insertCell(3);
                var newText5  = document.createTextNode("Pending"); 
                newCell5.appendChild(newText5);
            }  
        }
    }
    };
    xmlhttp22.open("GET","getRequestToShow.php/?id="+str,true);
    xmlhttp22.send();
}

and here's HTML table's HTML.

<table id="customers">
<thead>
<tr>
<th>Username</th>
<th>Amount</th>
<th>Date</th>
<th>State</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

Thanks in advance!

SCouto
  • 7,808
  • 5
  • 32
  • 49
Fisu
  • 5
  • 3

1 Answers1

0

Gather the data into an array and then make one echo

$res = [];
while($row = mysqli_fetch_array($result)) {
    $res[] = [ 'first'=>$row['name'], 
                'second'=>$row['amount'],
                'third'=>$row['date'],
                'fourth'=>$row['state']
            ];
}

echo json_encode($res);

Now you will have to change your JS to always expect an array or rows, so loop over the h2 var

RiggsFolly
  • 93,638
  • 21
  • 103
  • 149