Andreas Vogt: mehrdimensionelle Arrays

Hallo, ich möchte ein assoziatives Array zerteilen in mehrere assoziative Arrays ich habe folgenden Konstrukt:

$Arr1 = array();
$Arr2 = array();

foreach( $latest_events as $event ) {
    if ($i % 0 == 0) { 
        $Arr1($k) = $event;
        $i = $i + 1;
    }
    if ($i % 0 == 1) { 
        $Arr2($k) = $event;
        $i = 0;
    }
    $k = $k + 1;
}

Ist natürlich falsch, aber wie gehts richtig? Gruß Andreas

  1. Hi,

    ich möchte ein assoziatives Array zerteilen in mehrere assoziative Arrays

    anhand welcher Kriterien soll die Aufteilung geschehen.

        if ($i % 0 == 0) { 
    

    Division by zero ...

    Ist natürlich falsch, aber wie gehts richtig?

    Um zu sagen, wie "es" richtig geht, müßte man wissen, was "es" ist. Siehe oben.

    cu,
    Andreas a/k/a MudGuard

    1. @@MudGuard

      ich möchte ein assoziatives Array zerteilen in mehrere assoziative Arrays

      anhand welcher Kriterien soll die Aufteilung geschehen.

      Meine Glaskugel sagt: anhand des Index – gerade vs. ungerade. Die guten ins Kröpfchen, die schlechten ins Töpfchen. Oder auch modulo m.

      Meine Glaskugel bleibt völlig trübe, wenn ich sie befrage, was denn der Sinn dahinter wäre. Warum soll das Array aufgeteilt werden?

      LLAP 🖖

      --
      „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
  2. Falls es um Aufteilung in Spalten geht:

    <?php
    
    function columnize(array $data, $columns)
    {
        $ret = array_fill(0, $columns, array());
    
        $i = 0;
    
        foreach ($data as $element) {
            $ret[$i++ % $columns][] = $element;
        }
    
        return $ret;
    }
    
    $latest_events = array('foo', 'bar', 'baz', 'qix', 'qox', 'fiz', 'fuz', 'bix', 'box', 'tox');
    
    var_dump(columnize($latest_events, 3));
    
    //array(3) {
    //    [0]=>
    //  array(4) {
    //        [0]=>
    //    string(3) "foo"
    //        [1]=>
    //    string(3) "qix"
    //        [2]=>
    //    string(3) "fuz"
    //        [3]=>
    //    string(3) "tox"
    //  }
    //  [1]=>
    //  array(3) {
    //        [0]=>
    //    string(3) "bar"
    //        [1]=>
    //    string(3) "qox"
    //        [2]=>
    //    string(3) "bix"
    //  }
    //  [2]=>
    //  array(3) {
    //        [0]=>
    //    string(3) "baz"
    //        [1]=>
    //    string(3) "fiz"
    //        [2]=>
    //    string(3) "box"
    //  }
    //}
    
    1. @@mermshaus

      Falls es um Aufteilung in Spalten geht:

      Warum sollte es darum gehen? Der Sinn wäre welcher?

      LLAP 🖖

      --
      „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
      1. Falls es um Aufteilung in Spalten geht:

        Warum sollte es darum gehen?

        Weil ich auf Basis des vorliegenden Codes auch sagen würde, dass deine Glaskugel richtig liegt.

        Der Sinn wäre welcher?

        Aufteilung in Spalten bzw. eben in Untermengen mit gleichmäßiger Anzahl an Elementen.

        1. @@mermshaus

          Falls es um Aufteilung in Spalten geht: Warum sollte es darum gehen? Der Sinn wäre welcher? Aufteilung in Spalten bzw. eben in Untermengen mit gleichmäßiger Anzahl an Elementen.

          Gehen wir der Sache mal auf den Grund und fragen weiter:

          Warum sollen die Daten in Spalten mit gleichmäßiger Anzahl aufgeteilt werden?

          LLAP 🖖

          --
          „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
          1. Falls es um Aufteilung in Spalten geht: Warum sollte es darum gehen? Der Sinn wäre welcher? Aufteilung in Spalten bzw. eben in Untermengen mit gleichmäßiger Anzahl an Elementen.

            Gehen wir der Sache mal auf den Grund und fragen weiter:

            Warum sollen die Daten in Spalten mit gleichmäßiger Anzahl aufgeteilt werden?

            Gunnar, ist jetzt nicht böse gemeint, aber für deine kleinen Spielchen möchte ich keine Hirnkapazität aufwenden. :) Wenn du mir etwas mitteilen möchtest, drück dich bitte klar und verständlich aus. Danke!

            1. @@mermshaus

              Gehen wir der Sache mal auf den Grund und fragen weiter:

              Warum sollen die Daten in Spalten mit gleichmäßiger Anzahl aufgeteilt werden?

              Gunnar, ist jetzt nicht böse gemeint, aber für deine kleinen Spielchen möchte ich keine Hirnkapazität aufwenden. :)

              Dem Problem des Fragenden auf den Grund zu gehen ist kein „kleines Spielchen“.

              Wenn du mir etwas mitteilen möchtest, drück dich bitte klar und verständlich aus. Danke!

              Ich möchte dir (und anderen) mitteilen, dass man dem Fragenden nur dann sinnvoll antworten kann, wenn überhaupt das Problem klar ist.

              Das Problem ist hier nicht das Aufteilen eines Arrays, sondern die Anordnung der Boxen.

              LLAP 🖖

              --
              „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
  3. problematische Seite

    Hallo, ja sorry, hätte das Problem besser beschreiben sollen. Ich habe ein assoziatives Array (Wordpress) das in einer Schleife eine Ansicht erstellt. Diese besteht aus 5 nebeneinander liegenden Div-Containern, siehe Webseite. Dabei habe ich aber das Problem, dass die Reihenfolge so abläuft, dass erst der 1. Container gefüllt wird, dann der 2. usw. Nun möchte ich das Array aufteilen in 5 einzelne Arrays, und jeden Container aus einem Array befüllen, damit die Reihenfolge stimmt. Deswegen die Modulo Operation. D.H. 1, 6, 11. Item des Arrays sollten im Arr1 stehen.

    Hoffe ich habe es nun besser beschrieben. Gruß Andreas

    1. problematische Seite

      @@Andreas Vogt

      ja sorry, hätte das Problem besser beschreiben sollen. Ich habe ein assoziatives Array (Wordpress) das in einer Schleife eine Ansicht erstellt. Diese besteht aus 5 nebeneinander liegenden Div-Containern, siehe Webseite.

      Das ist dein Problem.

      Die Lösung ist nicht, die Daten so zu verunstalten, dass sie in dein verhunztes Markup passen. Stattdessen solltest du dein Markup berichtigen.

      Heißt in dem Fall: auf die Container <div class="column"> zu verzichten. Einfach alle <div class="pincard"> hintereinander. Der Container <div class="pwrapper"> wird eine Flexbox mit flex-flow: row wrap, die Flexitems bekommen eine Breite – Problem gelöst.

      LLAP 🖖

      --
      „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
      1. Hallo, hier mein erster Versuch: swhv-kg13.de/test.htm

        Leider entstehen Lücken. Andreas

        1. @@Andreas Vogt

          Hallo, hier mein erster Versuch: swhv-kg13.de/test.htm

          Leider entstehen Lücken.

          Du meinst in der Vertikalen? Also, dass die Boxen nicht alle gleich hoch sind?

          Du hat ja auch display: inline-box verwendet anstatt Flexbox.

          Das flex-flow: row wrap ist wirkungslos, da nirgends eine Flexbox ist. Die Flexbox (d.h. das Element mit display: flex) darf auch nicht irgendein Vorfahrenelement, sondern muss das Elternelement der Flexitems sein.[1]

          width: 900px ist auch nicht gut. Viewports sind üblicherweise deutlich schmaler. Nutzer zu horizontalem Scrollen zu zwingen ist doof.

          Und du solltest sämtliche Stilangaben ins Stylesheet schreiben; nicht inline in style-Attribute.

          LLAP 🖖

          --
          „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe

          1. zumindest, wenn kein display: contents im Spiel ist ↩︎

          1. Hallo, hab rausgefunden dass man das ganze wohl Masonry-Style nennt: http://w3bits.com/css-masonry/ Meine Testseite hab ich demnach aufgebaut: http://swhv-kg13.de/test.htm

            Sieht eigentlich ganz gut aus - aber ich hab das gleiche Problem wie zu Anfang. Die Reihenfolge ist von Oben nach Unten und von Links nach Rechts. Ich benötige aber die Reihenfolge von Links nach rechts und von Oben nach Unten.

            Lässt sich das anpassen die Reihenfolge? Alternativ wohl doch wieder das Ausgangs-Array sortieren?

            Andreas

            1. @@Andreas Vogt

              hab rausgefunden dass man das ganze wohl Masonry-Style nennt: http://w3bits.com/css-masonry/

              Ah, du willst gar nicht, dass die Boxen dieselbe Höhe haben.

              Lässt sich das anpassen die Reihenfolge? Alternativ wohl doch wieder das Ausgangs-Array sortieren?

              Nein. Lass mal deine Daten so, wie sie sind.

              Allerdings brauchst du etwas JavaScript dafür. (Mit CSS-Grids könnte es demnächst auch ohne gehen.)

              Ich hatte das letztens mal gebaut.

              (Die Inline-Styleangaben im Bespiel sind nur dazu da, dass die Boxen verschiede Höhen haben. Das entfällt bei dir selbstverständlich, da sich die Höhen aus den Inhalten ergeben.)

              LLAP 🖖

              --
              „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
              1. @@Gunnar Bittersmann

                Ah, du willst gar nicht, dass die Boxen dieselbe Höhe haben.

                Beachte aber, dass bei Masonry-Style der Nutzer die (bei dir zeitliche) Ordnung nicht immer erkennt. Du kannst nicht beides haben.

                Nein. Lass mal deine Daten so, wie sie sind.

                Ein Grund dafür ist auch, dass du gar nicht wissen kannst, wieviele Spalten beim Nutzer nebeneinanderpassen.

                Ändere bei meinem CodePen die Fenstergröße und du siehst, wie sich die Spaltenanzahl der Viewportbreite anpasst.

                LLAP 🖖

                --
                „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
                1. Hallo, ich habe probiert deinen Code auf eine html-Datei anzuwenden: http://www.swhv-kg13.de/test6.html

                  Da wird nichts entsprechend formatiert. Wo ist denn das Problem?

                  Andreas

                  1. @@Andreas Vogt

                    Wo ist denn das Problem?

                    Dass du das Script (insb. Zeile var thisElement = document.querySelector('#this');) schon ausführen lässt, bevor das Element überhaupt im DOM existiert.

                    Das Script ans Ende des body tun. (Oder per Eventhandler document.addEventListener('DOMContentLoaded',))

                    LLAP 🖖

                    --
                    „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
                    1. Danke, tut jetzt. Werde mal versuchen das auf mein Content anzuwenden.

                      Gruß Andreas

                      1. OK, habs hinbekommen: http://swhv-kg13.de/terminkalender/ Lädt aber verdammt lange. (vorallem im Firefox)

                        Gruß Andreas

                        1. @@Andreas Vogt

                          OK, habs hinbekommen: http://swhv-kg13.de/terminkalender/

                          2. Zeile bei 5 Elementen pro Zeile: 02.04., 02.04., 30.04., 23.04., 09.04. Ich sag doch, „dass bei Masonry-Style der Nutzer die (bei dir zeitliche) Ordnung nicht immer erkennt.“

                          Durcheinander? Der Algorithmus, der die Spalten derart befüllt, ist für deine Zwecke nicht so gut geeignet. Bei dir wäre es besser, tatsächlich die Spalten der Reihe nach zu befüllen.

                          Das JavaScript wäre dementsprechend anzupassen.

                          Lädt aber verdammt lange. (vorallem im Firefox)

                          Kann ich nicht feststellen.

                          LLAP 🖖

                          --
                          „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
                          1. Hallo, wenn ich in Firefox den Terminkalender öffne sehe ich nach dem Laden zuerst dieses Bild für 3-4 Sekunden.

                            Ladeansicht Pinboard

                            Und das ist für mich eigentlich schon zu lange. Bei Chrome und Edge geht das flüssiger. Hängt das mit der Anzahl der Items zusammen? Ich habe schon gedacht weniger laden zu lassen und bei Klick auf Button weitere zu laden.

                            Andreas

                            1. @@Andreas Vogt

                              wenn ich in Firefox den Terminkalender öffne sehe ich nach dem Laden zuerst dieses Bild für 3-4 Sekunden.

                              Ladeansicht Pinboard

                              Bei mir ist es so etwa eine halbe Sekunde, aber die Verzögerung sehe ich auch.

                              Ich hab das CSS und JavaScript im Pen noch verbessert; dann liegen nicht alle Items übereinander.

                              Und das ist für mich eigentlich schon zu lange. Bei Chrome und Edge geht das flüssiger. Hängt das mit der Anzahl der Items zusammen?

                              Nein, damit ganz sicher nicht. Es hängt mit der Anzahl von externen Ressourcen zusammen, die da geladen werden. Eine Unmenge an Stylesheets und JavaScript: jQuery, jQuery, jQuery, …, Wordpress-Plugins, …

                              Welche im head stehen und während des Ladens das Rendern der Seite blockieren. Das macht deine Seite langsam.

                              Du solltest da mal durchsehen, was du davon wirklich brauchst. Und die verbleibenden CSS- und JavaScript-Dateien zu jeweils einer zusammenfassen.

                              Dann sind da noch ein paar Hintergrundbilder von vor etlichen Jahren (gefühlt: Jahrzehnten), als es in CSS weder border-radius noch linear-gradient gab. Gibt’s jetzt aber; kannst du verwenden. Lies: solltest, und die Grafiken entsorgen.

                              LLAP 🖖

                              --
                              “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                              1. Hallo, Ja ist wirklich viel Overhead was geladen werden muss, aber das sind nicht die Bremser. Der 'Schuldige' ist die Admin-Bar von Wordpress, und die bekommst du ja nicht zu sehen. Brauch die nur ausblenden und OK ists.

                                Danke für die Hilfe.

                                1. Hallo Andreas Vogt,

                                  Ja ist wirklich viel Overhead was geladen werden muss, aber das sind nicht die Bremser. Der 'Schuldige' ist die Admin-Bar von Wordpress, und die bekommst du ja nicht zu sehen.

                                  Kleinvieh macht auch Mist. Du solltest nur das laden, was auch tatsächlich benötigt wird.

                                  Bis demnächst
                                  Matthias

                                  --
                                  Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
                                  1. @@Matthias Apsel

                                    Kleinvieh macht auch Mist. Du solltest nur das laden, was auch tatsächlich benötigt wird.

                                    Und erst dann laden, wenn es tatsächlich benötigt wird.

                                    JavaScript so laden, dass es das Rendern der Seite nicht blockiert, d.h. nach dem Rendern oder asynchron.

                                    Ressourcen zusammenfassen, um HTTP-Requests zu sparen. Es sei denn, man ist auf Speed – äh HTTP/2.

                                    LLAP 🖖

                                    --
                                    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                                2. @@Andreas Vogt

                                  Brauch die nur ausblenden und OK ists.

                                  Nö, nicht OK. Der Effekt ist da. Wenn auch kürzer – er macht sich störend bemerkbar. Da solltest du optimieren.

                                  LLAP 🖖

                                  --
                                  “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                                  1. Hallo, Problem bei der Sache ist dass ich da kaum Handhabe habe. Die geladenen Plugins laden ihren Content so wie sie entwickelt wurden. Wenn ich den ändern würde, wäre meine Änderung bei der nächsten Aktualisierung des Plugins wieder weg. Und das würde sehr häufig geschehen.

                                    Habe aber noch ein paar Tests gemacht und herausgefunden dass als noch größte Bremse die initialisierung des superfish (Menü Script) darstellt - obwohl die gar nicht wichtig ist. Hab das auskommentiert und jetzt läuft es flüssig - für mich Aktzeptabel.

                                    Gruß Andreas

                                    1. @@Andreas Vogt

                                      Problem bei der Sache ist dass ich da kaum Handhabe habe. Die geladenen Plugins laden ihren Content so wie sie entwickelt wurden. Wenn ich den ändern würde, wäre meine Änderung bei der nächsten Aktualisierung des Plugins wieder weg. Und das würde sehr häufig geschehen.

                                      Bei einem child theme sollte man beeinflussen können, wie Plugins geladen werden, oder?

                                      BTW, hast du meine Verbesserungen übernommen?

                                      LLAP 🖖

                                      --
                                      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                                      1. Hallo, nein, deine Verbesserungen habe ich nicht übernommen. Habe knapp 2 Stunden mich am korrekten Box-Shadow versucht, bekomm es aber nicht so hin wie mit den Grafiken. Daher belass ich es bei den Grafiken.

                                        Gruß Andreas

                                        1. @@Andreas Vogt

                                          nein, deine Verbesserungen habe ich nicht übernommen.

                                          Solltest du noch.

                                          Habe knapp 2 Stunden mich am korrekten Box-Shadow versucht

                                          Shadow??

                                          bekomm es aber nicht so hin wie mit den Grafiken.

                                          Was kriegst du da nicht hin?

                                          Mit einem Colorpicker (Firefox stellt einen für <input type="color"/> zur Verfügung) die Farbwerte für deinen blauen Farbverlauf ermittelt: oben #2161A7, unten #16406C.

                                          Also einfach für das Container-Element
                                          background-image: linear-gradient(to bottom, #2161A7, #16406C)

                                          Dieses soll noch runde Ecken recht unten und links untern haben (die anderen beiden also Radius 0):
                                          border-radius: 0 0 2em 2em

                                          Für den Hovereffekt musst du nur den Gradienten umdrehen, also entweder die Farbwerte vertauschen oder die Richtung in to top ändern.

                                          Den Effekt (oder besser einen noch auffälligeren) solltest du unbedingt auch für :focus angeben, sonst sieht man bei Tastatursteuerung nicht, wo man sich gerade befindet.

                                          Das könnte dann so aussehen. Mehr HTML-Elemente braucht man dazu nicht. (Es würde sogar ohne ul und li gehen.)

                                          Daher belass ich es bei den Grafiken.

                                          Die Headergrafik solltest unbedingt überarbeiten, die ist völlig verwaschen. Außerdem ist das keine Verzierung, die gehört nicht als Hintergrundbild ins CSS, sondern als img-Element ins HTML. Und zwar mit Alternativtext, der denselben Inhalt auch für Nutzer angibt, die die Grafik nicht sehen können (oder wollen und Grafiken laden abgeschaltet haben).

                                          LLAP 🖖

                                          --
                                          “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
              2. @@Gunnar Bittersmann

                (Mit CSS-Grids könnte es demnächst auch ohne gehen.)

                Oder auch nicht, wie mir Jen Simmons und mein geschätzter Kollege bestätigten.

                LLAP 🖖

                --
                “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
              3. @@Gunnar Bittersmann

                Ich hatte das letztens mal gebaut.

                Und nun umgebaut. position: absolute für die Listitems darf natürlich nur gesetzt werden, wenn das JavaScript tatsächlich ausgeführt wird und deren Position berechnet.

                Das JavaScript ist jetzt progressive enhancement zum vorhandenen Fallback mit float.

                LLAP 🖖

                --
                “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
  4. Hallo und guten Morgen,

    die Aufgabe ist gar nicht so trivial, wenn der assoziative Key erhalten bleiben soll.

    Aufteilung eines Arrays in zwei oder mehr getrennte nach Position im Array:

    Position != Key

    $Arr1 = array();
    $Arr2 = array();
    ## ...
    # $ArrN = array();
    
    while (count($latest_events) > 0)
    {
        if (count($latest_events) > 0) $Arr1[key($latest_events)] = array_shift($latest_events);
        if (count($latest_events) > 0) $Arr2[key($latest_events)] = array_shift($latest_events);
    ##  und so weiter für N Zielarrays.
    #   if (count($latest_events) > 0) $ArrN[key($latest_events)] = array_shift($latest_events);
    }
    

    Ich kann es nicht ausprobieren hier, aber zumindest kurz erklären, was mMn passiert:

    Es wird dem Originalarray gearbeitet.
    Solange dieses Elemente enthält, wird die Schleife durchlaufen.
    Der Positionszeiger im Originalarray zeigt immer auf das erste Element.
    Bei jedem Schleifendurchlauf wird dem jeweiligen Zielarray das erste Element des Originalarrays zugewiesen und dieses Array um eben dieses Element gekürzt. Der assoziative Key des Originalelements wird dabei ins Ziel mit übernommen.
    Da man nicht weiß, wieviele Elemente das Originalarray hatte, wird vor jeder Übertragung in die Zielarrays nochmals geprüft, ob überhaupt noch ein Element vorhanden ist.

    Ich hoffe, es funktioniert so.

    Grüße
    TS

    --
    es wachse der Freifunk
    http://freifunk-oberharz.de
    1. @@TS

      Ich hoffe, es funktioniert so.

      Nein. Deine „Lösung“ geht am Problem vorbei.

      LLAP 🖖

      --
      „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
      1. Hallo und guten Gunnar,

        Ich hoffe, es funktioniert so.

        Nein, deine „Lösung“ geht am Problem vorbei.

        Ich habe mich lediglich bemüht, die PHP-Aufgabe zu lösen. Um andere Lösungswege mittels Umstellung des Markups kümmerst Du dich ja schon. Aber auch hier wieder meine herzliche Bitte an Dich:

        Zeige bitte ausführlich, wie es geht und wirf nicht nur ein Begriffe hin. Dein Niveau ist inzwischen so hoch, dass kein Anfänger mehr mitkommt!

        Grüße
        TS

        --
        es wachse der Freifunk
        http://freifunk-oberharz.de
        1. @@TS

          Nein, deine „Lösung“ geht am Problem vorbei.

          Ich habe mich lediglich bemüht, die PHP-Aufgabe zu lösen.

          Mit anderen Worten: Du hast dir keine Mühe gemacht, überhaupt das Problem zu erkennen.

          Zeige bitte ausführlich, wie es geht und wird nicht nur ein Begriffe hin.

          Wie wär’s mit einem Link, wo ausführlich gezeigt wird, wie es geht? Ach so, war ja da.

          Ich kann natürlich gerne das Internet für dich nochmal abtippen …

          Dein Niveau ist inzwischen so hoch, dass kein Anfänger mehr mitkommt!

          Einem Link zu folgen sollte das Niveau von Anfängern nicht übersteigen.

          LLAP 🖖

          --
          „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe