Javascript: Render a JQuery DataTable using JSON data from an API

example_data_from_url.json

{
  "data": [
    {
      "Fieldname1": "1",
      "Fieldname2": "Lebron James",
      "Fieldname3": "Basketball",
      "Fieldname4": "23",
      "Fieldname5": "Cleveland",
      "Fieldname6": "SF",
      "Fieldname7": "2",
      "Fieldname8": "NBA"
    },
    {
      "Fieldname1": "2",
      "Fieldname2": "Michael Jordan",
      "Fieldname3": "Basketball",
      "Fieldname4": "23",
      "Fieldname5": "Chicago",
      "Fieldname6": "SG",
      "Fieldname7": "6",
      "Fieldname8": "NBA"
    },
    {
      "Fieldname1": "3",
      "Fieldname2": "Russel Westbrook",
      "Fieldname3": "Basketball",
      "Fieldname4": "0",
      "Fieldname5": "Seattle",
      "Fieldname6": "PG",
      "Fieldname7": "0",
      "Fieldname8": "NBA"
    },

json_api_to_jquery_DataTable

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">

<table id="jsonToTable" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Fieldname1</th>
                <th>Fieldname2</th>
                <th>Fieldname3</th>
                <th>Fieldname4</th>
                <th>Fieldname5</th>
                <th>Fieldname6</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Fieldname1</th>
                <th>Fieldname2</th>
                <th>Fieldname3</th>
                <th>Fieldname4</th>
                <th>Fieldname5</th>
                <th>Fieldname6</th>
            </tr>
        </tfoot>
    </table>
	
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('#jsonToTable').DataTable( {
        "ajax": "http://www.example.com/url/to/json/data",
        "columns": [
            { "data": "Fieldname1" },
            { "data": "Fieldname2" },
            { "data": "Fieldname3" },
            { "data": "Fieldname4" },
            { "data": "Fieldname5" },
            { "data": "Fieldname6" }
        ]
    } );
} );
</script>