Frage Array mit Arrays in HTML Tabelle darstellen

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

themrdomi

Mitglied
11 Juni 2017
42
5
8
21
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?
 

basti1012

Senior HTML'ler
26 November 2017
1.521
167
63
Minden
sebastian1012.bplaced.net
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.
 

themrdomi

Mitglied
11 Juni 2017
42
5
8
21
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.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.140
427
83
68
Wäre es nicht sinnvoll die Datums ohne new date zu speichern ?
Ich hätte keine Bedenken, Objekte in einem Array zu speichern. Wenn man objektorientiert programmiert, ist das ohnehin nichts Ungewöhnliches.
 

themrdomi

Mitglied
11 Juni 2017
42
5
8
21
Dann laß es doch direkt von der Datenbank vorsortiert ausgeben.
Datenbanken können mehr als nur speichern.
Sortieren können die recht gut.
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 :-)
 

basti1012

Senior HTML'ler
26 November 2017
1.521
167
63
Minden
sebastian1012.bplaced.net
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.
 

themrdomi

Mitglied
11 Juni 2017
42
5
8
21
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.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.140
427
83
68
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.
OMG, das liest sich ja kompliziert! Wahrscheinlich gibt es eine Lösung, die einfacher ist. Beschreibe doch mal, wie deine Ausgangsdaten aussehen.
 

Tronjer

Senior HTML'ler
8 Oktober 2010
5.238
483
83
Berlin
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

Senior HTML'ler
18 Oktober 2016
2.140
427
83
68
Wieso denn das? Was bitte ist verwerflich an einem mehrdimensionalen Array? "Macht man so" ist keine Begründung, in etwa so aussagekräftig wie "funktioniert nicht",
 

Tronjer

Senior HTML'ler
8 Oktober 2010
5.238
483
83
Berlin
Weil man sich an JSON orientiert. Auch wenn bei JavaScript-Objekten die keys nicht in Double Quotes stehen müssen.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.140
427
83
68
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.
 

Aaron3219

Senior HTML'ler
6 Oktober 2015
1.147
237
63
19
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.
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.
 

themrdomi

Mitglied
11 Juni 2017
42
5
8
21
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:

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.140
427
83
68
Wenn ich das richtig auf dein Eingangsposting anwende, soll der Tag die Spalte sein, nicht wahr?
 

themrdomi

Mitglied
11 Juni 2017
42
5
8
21
Ja, genau!
Prinzipiell ist es mir auch egal ob es eine Tabelle ist oder nicht.
Divs mit Flexboxen funktionieren ja auch einwandfrei.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.140
427
83
68
Wenn ich die verbale Beschreibung unter 1. durchlese, müsste die Struktur, die dazu gehört, eher so aussehen:
Code:
[{
    0: {…},
    start: Date Sun Nov 08 2020 15:00:00 GMT+0100 (Central European Standard Time),
    end: Date Mon Nov 08 2020 18:15:00 GMT+0100 (Central European Standard Time)
}, {
    0: {…},
    start: Date Sun Nov 08 2020 15:00:00 GMT+0100 (Central European Standard Time),
    end: Date Mon Nov 08 2020 18:15:00 GMT+0100 (Central European Standard Time)
},
// usw. weitere Objekte
]
Ist das richtig?
 

themrdomi

Mitglied
11 Juni 2017
42
5
8
21
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
]