循环JSON数据jQuery

时间:2017-03-14 12:30:27

标签: php jquery arrays json encode

我试图找到如何使用"字段"来循环使用JSON。阵列。您可以看到JSON数据有"字段":[" fullname"," email"]}如何使用jquery循环它?你现在可以看到它的硬编码:

rows = rows + '<td>'+value.fullname+'</td>';
rows = rows + '<td>'+value.email+'</td>';

我希望做类似的事情:

        $.each( data.fields, function( key, value ) {
          rows = rows + '<td>'+value.key+'</td>';
        });

JSON数据

{"data":[{"fullname":"Test User","email":"testuser@gmail.com"},{"fullname":"Karim Ali","email":"karimali831@googlemail.com"}],"total":2,"fields":["fullname","email"]}

表循环

function manageRow(data) {
    var rows = '';

    $.each( data, function( key, value ) {

        /*
        $.each( data.fields, function( key, value ) {
          alert( key + ": " + value );
        });
        */

        rows = rows + '<tr>';
        rows = rows + '<td>'+value.fullname+'</td>';
        rows = rows + '<td>'+value.email+'</td>';
        rows = rows + '<td data-id="'+value.id+'">';
        rows = rows + '<button data-toggle="modal" data-target="#edit-item" class="btn btn-primary edit-item">Edit</button> ';
        rows = rows + '<button class="btn btn-danger remove-item">Delete</button>';
        rows = rows + '</td>';
        rows = rows + '</tr>';
    });

    $("tbody").html(rows);
}

PHP fetch

    public function getUsers()
    {               

        $num_rec_per_page = 5;

        if (isset($_GET["page"])) { $page  = $_GET["page"]; } else { $page=1; };

        $start_from = ($page-1) * $num_rec_per_page;

        $fields = array("fullname", "email");


        $db = Db::getInstance();
        $req = $this->dbh->prepare("SELECT " . implode(", ", $fields) . " FROM users Order By id desc LIMIT $start_from, $num_rec_per_page");
        $req->execute();
        $data['data'] = $req->fetchAll(PDO::FETCH_ASSOC);
        //$data['total'] = $req->fetchColumn();
        $data['total'] = 2; // Total rows from table

        $data['fields'] = $fields;

        return json_encode($data);      

    }

感谢您的帮助!

2 个答案:

答案 0 :(得分:0)

您必须遍历data.datadata.fields

var rows = "";
$.each(data.data, function(_, element) {
    rows = rows + '<tr>';
    $.each(data.fields, function(__,key) {
        rows = rows + '<td>' + element[key] + '</td>';
    });
    rows = rows + '<td data-id="'+value.id+'">';
    rows = rows + '<button data-toggle="modal" data-target="#edit-item" class="btn btn-primary edit-item">Edit</button> ';
    rows = rows + '<button class="btn btn-danger remove-item">Delete</button>';
    rows = rows + '</td>';
    rows = rows + '</tr>';    
});

答案 1 :(得分:0)

我已经弄清楚了:

function manageRow(data) {
    var rows = '';

    $.each( data, function( key, value ) {
        rows = rows + '<tr>';

        $.each(data[1], function( key2, value2 ) {
            rows = rows + '<td>'+value[key2]+'</td>';
        });

        rows = rows + '<td data-id="'+value.id+'">';
        rows = rows + '<button data-toggle="modal" data-target="#edit-item" class="btn btn-primary edit-item">Edit</button> ';
        rows = rows + '<button class="btn btn-danger remove-item">Delete</button>';
        rows = rows + '</td>';
        rows = rows + '</tr>';
    });

    $("tbody").html(rows);
}