New to Coding - How can I get the data from a Fetch API request into my DataTables?

dapascale

Link to test case:
Hi there,

I am new to coding and I am having trouble getting the data from the Fetch API request to display in the DataTable. Because I work for a company, I can't post the entirety of my code here, but I'll give as much detail as I can.

I already have the below code allowing me to access the API, and the fetch request works - it displays the Json format in the console. But from here, I cannot figure out how to get the nested objects to display in the dataTable. I have included a small, clipped example of the json.

**Please note I have hashed the API Key and some of the json data.

Also note, though not included here, I do have all the required plugins - the DataTable is working, I am just having trouble moving data from the fetched JSON to the table.**

HTML

Attendee List

First Name	Last Name	Pronouns	Organization	Email	Phone	Address	City	State	Zip

Script

                    // Declare Fetch Header
                    var myHeaders = new Headers();
                    myHeaders.append("Authorization", "Api-Key ****************************");

                    // Declare Request variable
                    var requestOptions = {
                    method: 'GET',
                    headers: myHeaders,
                    redirect: 'follow'
                    };
                    // Make API call
                    fetch("https://e************************om/external_registration/", requestOptions)
                    .then(response => response.json())
                    .then(result => console.log(result))
                    .catch(error => console.log('error', error));

                    $('#table_id').DataTable({
                        **???????????
                        ???????????**
                            { 'data': etc },
                            { 'data': etc },
                            { 'data': etc },
                        ]
                    })

Would anyone be able to explain where I go from here? I know how to access nested data, but I'm missing something in how to access the data from the json response - essentially, where the above question marks are. How can I use the 'result' variable in a function that will populate my dataTable. The json looks like this:

0:
created: "2021-02-11T13:00:52.180763-05:00"
id: "bf**********************10"
user:
date_joined: "2021-02-10T09:46:51-05:00"
email: "e******n@e******i.org"
first_name: "E******n"
id: "2************************5"
last_login: "2******************:00"
last_name: "J***********s"

1:
created: "2021-02-11T13:00:52.180763-05:00"
id: "bf**********************10"
user:
date_joined: "2021-02-10T09:46:51-05:00"
email: "e******n@e******i.org"
first_name: "E******n"
id: "2************************5"
last_login: "2******************:00"
last_name: "J***********s"

Etc.

Thank you so much in advance!

kthorngren

Looks like you have nested objects. See this nested objects example for how to configure columns.data with nested objects. In the success function of your fetch you can use rows.add() to add the rows to an already initialized Datatable. You would init an empty Datatable before fetching the data then rows.add() to populate it.

Kevin

allan

Also, have a look at this example which uses the fetch API.

Allan