Repeating rows in PHP and AJAX

Question

View Grades Page Example

So as the title suggests, I have a problem with PHP and AJAX giving me repeating rows. I just want to display the total no. of units and the gpa but for every subject there is, it adds an extra row

AJAX:

$.ajax({
    traditional: true,
    url: "getGrades.php",
    method: "GET",
    data: {
        id: id,
        semester: semester,
        year: year
    },
    dataType: "JSON",
    success: function(data){
        $("#gradeBody").children().remove();
        $("#gradeFoot").children().remove();
        console.log(data);
        $("#gradeLoad").css("display", "block");
        for(var i = 0; i < data.length; i++){

            $("#gradeTable tbody").append('<tr class = "course"><td class = "course">'+data[i].subjectCode+'</td><td class = "course">'+data[i].subjectName+'</td>><td class = "course">'+data[i].units+'</td></td>><td class = "course">'+data[i].mg+'</td></td>><td class = "course">'+data[i].units+'</td></tr>');

            $("#gradeTable tfoot").append('<tr class = "course"><td class = "course"></td><td class = "course"></td>><td class = "course"><strong>Total No. of Units: </strong>'+data[i].un+'</td></td>><td class = "course"><strong>GPA</strong></td></td>><td class = "course">'+data[i].ave+'</td></tr>');
        }

    }

});

PHP:

[<?php
require("connect.php");
$id = $_GET\['id'\];
$year = $_GET\['year'\];
$semester = $_GET\['semester'\];
$query = "
        SELECT *, SUM(s.units) AS un, ROUND(AVG(g.fg), 2) AS ave
        FROM subjectschedule AS ss
        JOIN subject AS s 
        ON s.subjectID = ss.subjectid
        JOIN grados as g
        ON g.subjectid = s.subjectID
        WHERE g.studentid = '$id'
        AND ss.academic_year_start = '$year'
        AND ss.semester = '$semester'
        GROUP BY ss.subSchedID

        ";
$retval = mysqli_query($db, $query);
$data = array();


while($row = mysqli_fetch_assoc($retval)){
    $data\[\] = $row;
}
echo json_encode($data);

?>

The image I uploaded shows the current result, how do I prevent this from repeating?

Answer 1

try this out.I guess u need to put the footer out of the for loop.

$.ajax({
            traditional: true,
            url: "getGrades.php",
            method: "GET",
            data: {
                id: id,
                semester: semester,
                year: year
            },
            dataType: "JSON",
            success: function(data){
                $("#gradeBody").children().remove();
                $("#gradeFoot").children().remove();
                console.log(data);
                $("#gradeLoad").css("display", "block");
                for(var i = 0; i < data.length; i++){
                    $("#gradeTable tbody").append('<tr class = "course"><td class = "course">'+data[i].subjectCode+'</td><td class = "course">'+data[i].subjectName+'</td>><td class = "course">'+data[i].units+'</td></td>><td class = "course">'+data[i].mg+'</td></td>><td class = "course">'+data[i].units+'</td></tr>');
                }
                    $("#gradeTable tfoot").append('<tr class = "course"><td class = "course"></td><td class = "course"></td>><td class = "course"><strong>Total No. of Units: </strong>'+data[i].un+'</td></td>><td class = "course"><strong>GPA</strong></td></td>><td class = "course">'+data[i].ave+'</td></tr>');


            }

    });

Answer 2

You can simply do it by appending the Sum and GPA at the end after the loop like this

$.ajax({
  traditional: true,
  url: "getGrades.php",
  method: "GET",
  data: {
    id: id,
    semester: semester,
    year: year
  },
  dataType: "JSON",
  success: function(data) {
    $("#gradeBody").children().remove();
    $("#gradeFoot").children().remove();
    console.log(data);
    $("#gradeLoad").css("display", "block");
    for (var i = 0; i < data.length; i++) {

      $("#gradeTable tbody").append('<tr class = "course"><td class = "course">' + data[i].subjectCode + '</td><td class = "course">' + data[i].subjectName + '</td>><td class = "course">' + data[i].units + '</td></td>><td class = "course">' + data[i].mg + '</td></td>><td class = "course">' + data[i].units + '</td></tr>');


    }
    $("#gradeTable tfoot").append('<tr class = "course"><td class = "course"></ td > < td class = "course" > < /td>><td class = "course"><strong>Total No. of Units: </strong > ' + data[0].un + ' < /td></td >> < td class = "course" > < strong > GPA < /strong></td > < /td>><td class = "course">' + data[0].ave + '</td > < /tr>');


  }

});