从php的表的所有行接收JSON编码数据，并使用ajax在html表中显示

Question

I am struggling from a few hours but not getting to any point,neither i am able to find any proper solution for this. I am trying to retrieve json data(includes rows from table) and show in html table using ajax .The point where i am now is it only show one row when i use the following code but give errors when i try to parse data from all rows:

PHP

    if (isset($_POST['groups_per_table'])){ 
        try{
        $stmt = $db_con->prepare("SELECT * FROM groups_permissions");
        $stmt->execute();
        $response = array();            
        while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
            $response['id'] = $row['id'];
            $response['group'] = $row['group'];
            $response['restricted_pages'] = $row['restricted_pages'];
            $response['restricted_permissions'] = $row['restricted_permissions'];               
            echo json_encode($response);
        }
    }       
    catch(PDOException $e){
        echo $e->getMessage();
    }
}`

if i use in the query WHERE id=1 (ie the firt row only)then it display the data correctly:

JS

$( document ).ready(function() {
groups_per_table();
function groups_per_table(){
    $.ajax({
        type: "POST",
        url  : '../core/ajaxpdo.class.php',
        data: 'groups_per_table='+'givedata',
        success: function (response) {
            var gp_data = $.parseJSON(response);
            console.log(response);                          
            $("#gp_body").html('<tr><td class="text-center"><label id="'+gp_data.id+'" class="csscheckbox csscheckbox-primary"><input type="checkbox"><span></span></label></td><td><strong>'+gp_data.group+'</strong></td><td>'+gp_data.restricted_pages+'</td><td>'+gp_data.restricted_permissions+'</td><td class="text-center"><a href="javascript:void(0)" data-toggle="tooltip" title="" class="btn btn-effect-ripple btn-sm btn-success" style="overflow: hidden; position: relative;" data-original-title="Edit User"><span class="btn-ripple animate" style="height: 32.2917px; width: 32.2917px; top: -6.81251px; left: 0.3229px;"></span><i class="fa fa-pencil"></i></a><a href="javascript:void(0)" data-toggle="tooltip" title="" class="btn btn-effect-ripple btn-sm btn-danger" style="overflow: hidden; position: relative;" data-original-title="Delete User"><i class="fa fa-times"></i></a></td></tr>');                
        },
        error: function() {
            alert('There is an error!');
        }
    });
    return false;       
}});

I want to show all rows from db in table,it gives following error in console:

CONSOLE LOG

Uncaught SyntaxError: Unexpected token { in JSON at position 76
at Function.parse [as parseJSON] (<anonymous>)
at Object.success (groups-permissions.php:968)
at u (jquery-3.3.1.min.js:2)
at Object.fireWith [as resolveWith] (jquery-3.3.1.min.js:2)
at k (jquery-3.3.1.min.js:2)
at XMLHttpRequest.<anonymous> (jquery-3.3.1.min.js:2)

THE JSON DATA

{"id":"1","group":"group","restricted_pages":"","restricted_permissions":""}{"id":"2","group":"newgroup","restricted_pages":"b","restricted_permissions":"f"}{"id":"3","group":"asd","restricted_pages":"a,b,c,d","restricted_permissions":"e,f,g,h"}

Answer 1

Make a loop to put your data in the DOM:

 var testObject = [{ "id": "1", "group": "group", "restricted_pages": "", "restricted_permissions": "" }, { "id": "2", "group": "newgroup", "restricted_pages": "b", "restricted_permissions": "f" }, { "id": "3", "group": "asd", "restricted_pages": "a,b,c,d", "restricted_permissions": "e,f,g,h" } ]; function putdataToDom(gp_data) { $("#gp_body").html(''); for (var i = 1; i < gp_data.length; i++) { $("#gp_body").append('<tr><td class="text-center"><label id="' + gp_data[i].id + '" class="csscheckbox csscheckbox-primary"><input type="checkbox"><span></span></label></td><td><strong>' + gp_data[i].group + '</strong></td><td>' + gp_data[i].restricted_pages + '</td><td>' + gp_data[i].restricted_permissions + '</td><td class="text-center"><a href="javascript:void(0)" data-toggle="tooltip" title="" class="btn btn-effect-ripple btn-sm btn-success" style="overflow: hidden; position: relative;" data-original-title="Edit User"><span class="btn-ripple animate" style="height: 32.2917px; width: 32.2917px; top: -6.81251px; left: 0.3229px;"></span><i class="fa fa-pencil"></i></a><a href="javascript:void(0)" data-toggle="tooltip" title="" class="btn btn-effect-ripple btn-sm btn-danger" style="overflow: hidden; position: relative;" data-original-title="Delete User"><i class="fa fa-times"></i></a></td></tr>'); } } putdataToDom(testObject); $(document).ready(function() { groups_per_table(); function groups_per_table() { $.ajax({ type: "POST", url: '../core/ajaxpdo.class.php', data: 'groups_per_table=' + 'givedata', success: function(response) { var gp_data = $.parseJSON(response); console.log(response); putdataToDom(gp_data); }, error: function() { alert('There is an error!'); } }); return false; } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="gp_body" border=1></table> 

Answer 2

This is SyntaxError in your JSON, which means your JSON is not a valid JSON, your json results should be something like this:

[{
    "id": "1",
    "group": "group",
    "restricted_pages": "",
    "restricted_permissions": ""
}, {
    "id": "2",
    "group": "newgroup",
    "restricted_pages": "b",
    "restricted_permissions": "f"
}, {
    "id": "3",
    "group": "asd",
    "restricted_pages": "a,b,c,d",
    "restricted_permissions": "e,f,g,h"
}]

So what I suggest you to do is to add another array, you can call it $json and push your data to it like so:

Server side (PHP)

// ...
$response = array();
$json = array();  
while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
    $response['id'] = $row['id'];
    $response['group'] = $row['group'];
    $response['restricted_pages'] = $row['restricted_pages'];
    $response['restricted_permissions'] = $row['restricted_permissions'];
    array_push($json, $response);
}
echo json_encode($json);
// ...

Client side (JavaScript)

$( document ).ready(function() {

    groups_per_table();

    function groups_per_table(){

        $.ajax({

            type: "POST",
            url  : '../core/ajaxpdo.class.php',
            data: 'groups_per_table='+'givedata',
            success: function (response) {

                var gp_data = $.parseJSON(response);

                for(var i = 0; i < gp_data.length; i++) {

                    $("#gp_body").html('<tr><td class="text-center"><label id="'+gp_data[i].id+'" class="csscheckbox csscheckbox-primary"><input type="checkbox"><span></span></label></td><td><strong>'+gp_data[i].group+'</strong></td><td>'+gp_data[i].restricted_pages+'</td><td>'+gp_data[i].restricted_permissions+'</td><td class="text-center"><a href="javascript:void(0)" data-toggle="tooltip" title="" class="btn btn-effect-ripple btn-sm btn-success" style="overflow: hidden; position: relative;" data-original-title="Edit User"><span class="btn-ripple animate" style="height: 32.2917px; width: 32.2917px; top: -6.81251px; left: 0.3229px;"></span><i class="fa fa-pencil"></i></a><a href="javascript:void(0)" data-toggle="tooltip" title="" class="btn btn-effect-ripple btn-sm btn-danger" style="overflow: hidden; position: relative;" data-original-title="Delete User"><i class="fa fa-times"></i></a></td></tr>');
                }

            },
            error: function() {
            alert('There is an error!');
            }
        });

        return false;
    }
});