• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Array mit Arrays in HTML Tabelle darstellen

T

themrdomi

Mitglied
Hallo zusammen,
ich habe eine Problemstellung, bei der ich keine Lösung zu finden scheine.
Ich habe ein Array mit Arrays mit Date Objekten, die ich sehr gerne in einer HTML Tabelle darstellen will.
Jedoch will ich Objekte mit der gleichen Uhrzeit in der selben Reihe darstellen.
Hier ein Beispiel wie das Array aussehen kann:

Javascript: 
var array = [
    [
        new Date("2020-01-01 08:00:00"),
        new Date("2020-01-01 08:30:00"),
        new Date("2020-01-01 09:00:00")
    ],
    [
        new Date("2020-01-02 08:30:00"),
        new Date("2020-01-02 09:00:00"),
        new Date("2020-01-02 09:30:00")
    ],
    [
        new Date("2020-01-04 09:00:00"),
        new Date("2020-01-03 10:00:00")
    ]
]
So sollte die Tabelle anschließend aussehen:
Code: 
|-------|-------|-------|
| 08:00 |       |       |
|-------|-------|-------|
| 08:30 | 08:30 |       |
|-------|-------|-------|
| 09:00 | 09:00 | 09:00 |
|-------|-------|-------|
|       | 09:30 |       |
|-------|-------|-------|
|       |       | 10:00 |
|-------|-------|-------|

Ich benutze Date-Fns und Angular, aber ich denke, es passt hier ganz gut rein, weil das Problem ja eher unabhängig davon ist, nehme ich an.

Hat von euch jemand einen Lösungsansatz?
 
Ich stelle mal nee Frage , die auch für andere sind.
Wäre es nicht sinnvoll die Datums ohne new date zu speichern ?
Dann außerhalb des Arrays mit new Date() arbeiten und array.sort() benutzen. ?
Dann den Array mit Schleife durchgehen und das Html erzeugen.

Bevor ich da ein Beispiel zeige warte ich erstmal ab was die anderen meinen wie man das an besten macht.
Das new Date im array, ist meiner Meinung nach nicht der beste Weg.
 
Danke für deine Antwort!
Ja, das wäre tatsächlich sinnvoll und war für mich deshalb zweitrangig, weil ich das Array so eigentlich garnicht erzeuge.
Tatsächlich mache ich eine Datenbankabfrage und bekomme ein Array mit Arrays mit Date Objekten zurück.
 
basti1012 schrieb:
Dann laß es doch direkt von der Datenbank vorsortiert ausgeben.
Datenbanken können mehr als nur speichern.
Sortieren können die recht gut.
Zum Vergrößern anklicken....
Das kann ich leider nicht.
Die Daten sind anderweitig gespeichert, werden dann in der Datenbank aggregiert und dann muss ich überhaupt erst noch die einzelnen Zeiten ausrechnen und diese pro Tag gruppieren.
Erst dann sind wir hier, bei meiner eigentlichen Problemstellung :-)
 
Ok.Das heißt also das du nur ein Array bekommst den du im ersten Beitrag gepostet hast ?
Vorher kannst du nicht eingreifen und nix ändern kannst?
Ich werde das gleich mal versuchen, muß aber auch erst Goggeln wie da best practice ist.
 
Ja, genau.
Ich habe mir eine Funktion geschrieben, welche auch einwandfrei funktioniert, allerdings nur aufgrund der Tatsache, dass ich weiß, dass alle Zeiten im Array immer jeweils 30 minuten (bzw. eine variable Zeit) auseinander liegen.
Dann iteriere ich alle Arrays hole mir die früheste und späteste Zeit.
Dann generiere ich alle möglichen Zeiten zwischen frühester und spätester Zeit und erstelle ein Array mit diesen.
Dann iteriere ich mein usprüngliches Array und schaue, ob jede Zeit, die möglich ist, auch dort vertreten ist.
Falls ja, erstelle ich ein neues Objekt mit der Zeit in einem Array.
Falls nicht, erstelle ich ein neues Objekt mit leerem String in einem Array.

Dieser Ansatz funktioniert aber eben nur, weil ich weiß, wie weit die entsprechenden Zeiten auseinander liegen.
Ich nehme an, wenn ich das nicht weiß, müsste ich jedes Element im Sub-Array mit jedem Element in jedem anderen Sub-Array vergleichen.
Dann bin ich halt ruck-zuck bei einem O(n^2)...
An sich erstmal nicht schlimm, weil es nicht so viele Elemente sind aber wäre natürlich super, wenn es da einfachere Möglichkeiten gebe.
 
Array innerhalb eines Arrays ist schon im Ansatz falsch. In JS arbeitet man mit Collections, d.h. innerhalb Arrays sollten entweder einzelne values oder Objekte mit key und value stehen. Des Weiteren gibt man ein Datum in Form eines ISO-Strings aus und nicht als Funktion.

Wie genau sehen die Daten aus, die du vom Endpoint bekommst?
 
Sempervivum schrieb:
Ebenso ein "macht man so". Auch in JSON sind mehrdimensionale Arrays nicht tabu.
Ein gutes Beispiel ist ein Schachbrett. Willst Du jetzt die Zeilen als Array anlegen und die Spalten mit Namen versehen, etwa 'col1', 'col2', 'col3' ...? Das wäre sinnfrei und nicht zielführend.
Zum Vergrößern anklicken....
Exakt :) Gerade im Schach sind die Felder ja immer durch einen Buchstaben und eine Zahl gekennzeichnet. Du könntest dadurch Aufrufe wie D[5] machen.

Aber das ganze zu generalisieren finde ich auch eine schwierige Aussage. Es gibt bestimmt einige Use cases in denen mehrdimensionale Arrays Sinn ergeben.
 
Also ich würde auch nicht pauschal mehrdimensionale Arrays verteufeln, auch wenn ich natürlich sehe, dass es immer anwendungsspezifisch ist, welche Datenstruktur am besten geeignet ist.
Eigentlich ist das ursprünglich Array oben mit dem
Code: 
new Date()
etwas irreführend, denn ich erhalte einfach ein Array mit Objekten von meiner Datenbankabfrage zurück.
Deshalb hier meine Ausgangslage:
  1. Ich erhalte von der Datenbank ein Array mit Zeitintervallen, also Objekten mit start und end Wert als Date Objekt. Das sieht dann z.B. so aus:
  2. Javascript: 
    [
    {
        0: {…}
        start: Date Sun Nov 08 2020 15:00:00 GMT+0100 (Central European Standard Time)
        end: Date Sun Nov 08 2020 18:15:00 GMT+0100 (Central European Standard Time)
    }
    //Weitere Objekte
]
  3. Anschließend berechne ich "Zeitslots" mit einer variablen Dauer. D.h. ich berechne alle Zeiten zwischen start und end, die mit einer Dauer von z.B. 30 Minuten reinpassen. Mit dem Beispiel oben würde ich erhalten:
  4. Code: 
    [
[
Date Sun Nov 08 2020 15:00:00 GMT+0100 (Central European Standard Time),
Date Sun Nov 08 2020 15:30:00 GMT+0100 (Central European Standard Time),
Date Sun Nov 08 2020 16:00:00 GMT+0100 (Central European Standard Time),
Date Sun Nov 08 2020 16:30:00 GMT+0100 (Central European Standard Time),
Date Sun Nov 08 2020 17:00:00 GMT+0100 (Central European Standard Time),
Date Sun Nov 08 2020 17:30:00 GMT+0100 (Central European Standard Time)
]
]
  5. Nun möchte ich diese Daten entsprechend in einer HTML Tabelle ausgeben, aber eben nach Tag gruppiert (deshalb überhaupt die Arrays im Array) und dann entsprechend alle Uhrzeiten auf gleicher Höhe...

Danke für das rege Interesse und die Mitarbeit!!
 
Zuletzt bearbeitet:
Ja, fast, es sind nur Intervalle, die sich nicht überschneiden, also z.B.:
Code: 
[{
    0: {…},
    start: Date Sun Nov 08 2020 15:00:00 GMT+0100 (Central European Standard Time),
    end: Date Sun Nov 08 2020 18:15:00 GMT+0100 (Central European Standard Time)
}, {
    1: {…},
    start: Date Mon Nov 09 2020 15:00:00 GMT+0100 (Central European Standard Time),
    end: Date Mon Nov 09 2020 18:15:00 GMT+0100 (Central European Standard Time)
},
// usw. weitere Objekte
]
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben