(gelöst) PHP innheralb von <script> Tags "richtig" ausführen?

Guten Abend!

Ich bin gerade dabei, die Daten eines MetaModels als Graphen darzustellen. Entlang der X-Achse haben wir mehrere Daten und auf der Y-Achse haben wir Preise. Beide Daten sind jeweils in zwei Arrays in einem Template gespeichert.

$arrayPrices enthält die Preise.
$arrayDates enthält die Daten.

Mithilfe von ChartJs habe ich einiges umgesetzt und auch bereits in Contao selbst- allerdings stoße ich gerade auf ein eigenartiges Problem:
Ich würde gerne mittels

PHP-Code:

---

<?php foreach ($arrayDates as $key => $value): ?>
<?php echo "'" . $value . "'" . ','?>
<?php endforeach; ?>

---

alle Werte der Daten kommagetrennt ausgeben- das sollte beispielsweise so aussehen:

Code:

---

'0.5',
'0.75',
'1',
'1.25',
'1.5',

---

Contao macht mir daraus allerdings viel lieber:

Code:

---

'<span class="text">0.5</span>',
'<span class="text"0.75</span>',
'<span class="text">1</span>',
'<span class="text">1.25</span>',
'<span class="text">1.5</span>',

---

Hier ein konkreter Ausschnitt aus dem Template:

Code:

---

...
<!-- Configure and render charts -->
<script>
        var config_canvas= {
                type: 'line',
                data: {
                        labels: [
                                <?php foreach ($arrayDates as $key => $value): ?>
                                <?php echo "'" . $value . "'" . ','?>
                                <?php endforeach; ?>
                                ],
                        datasets: [{
                                label: 'Leistung Serie',
                                borderColor: "#4e4e4e",
...

---

Mir ist aufgefallen, dass Contao das NUR innerhalb eines <script> Tags macht- ich vermute aus Sicherheitsgründen. Außerhalb davor / danach kann ich per PHP echo es einfach ausgeben, kein Problem.

Meine Frage ist daher: Wie bekomme ich die Werte hier sauber in mein Skript?

EDIT: Lösung

Wie sieht dein ganzes Script aus? Sicher das JavaScript da nichts von sich einfügt?

Absolut- hier das ganze Template:

templates/metamodel_prerendered_CUSTOM_metallnotierung_diagr amm.html5

Code:

---

<?php if (count($this->data)): ?>

<?php foreach ($this->data as $arrItem): ?>
<?php $this->block('item'); ?>
<?php foreach ($arrItem['attributes'] as $field => $strName): ?>
<?php if ((isset($arrItem[$this->getFormat()][$field]) && ($strValue = $arrItem[$this->getFormat()][$field])
    || (isset($arrItem['text'][$field]) && ($strValue = $arrItem['text'][$field])))): ?>
<?php if (!$this->view->get('hideLabels')): ?>
<div class="label"><?= sprintf($GLOBALS['TL_LANG']['MSC']['field_label'], $strName) ?></div>
<?php endif; ?>
<?php endif; ?>

<!-- Werte in Array speichern, Kommas durch Punkte ersetzen-->
<?php $array[] = trim(str_replace(",", ".", $strValue)); ?>

<?php endforeach; ?>

<?php $this->endblock(); ?>
<?php endforeach; ?>

<!-- Funktionen zur Überprüfung von geraden / ungeraden Stellen im Array-->
<?php
function odd($var){
        return($var & 1);
}

function even($var){
        return !($var & 1);
}
?>

<!--Array in Preise und Daten unterteilen-->
<?php
$arrayPrices = array_values(array_filter($array, "odd", ARRAY_FILTER_USE_KEY));
$arrayDates = array_values(array_filter($array, "even", ARRAY_FILTER_USE_KEY));
?>

<?php else : ?>
<?php endif; ?>

<!-- Global definitions -->
<script>
        Chart.defaults.global.animation.duration = 2000;
</script>

<!-- Options -->
<script>
        var options = {
                responsive: true,
                showDatapoints: true,
                legend: {
                        position: 'top'
                },
                tooltips: {
                        mode: 'index',
                        intersect: false,
                },
                hover: {
                        mode: 'nearest',
                        intersect: true
                },
                scales: {
                        xAxes: [{
                                display: true,
                                scaleLabel: {
                                        display: true,
                                        labelString: 'Datum'
                                },
                                ticks: {
                                        beginAtZero: true
                                }
                        }],
                        yAxes: [{
                                display: true,
                                scaleLabel: {
                                        display: true,
                                        labelString: 'Preis in EUR'
                                },
                                ticks: {
                                        beginAtZero: true
                                }
                        }]
                }
        };
</script>
<!-- Canvas -->
<canvas id="canvas"></canvas>

<!-- Configure and render charts -->
<script>
        var config_canvas = {
                type: 'line',
                data: {
                        labels: [
                                <?php foreach ($arrayDates as $key => $value): ?>
                                <?php echo "'" . $value . "'" . ','?>
                                <?php endforeach; ?>
                                ],
                        datasets: [{
                                label: 'Preisverlauf',
                                borderColor: "#4caf50",
                                backgroundColor: "#4caf50",
                                pointRadius: 0,
                                fill: false,
                                spanGaps: false,
                                data: [
                                <?php foreach ($arrayPrices as $key => $value): ?>
                                <?php echo "'" . $value . "'" . ','?>
                                <?php endforeach; ?>
                                ],
                        }]
                },
                options: options
        };

        var ctx_canvas = document.getElementById('canvas').getContext('2d');
        window.myLine = new Chart(ctx_canvas, config_canvas);
</script>

---

EDIT: Gerade nochmal ausprobiert: Ja, benutze ich

PHP-Code:

---

<?php foreach ($arrayDates as $key => $value): ?>
<?php echo "'" . $value . "'" . ','?>
<?php endforeach; ?>

---

roh, dann gibt es den richtigen Output- isoliere ich das in einem <script>Tag, dann gibt es wieder den "span class=..." Salat.

Zitat:

---

Zitat von d33eniz

Mir ist aufgefallen, dass Contao das NUR innerhalb eines <script> Tags macht- ich vermute aus Sicherheitsgründen. Außerhalb davor / danach kann ich per PHP echo es einfach ausgeben, kein Problem.

---

Contao macht hier m.W. nichts, von daher die Frage: Hast Du Deinen Code schon mal ausprobiert und nur die <script> tags entfernt, den Rest aber identisch belassen? Was erhältst Du dann? Edit: jetzt, wo ich meine Antwort und Deinen letzten Post direkt untereinander sehe: Ja, hast Du. Verstehen tue ich es aber trotzdem nicht.

Gibt es einen Link zur Seite, wo man sich das mal anschauen kann?


Das hat zwar mit Deinem Problem zu tun, aber Du könntest die PHP-Ausgabe auch kürzer (lesbarer) schreiben. Z.B. so:

Code:

---

labels: <?= json_encode(array_values($arrayDates)) ?>,

---

Jetzt musste ich eine Menge Text wieder löschen, weil ich die Lösung gefunden habe (das Problem ist wie immer der User):

Jedes Attribut von jedem MetaModel hat ebenfalls ein eigenes Template- mein Datumsfeld hat beispielsweise

templates/mm_attr_timestamp.html5

Code:

---

<span class="text<?= $this->additional_class; ?>"><?= $this->parsedDate; ?></span>

---

Also habe ich das ganz einfach ersetzt durch:
templates/mm_attr_timestamp_CUSTOM_VALUES_ONLY.html5

Code:

---

<?= $this->parsedDate; ?>

---

Das gleiche Spiel nochmal für mein anderes Feld, da es einen anderen Attributstyp hat:

templates/mm_attr_text_CUSTOM_VALUES_ONLY.html5

Code:

---

<span class="text<?= $this->additional_class ?>"><?= $this->raw ?></span>

---

durch

Code:

---

<?= $this->raw ?>

---

Diese Templates jetzt nur noch in den Rendereinstellungen zuweisen und siehe da- wir haben anstatt:
Anhang 23266

Richtig schön:
Anhang 23267

Vielen Dank für das Anstoßen des richtigen Gedankenganges ;)