Accessing JSON value results in undefined

I have the following JSON structure:

{

"headers":[
        {"title": "Action", "width": 3, "class": "centeralign"},
        {"title": "ID", "width": 4, "class": "leftAlign"},
        ..
        ..
    ],
"rows": [
            {"cells": [
                {"data": "Edit", "width": 3, "class": "centeralign"},
                {"data": "030194"},
                ..
                ..
           ]}
        ]
}

For every "data" in JSON, I'm dynamically generating a table cell. This is what I have:

$.each(response.rows, function(index, rows){

    $("tr#columnData").append("<td>" + rows.cells.data +开发者_如何学运维 "</td>");
});

rows.cells.data is resulting in "undefined".

What am I doing wrong?

---

cells is an array in your JSON structure, so you need to loop through it:

$.each(response.rows, function(index, row) {
    $.each(row.cells, function() {
        $('tr#columnData').append('<td>' + this.data + '</td>');
    });
});