Dynamically configuring AG Grid Columns from JSON

<!DOCTYPE html>
<html>
<head>
    <script src="https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.noStyle.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-grid.css">
    <link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-theme-balham.css">
</head>
<body>
<h1>Dynamic Header Configuration</h1>
<div id="myGrid" style="height: 500px; width:500px;" class="ag-theme-balham"></div>

<script type="text/javascript" charset="utf-8">

    const columnDefs = [
    ];

    const gridOptions = {

        defaultColDef: {
            sortable: true,
            filter: 'agTextColumnFilter',
            resizable: true
        },

        columnDefs: columnDefs,
        enableSorting: true,
        enableFilter: true,
        pagination: true
    };

    const eGridDiv = document.querySelector('#myGrid');

    new agGrid.Grid(eGridDiv, gridOptions);

    function dynamicallyConfigureColumnsFromObject(anObject){
        const colDefs = gridOptions.api.getColumnDefs();
        colDefs.length=0;
        const keys = Object.keys(anObject)
        keys.forEach(key => colDefs.push({field : key}));
        gridOptions.api.setColumnDefs(colDefs);
    }

    // simple JSON example

    fetch('https://www.ag-grid.com/example-assets/row-data.json').then(function (response) {
        return response.json();
    }).then(function (data) {
        dynamicallyConfigureColumnsFromObject(data[0])
        gridOptions.api.setRowData(data);
    })

    // SWAPI example

    // fetch('https://swapi.dev/api/people/',
    //     { 
    //         method: 'GET',
    //         headers: {
    //                     'Content-Type': 'application/json'
    //                 }
    //     }
    // ).then(function (response) {
    //     return response.json();
    // }).then(function (data) {
    //     dynamicallyConfigureColumnsFromObject(data.results[0])
    //     gridOptions.api.setRowData(data.results);
    // })

</script>
</body>
</html>

# Dynamically setting AG Grid Column Headers from JSON