Handling empty object in ajax columns

[Deleted User]

Hi

I'm using the ajax feature to populate tables from an api and combining it with Vue to get some interactivity with the data i receive.
The problem is that in the objects i receive, some of their properties are null and i can't access the property data.
Here's one of the objects i get :

{
"Id": 86,
"Date": "2019-02-18",
"Duree": 60,
"Description": null,
"Facturable": false,
"Tache": {
    "Nom": "sodalesAAAA",
    "Rubrique": {
        "Id": 2,
        "Nom": "4811"
    }
},
"Client": null,
"Projet": null,
"SousProjet": null,
"DateCreation": "2019-02-13"
}

For example, i want to display "Client.Nom" which i can't since its null, but i can't find a way to check if it is or not because of the way i declare my columns :

columns: [
    { data: 'Date' },
    { data: 'Projet.Nom' },
    { data: 'SousProjet.Nom' },
    { data: 'Tache.Rubrique' },
    { data: 'Tache.Nom' },
    { data: 'Client.Nom' },
    { data: 'Facturable' },
    { data: 'Duree' }
]

I tried some things with preDrawCallback but i can't get anything working.
Any ideas ?

Here is the data i'm getting : https://pastebin.com/raw/LdcHe1EQ
And here is the code :

Vue.prototype.$http = axios;

const app = new Vue({
  el: '#app',
  data: () => {
    return {
      lists: [],
      tables: []
    }
  },
  created() {
    const url = './data/temps.json';

    this.$http.get(url)
      .then(res => {
        for (let key in res.data) {
          this.lists.push({ key: key, data: res.data[key] });

          setTimeout(() => {
            this.tables[key] = $('#' + key).DataTable({
              ajax: {
                url: url,
                dataSrc: key
              },
              dom: 'Blftip',
              buttons: [
                {
                  text: 'Reload',
                  action: (e, dt, node, config) => {
                    dt.ajax.reload();
                  }
                }
              ],
              columns: [
                { data: 'Date' },
                { data: 'Projet' },
                { data: 'SousProjet' },
                { data: 'Tache.Rubrique' },
                { data: 'Tache' },
                { data: 'Client' },
                { data: 'Facturable' },
                { data: 'Duree' }
              ]
            });
          }, 150);
        };
      })
      .catch(err => {
        console.error(err)
      });
  }
});

<div id="app">
    <div v-for="list in lists" :key="list.key" class="table-container">
      <table :id="list.key" class="table responsive mb-4">
        <thead>
          <tr>
            <th>Date</th>
            <th>Projet</th>
            <th>Sous-Projet</th>
            <th>Rubrique</th>
            <th>Tâche</th>
            <th>Client</th>
            <th>Facturable</th>
            <th>Durée</th>
          </tr>
        </thead>
      </table>
    </div>
  </div>

Thanks for the help !

kthorngren

You can use columns.defaultContent. For example:
http://live.datatables.net/tetowuci/1/edit

Kevin

[Deleted User]

That's it thanks