Json to html table. Cannot parse to table heading because json object's field name starts with capital?

Question

I am trying to use Dynatable library to convert json objects to html table.

PS: This problem also persists for other library such as DataTable

However, currently my entire table's cell value is undefined.

Here is my sample Json data

[
   {"Adult":2,"Child":1}, 
   {"Adult":3,"Child":2},
   {"Adult":4,"Child":1}
]

And here is my HTML table

<table id="myTable">
    <thead>
        <tr>               
            <th>Adult</th>
            <th>Child</th>             
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>

And here is the javascript code

$(document).ready(function () {
    $.ajax({
        type: 'GET',
        url: 'http://localhost:51071/api/Foo',               
        success: function (response) {
            console.log(response);
            $("#myTable").dynatable({                    
                dataset: {
                    records: response
                }
            });
        },              
        dataType: 'json'
    });
});

Any particular reason why I am getting undefined value?

In their documentation for converting attribute names they mention default naming convention to be camelcase and example given was favoriteMusic. Are they expecting my field name to start with small letter?

Update 1:

Turns out it is because the field names start with capital letter. I changed my json data to following and it worked

[
   {"adult":2,"child":1}, 
   {"adult":3,"child":2},
   {"adult":4,"child":1}
]

Any idea for a work around to make it work with field name starting with capital letter?

Answer 1

This is what I ended up doing

    function firstLetterLowerCase(str) {
        return str.charAt(0).toLowerCase() + str.substr(1);
    }
    $(document).ready(function () {

        $.ajax({
            type: 'GET',
            url: 'http://localhost:51071/api/Foo',               
            success: function (response) {

                response = response.map(function(resObj) {
                    var obj = {};
                    for (key in resObj) {
                        if (resObj.hasOwnProperty(key)) {
                            obj[firstLetterLowerCase(key)] = resObj[key];
                        }
                    }
                    return obj;
                });
                $("#myTable").dynatable({                    
                    dataset: {
                        records:response
                    }
                });                },              
            dataType: 'json'
        });
    });

So basically wrote a function to convert first letter of json object's field name from capital to small.

This might not be as performant when number of entries are huge.