Ankündigung

Einklappen
Keine Ankündigung bisher.

Php Variable in einen Javascript Array einfügen?

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Php Variable in einen Javascript Array einfügen?

    Hallo,

    ich habe ein kleines Problem mit der ausgabe eine php variable in einen Javascript Array.
    Ich benutze ein Script um einen Kalender mit Events darzustellen. Die events sind in einem Array gespeichert welcher in einer Datenbank liegt.

    Nun habe ich schon einiges getestet, komme aber nicht wirklich weiter, hat jemand von euch eine idee wie ich das einfach und effizient lösen kann?
    Zudem bekomme ich mit dem Untenstehenden Code folgende Fehlermeldung: [SyntaxError: unexpected token: numeric literal]

    Die Tabelle mit dem Array wird dann per Php ausgelesen und sieht dann wie folgt aus:
    Code:
    2020: {
    11: {
    4: [
    {
    startTime: "10:00",
    endTime: "12:00",
    text: "Hey"
    }
    ]
    },
    12: {
    25: [
    {
    startTime: "00:00",
    endTime: "24:00",
    text: "Christmas Day"
    }
    ],
    26: [
    {
    startTime: "00:00",
    endTime: "21:00",
    text: "Day 2"
    }
    ]
    }
    }
    Mein Aktueller Code:
    PHP-Code:
    <div id="calendarContainer"></div>
    <div id="organizerContainer" style="margin-bottom: 5px;"></div>
    <script src="js/calendar/calendarorganizer.min.js"></script>
    <script>
    "use strict";

    <?php
    $sql 
    "SELECT * FROM events";
    if (
    $erg $conn->query($sql)) {
    while (
    $datastring $erg->fetch_object()) {
    $datas[] = $datastring;
    }
    }
    ?>

    <?php
    $data 
    'var data = "';
    foreach (
    $datas as $content){
    $text_temp strip_tags($content->text);
    $text str_replace("&nbsp;"''$text_temp);
    $data .= $text ' ';
    }
    $data .= '";';
    echo 
    $data;
    ?>

    // initializing a new calendar object, that will use an html container to create itself
    var calendar = new Calendar("calendarContainer", // id of html container for calendar
    "small", // size of calendar, can be small | medium | large
    [
    "Montag", // left most day of calendar labels
    3 // maximum length of the calendar labels
    ], [
    "#ffc107", // primary color
    "#ffa000", // primary dark color
    "#ffffff", // text color
    "#ffecb3" // text dark color
    ],
    {
    days: [ "Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag" ],
    months: [ "Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember" ],
    indicator: true,
    indicator_type: 1, // indicator type, can be 0 (not numeric) | 1 (numeric)
    indicator_pos: "bottom" // indicator position, can be top | bottom
    }
    );

    // initializing a new organizer object, that will use an html container to create itself
    var organizer = new Organizer("organizerContainer", // id of html container for calendar
    calendar, // defining the calendar that the organizer is related to
    data // giving the organizer the static data that should be displayed
    );
    </script>
    Zuletzt geändert von Nightland Driver; 15.12.2020, 22:29.

  • #2
    Mit diesem Code:
    Code:
    <?php
    $data = 'var data = "';
    foreach ($datas as $content){
    $text_temp = strip_tags($content->text);
    $text = str_replace("&nbsp;", '', $text_temp);
    $data .= $text . ' ';
    }
    $data .= '";';
    echo $data;
    ?>
    machst Du es dir viel zu schwer. Der richtige Weg, um eine PHP-Variable an Javascript zu übergeben, ist die Benutzung von JSON:
    Code:
    const data = <?php echo json_encode($datas); ?>;

    Kommentar


    • #3
      Die idee an sich ist ganz gut, leider müssen vor der übergabe an Javascript noch einige Html Tags entfernt werden, zudem benötige ich in dem Javascript Array nur die "$text" spalte aus der Datenbank.

      Daher klappt das leider nicht da ich nun volgende log ausgabe der data variable hab:
      Code:
      (1) […]
      ​
      0: {…}
      ​​
      created: "2020-12-14"
      ​​
      edited: "2020-12-14"
      ​​
      id: "1"
      ​​
      text: "<p>&nbsp; 2020: {</p><p>&nbsp; &nbsp; &nbsp; &nbsp;11: {</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;4: [</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;startTime: \"10:00\",</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;endTime: \"12:00\",</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;text: \"Hey\"</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;]</p><p>&nbsp; &nbsp; &nbsp; &nbsp;},</p><p>&nbsp; &nbsp; &nbsp; &nbsp;12: {</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;25: [</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;startTime: \"00:00\",</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;endTime: \"24:00\",</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;text: \"Christmas Day\"</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;],</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;26: [</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;startTime: \"00:00\",</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;endTime: \"21:00\",</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;text: \"Day 2\"</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;]</p><p>&nbsp; &nbsp; &nbsp; &nbsp;}</p><p>&nbsp; &nbsp;}</p><p>};</p>"
      ​​
      <prototype>: Object { … }
      ​
      length: 1
      ​
      <prototype>: Array []
      calendar.php:240:45
      So sollte es aussehen:
      Code:
      {…}
      ​
      2020: {…}
      ​​
      11: {…}
      ​​​
      4: (1) […]
      ​​​​
      0: {…}
      ​​​​​
      endTime: "12:00"
      ​​​​​
      startTime: "10:00"
      ​​​​​
      text: "Hey"
      ​​​​​
      <prototype>: Object { … }
      ​​​​
      length: 1
      ​​​​
      <prototype>: Array []
      ​​​
      <prototype>: Object { … }
      ​​
      12: {…}
      ​​​
      25: (1) […]
      ​​​​
      0: {…}
      ​​​​​
      endTime: "24:00"
      ​​​​​
      startTime: "00:00"
      ​​​​​
      text: "Christmas Day"
      ​​​​​
      <prototype>: Object { … }
      ​​​​
      length: 1
      ​​​​
      <prototype>: Array []
      ​​​
      26: (1) […]
      ​​​​
      0: {…}
      ​​​​​
      endTime: "21:00"
      ​​​​​
      startTime: "00:00"
      ​​​​​
      text: "Day 2"
      ​​​​​
      <prototype>: Object { … }
      ​​​​
      length: 1
      ​​​​
      <prototype>: Array []
      ​​​
      <prototype>: Object { … }
      ​​
      <prototype>: Object { … }
      ​
      <prototype>: Object { … }
      calendar.php:233:45

      Kommentar


      • #4
        In dem Fall würde ich empfehlen, die Struktur im PHP-Skript vor der Übergabe an JS zu überarbeiten. Für die Übergabe selber ist das Verfahren mit JSON jedoch der richtige Weg.

        Kommentar


        • #5
          Zitat von Sempervivum Beitrag anzeigen
          In dem Fall würde ich empfehlen, die Struktur im PHP-Skript vor der Übergabe an JS zu überarbeiten. Für die Übergabe selber ist das Verfahren mit JSON jedoch der richtige Weg.
          Gut, das habe ich nun gemacht. Ich habe die Abfrage so abgeändert, dass ich nur noch den wert aus dem Feld 'text' erhalte und diesen dann formatiere und ausgebe.
          Leider bekomme ich jetzt die Meldung: "<empty string>" von [console.log(data);]

          Hier der aktuelle Code:
          PHP-Code:
          <script>
          "use strict";

          /*================================================= ====*/

          /*var data = {
          2020: {
          11: {
          4: [
          {
          startTime: "10:00",
          endTime: "12:00",
          text: "Hey"
          }
          ]
          },
          12: {
          25: [
          {
          startTime: "00:00",
          endTime: "24:00",
          text: "Christmas Day"
          link: "https://www.google.com/"
          }
          ],
          26: [
          {
          startTime: "00:00",
          endTime: "21:00",
          text: "Day 2"
          }
          ]
          }
          }
          };*/

          <?php
          $sql 
          "SELECT text FROM events";
          $erg $conn->query($sql);

          $text_temp strip_tags($erg);
          $text str_replace("&nbsp;"''$text_temp);
          ?>

          const data = <?php echo json_encode($text); ?>;

          console.log(data);

          /*================================================= ====*/

          // initializing a new calendar object, that will use an html container to create itself
          var calendar = new Calendar("calendarContainer", // id of html container for calendar
          "small", // size of calendar, can be small | medium | large
          [
          "Montag", // left most day of calendar labels
          3 // maximum length of the calendar labels
          ], [
          "#ffc107", // primary color
          "#ffa000", // primary dark color
          "#ffffff", // text color
          "#ffecb3" // text dark color
          ], {
          days: [ "Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag" ],
          months: [ "Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember" ],
          indicator: true,
          indicator_type: 1, // indicator type, can be 0 (not numeric) | 1 (numeric)
          indicator_pos: "bottom" // indicator position, can be top | bottom
          }
          );

          // initializing a new organizer object, that will use an html container to create itself
          var organizer = new Organizer("organizerContainer", // id of html container for calendar
          calendar, // defining the calendar that the organizer is related to
          data // giving the organizer the static data that should be displayed
          );
          </script>

          Kommentar


          • #6
            Da scheint mir jetzt das Problem auf der PHP-Seite zu liegen. Ist das PDO oder mysqli?

            Kommentar


            • #7
              Mysqli

              Kommentar


              • #8
                Dann hilft das Handbuch: Von $conn->query($sql) bekommst Du ein Ergebnisobjekt, aus dem Du die Zeilen, die die Abfrage zurück geliefert hat, erst heraus holen musst. Z. B. mit fetch_row:
                https://www.php.net/manual/de/mysqli....fetch-row.php

                Kommentar


                • #9
                  Ok, nun ließt er das ganze schonmal aus, jetzt ist die Javascript Variable aber kein Array mehr und gitb nur:
                  Code:
                  2020: {   11: {     4: [       {         startTime: "10:00",         endTime: "12:00",         text: "Hey"       }     ]   },   12: {     25: [       {         startTime: "00:00",         endTime: "24:00",         text: "Christmas Day"       }     ],     26: [       {         startTime: "00:00",         endTime: "21:00",         text: "Day 2"       }     ]   } }};
                  zurück.

                  Kommentar


                  • #10
                    Wenn ich das richtig verstehe, möchtest Du nur die Spalte "text", nach Überarbeitung. Dann müsste dein Code etwa so aussehen:
                    Code:
                    <?php
                    $sql = "SELECT text FROM events";
                    $erg = $conn->query($sql);
                    $resultarr = [];
                    if ($result = $mysqli->query($query)) {
                    
                        /* fetch object array */
                        while ($row = $result->fetch_row()) {
                            $text = $row[0];
                            $text_temp = strip_tags($text);
                            $text = str_replace("&nbsp;", '', $text_temp);
                            $resultarr[] = $text;
                        }
                    
                        /* free result set */
                        $result->close();
                    }
                    ?>
                    (ungetestet). Dann hast Du die Texte in $resultarr und kannst dieses an JS übergeben.
                    Zuletzt geändert von Sempervivum; 16.12.2020, 15:51.

                    Kommentar


                    • #11
                      Ich möchte gerne den inhalt von der Spalte "text" in die Javascript variable: "var data = { -Inhalt von text- };" einfügen.

                      Deinen Vorschlag habe ich geradxe getestet, leider stoppt er dann einfach und lädt den rest der Seite nicht mehr.

                      Kommentar


                      • #12
                        Wie geschrieben, ungetestet und es war noch ein Fehler drin. Lade mal neu, ich habe den Fehler korrigiert. Und wenn es dann nicht funktioniert, schalte die Fehleranzeigen von PHP ein.

                        Kommentar


                        • #13
                          Fehler Anzeige ist aktiviert, zeigt aber nichts an. Ich habe jetzt aber noch ein wenig weiter getestet immer hin und her und habe herausgefunden dass die formatierung vom Array nicht stimmt und er deshalb das nich ausgibt.
                          Habe jetzt die vorherige version des auslesens der Variable genutzt.

                          Der array sieht im quelltext nun wie folgt aus:
                          Code:
                          const data = " 2020: { 11: { 4: [ { startTime: \"10:00\", endTime: \"12:00\", text: \"Hey\" } ] }, 12: { 25: [ { startTime: \"00:00\", endTime: \"24:00\", text: \"Christmas Day\" } ], 26: [ { startTime: \"00:00\", endTime: \"21:00\", text: \"Day 2\" } ] }";
                          Aber er sollte so aussehen damit es ausgelesen werden kann:
                          Code:
                          var data = {2020: {11: {4: [ {startTime: "10:00",endTime: "12:00",text: "Hey"}]},12: {25: [{startTime: "00:00",endTime: "24:00",text: "Christmas Day"link: "https://www.google.com/"}],26: [{startTime: "00:00",endTime: "21:00",text: "Day 2"}]}}};

                          Kommentar


                          • #14
                            Jetzt kann ich dir irgend wie nicht mehr folgen: Du hattest doch geschrieben, dass Du nur die Spalte "text" brauchst?
                            Und wie sah dein Code aus, als Du die erste Variante in deinem letzten Posting bekommen hast?

                            Kommentar


                            • #15
                              Hier noch einmal mein Aktueller Code:
                              PHP-Code:
                              <div id="calendarContainer"></div>
                              <div id="organizerContainer" style="margin-bottom: 5px;"></div>
                              <script src="js/calendar/calendarorganizer.min.js"></script>
                              <script>
                              "use strict";

                              /*================================================= ====*/

                              /*var data = {
                              2020: {
                              11: {
                              4: [
                              {
                              startTime: "10:00",
                              endTime: "12:00",
                              text: "Hey"
                              }
                              ]
                              },
                              12: {
                              25: [
                              {
                              startTime: "00:00",
                              endTime: "24:00",
                              text: "Christmas Day"
                              link: "https://www.google.com/"
                              }
                              ],
                              26: [
                              {
                              startTime: "00:00",
                              endTime: "21:00",
                              text: "Day 2"
                              }
                              ]
                              }
                              }
                              };*/

                              <?php
                              $sql 
                              "SELECT text FROM events";

                              if (
                              $result $conn->query($sql)) {
                              while (
                              $row $result->fetch_row()) {
                              $text_erg $row[0];
                              }
                              $result->close();
                              }

                              $text_temp strip_tags($text_erg);
                              $text str_replace("&nbsp;"''$text_temp);
                              ?>

                              <?php
                              /*$sql = "SELECT text FROM events";
                              $erg = $conn->query($sql);
                              $resultarr = [];
                              if ($result = $mysqli->query($query)) {


                              while ($row = $result->fetch_row()) {
                              $text = $row[0];
                              $text_temp = strip_tags($text);
                              $text = str_replace("&nbsp;", '', $text_temp);
                              $resultarr[] = $text;
                              }


                              $result->close();
                              }*/
                              ?>

                              const data = <?php echo json_encode($text); ?>;

                              console.log(data);

                              /*================================================= ====*/

                              // initializing a new calendar object, that will use an html container to create itself
                              var calendar = new Calendar("calendarContainer", // id of html container for calendar
                              "small", // size of calendar, can be small | medium | large
                              [
                              "Montag", // left most day of calendar labels
                              3 // maximum length of the calendar labels
                              ], [
                              "#ffc107", // primary color
                              "#ffa000", // primary dark color
                              "#ffffff", // text color
                              "#ffecb3" // text dark color
                              ], {
                              days: [ "Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag" ],
                              months: [ "Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember" ],
                              indicator: true,
                              indicator_type: 1, // indicator type, can be 0 (not numeric) | 1 (numeric)
                              indicator_pos: "bottom" // indicator position, can be top | bottom
                              }
                              );

                              // initializing a new organizer object, that will use an html container to create itself
                              var organizer = new Organizer("organizerContainer", // id of html container for calendar
                              calendar, // defining the calendar that the organizer is related to
                              data // giving the organizer the static data that should be displayed
                              );
                              </script>

                              Die var data sollte wie folgt aussehen:
                              Code:
                              var data = {
                              2020: {
                              11: {
                              4: [
                              {
                              startTime: "10:00",
                              endTime: "12:00",
                              text: "Hey"
                              }
                              ]
                              },
                              12: {
                              25: [
                              {
                              startTime: "00:00",
                              endTime: "24:00",
                              text: "Christmas Day"
                              link: "https://www.google.com/"
                              }
                              ],
                              26: [
                              {
                              startTime: "00:00",
                              endTime: "21:00",
                              text: "Day 2"
                              }
                              ]
                              }
                              }
                              };
                              Das funktioniert wie oben zu sehen ist aber nicht, deshalb kann der Kalender die Events nicht anzeigen.
                              Da liegt das Problem, wie bekomme ich das ans laufen?

                              Kommentar

                              homepage-forum.de - Hilfe für Webmaster! Statistiken

                              Einklappen

                              Themen: 56.802   Beiträge: 430.056   Mitglieder: 28.555   Aktive Mitglieder: 54
                              Willkommen an unser neuestes Mitglied, Fohlenfan.

                              Online-Benutzer

                              Einklappen

                              278 Benutzer sind jetzt online. Registrierte Benutzer: 2, Gäste: 276.

                              Mit 3.502 Benutzern waren am 23.01.2020 um 18:20 die meisten Benutzer gleichzeitig online.

                              Die neuesten Themen

                              Einklappen

                              Die neuesten Beiträge

                              Einklappen

                              Lädt...
                              X