DataTables: Die Eigenschaft 'Länge' von undefined kann nicht gelesen werden

75

Ich verstehe, dass dies ein beliebtes Problem ist, und habe alle ähnlichen Fragen hier auf Stack Overflow und anderen Websites (einschließlich der Datatables-Website) gelesen.

Zur Verdeutlichung verwende ich

  • PHP Codeigniter
  • Materliazecss

Ich habe auch sichergestellt, dass ich das JSON-Array korrekt empfangen habe:

[{"name_en":"hello","phone":"55555555"},{"name_en":"hi","phone":"00000000"}]

Meine HTML-Tabelle sieht folgendermaßen aus:

<table id="customer_table">
     <thead>
         <tr>
            <th>Name</th>
            <th>Phone</th>
         </tr>
     </thead>
</table>

Und hier ist meine document.readyFunktion:

  $(document).ready(function(){
            //$('#customer_table').DataTable();
            $('#customer_table').DataTable( {
                "ajax": 'json',
                "dataSrc": "",
                 "columns": [
                    { "data": "email" },
                    { "data": "name_en" }
                ]
            });
  });

Der Fehler, den ich bekomme, ist

Nicht erfasster TypeError: Die Eigenschaft 'Länge' von undefined kann nicht gelesen werden

Abdelrahman Shoman
quelle

Antworten:

48

URSACHE

Dieser Fehler TypeError: Cannot read property 'length' of undefinedbedeutet normalerweise, dass jQuery DataTables die Daten in der Antwort auf die Ajax-Anforderung nicht finden kann.

Standardmäßig erwartet jQuery DataTables, dass die Daten in einem der unten gezeigten Formate vorliegen. Ein Fehler tritt auf, weil Daten in einem anderen als dem Standardformat zurückgegeben werden.

Array von Arrays

{ 
   "data": [
      [
         "Tiger Nixon",
         "System Architect",
         "$320,800",
         "2011/04/25",
         "Edinburgh",
         "5421"
      ]
   ]
}

Array von Objekten

{ 
   "data": [
      {
         "name": "Tiger Nixon",
         "position": "System Architect",
         "salary": "$320,800",
         "start_date": "2011/04/25",
         "office": "Edinburgh",
         "extn": "5421"
      }
   ]
}

LÖSUNG

Verwenden Sie das Standardformat oder die ajax.dataSrcOption, um Dateneigenschaften zu definieren, die Tabellendaten in der Ajax-Antwort enthalten ( datastandardmäßig).

Siehe Datenfeldposition für weitere Informationen.

LINKS

Weitere Informationen finden Sie unter jQuery DataTables: Häufige JavaScript-Konsolenfehler .

Gyrocode.com
quelle
1
Ich muss die Menge an Details bewundern, die in dieser Antwort enthalten sind. Ich habe die Antwort darauf geändert, um kommende Leser besser anzuleiten.
Abdelrahman Shoman
101

Es ist noch einfacher: Verwenden Sie einfach die dataSrc:''Option in der Ajax-Definition, damit dataTable ein Array anstelle eines Objekts erwartet:

    $('#pos-table2').DataTable({
                  processing: true,
                  serverSide: true,
                  ajax:{url:"pos.json",dataSrc:""}
            }
    );

Siehe Ajax-Optionen

Tomsoft
quelle
43

OK, danke an alle für die Hilfe.

Das Problem war jedoch viel einfacher.

Alles, was ich tun muss, ist, meinen JSON zu reparieren, um das Array einem Attribut namens data wie folgt zuzuweisen.

{
  "data": [{
    "name_en": "hello",
    "phone": "55555555",
    "email": "a.shouman",
    "facebook": "https:\/\/www.facebook.com"
  }, ...]
}
Abdelrahman Shoman
quelle
10
das ist wahr, aber Unsinn
Muhammad Rehan Qadri
1
Hallo Abdel, wie hast du die "Daten" hinzugefügt? Danke
Culter
1
@culter Ich habe das getan, indem ich das JSON-Array einer "Daten" -Variablen im Backend wie folgt zugewiesen habe. $ temp = '[{"name_en": "hallo", "phone": "55555555"}, {"name_en ":" hi "," phone ":" 00000000 "}] '; $ info ['data'] = $ temp;
Abdelrahman Shoman
14

Versuchen Sie Folgendes: Die Rückgabe muss d sein, nicht d.data

 ajax: {
      "url": "xx/xxx/xxx",
      "type": "GET",
      "error": function (e) {
      },
      "dataSrc": function (d) {
         return d
      }
      },
Nisal Edu
quelle
1
Vielen Dank, ich habe den ganzen Tag nach einer Nadel im Heuhaufen gesucht. Was macht dieser Code? Spezifisch beginnt das Teil bei errorzu return d? Ich habe den gleichen Fehler wie oben erhalten, konnte aber den Tippfehler oder was auch immer nicht finden. Dies hat mein Problem gelöst.
Summe keine
3

Wenn Sie Ajax als Funktion verwenden, denken Sie daran, dass JSON-Daten mit festgelegten Parametern zurückgegeben werden.

$('#example').dataTable({
    "ajax" : function (data, callback, settings) {
        callback({
            data: [...],
            recordsTotal: 40,
            recordsFiltered: 40}
            ));
    }
})
gvivetapl
quelle
2

Wenn Sie über JSON-Daten verfügen, wird der folgende Fehler angezeigt Geben Sie hier die Bildbeschreibung ein

Eine bessere Lösung besteht darin, ein var datafür das lokale JSON-Array-Objekt zuzuweisen. Details finden Sie unter: https://datatables.net/manual/tech-notes/4

Auf diese Weise können Sie den Tabelleninhalt anzeigen.

 $(document).ready(function(){   

        $('#customer_table').DataTable( {
         "aaData": data,

           "aoColumns": [{
                            "mDataProp": "name_en"
                        }, {
                            "mDataProp": "phone"
                        }, {
                            "mDataProp": "email"
                        }, {
                            "mDataProp": "facebook"
                        }]
            });
        });
Chetan
quelle
1

In meinem Fall hatte ich meine Json ein Attribut zuweisen genannt aaData wie in Datentabellen Ajax - Beispiel , die aussahen Daten dies .

Haris ur Rehman
quelle
1

Dies kann passieren, wenn der Name Ihrer Ansichtseigenschaft und der Name im Spaltenabschnitt der Datentabelle nicht übereinstimmen. Stellen Sie sicher, dass der Name der Eigenschaft und der Name der Spaltendaten übereinstimmen

dead_webdev
quelle
0

Während die obigen Antworten die Situation gut beschreiben, überprüfen Sie bei der Fehlerbehebung des Problems auch, ob der Browser wirklich das Format erhält, das DataTables erwartet. Es gibt vielleicht andere Gründe, das nicht zu bekommen data. Zum Beispiel, wenn der Benutzer keinen Zugriff auf die Daten-URL hat und stattdessen HTML erhält. Oder das Remote-System verfügt über einige unglückliche "Korrekturen". Die Registerkarte "Netzwerk" in den Debug-Tools des Browsers hilft.

Roman Susi
quelle
-1

Sie können versuchen, Ihre Felder auszuchecken, während Sie ein E-Mail-Feld rendern, das in Ihrem Ajax nicht verfügbar ist

$.ajax({
  url: "url",
  type: 'GET',
  success: function(data) {
    var new_data = {
      "data": data
    };
    console.log(new_data);
  }
});

HamzaMushtaq
quelle
1
Diese Antwort hat nichts mit seiner Frage zu tun.
Fabio William Conceição