Monatsrückblick Januar/Februar 2026 ist online!

[jmeister79]

Hi,
ich habe hier einen array (100) den ich gerne als Tabelle mit einer Spalte und 100 Zeilen darstellen möchte. Jedes Element des Array soll eine Zeile sein.
Mit welchem Widget mache ich das?
Kapiere das JSON widget "HTML Table" nicht so recht da kommt nur murks raus.

Als simple html widget hab ich leider alle Kommas usw mit dargestellt und keine Zeilenumbrüche. Zeilenumbrüche kann ich zur not mit in den Array schreiben.

Nils

[jmeister79]

@stimezo

Voila!

var myarray = new Array(100);
var logbooktemp;
createState("javascript.0.logbook",'nixx',{type: 'string', name: 'Logbuchobjekt'});
createState("javascript.0.array_log", JSON.stringify(myarray), {type: 'string',name: 'Logbuchtabelle'});

on({id: 'javascript.0.LogText', change: "ne"}, function (obj) {
  if (getState("javascript.0.LogText").val != 'leer') {
     // Daten in temp Array holen
    myarray = JSON.parse(getState('javascript.0.array_log').val);
    //element vorne anfügen
    myarray.unshift(formatDate(new Date(), "YYYY.MM.DD")+'-'+formatDate(new Date(), "hh:mm:ss")+' - '+getState("javascript.0.LogText").val);
    //letztes element löschen
    myarray.pop();
    //in temp variable schreiben um zu übergeben
    logbooktemp = '';
    for (var n = 99; n >=0; n--){
        logbooktemp = n+" - "+myarray[n]+'<br>'+logbooktemp;
    }
    //json objekt zurückschreiben
    setState('javascript.0.array_log', JSON.stringify(myarray));
    //auslösendes objekt zurücksetzen
    setState("javascript.0.LogText"/*LogText*/, 'leer');
    //ausgabeobjekt zurückschreiben
    setState("javascript.0.logbook"/*LogText*/,logbooktemp);
  }
});

[stimezo]

Ich würde per Script das Array in eine HTML Tabelle rendern.
Da bist Du vollkommen flexibel in der Darstellung.

Gruß
Christian

[paul53]

@jmeister79 sagte:

JSON widget "HTML Table"

Vermutlich kommt das JSON widget nicht mit einem echten Array zurecht. Versuche es mal mit einem JSON-String im Datenpunkt.

setState(id, JSON.stringify(array), true);

[jmeister79]

@stimezo

öhm und wie?

[jmeister79]

@paul53
Das tue ich schon:

var n;
var myarray = new Array(100);
createState("javascript.0.array_log", JSON.stringify(myarray), {
    type: 'string',
    name: 'Logbuchtabelle'
});

on({id: 'javascript.0.LogText', change: "ne"}, function (obj) {
  if (getState("javascript.0.LogText").val != 'leer') {
    myarray = JSON.parse(getState('javascript.0.array_log').val);
    //alles um einen verschieben
    for (var n = 99; n >= 1; n--) {
        myarray[n] = myarray[n-1];
    }
    //ins erste element den aktuellen Logeintrag schreiben
    myarray[0] = getState("javascript.0.LogText").val;
    setState('javascript.0.array_log', JSON.stringify(myarray));
    setState("javascript.0.LogText"/*LogText*/, 'leer');
  }
});

klappt soweit,
hab aber auch gar keine ahnung was ich wo bei dem json widget eintragen muss

[jmeister79]

Also der array wird wie folgt im normalen html widget dargestellt:

["eintrag","Eintrag2","Eintrag3",....,"letzter eintrag"]

Beim HTML Table Widget habe ich keinerlei Ansatzpunkt wie ich die daten darstelle. :-(
WEnn ich Den DAtenpnkt eintrage erhalte ich eine Tabelle in der lediglich immer der erste Buchstabe pro Element dargestellt wird bzw wenn ich mehr als eine Spalte einstelle, dann ein Buchstabe pro Zelle.

Nils

Zum Hintergrund: Ich habe mir ein 100 Elemente Array gebaut um ein Logbuch zu speichern bei dem ich bei ejdem neuen Eitnrag den ältesten hinten rauswerfe, das geht sehr gut mit array. mit einem Text Objekt, wie ich es zur Zeit Habe, müsste man entweder zu einem bestimmte Zeitpunkt flushen oder mit bestimmten Zeichen arbeiten die man im text sucht und ab dann mit dem Text kompliziert arbeitet.

[OliverIO]

hat zwar nix mit der Frage zu tun aber für deine Schleife und Einfügen
ist unshift und ein pop effizienter
https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift

[stimezo]

@jmeister79 sagte in Array darstellen in vis:

@stimezo

öhm und wie?

So in etwa:

var htmltabelle = "Hier den Header einfügen";

for (let i = 0; i < arrayname.length; i++) {

htmltabelle=htmltabelle +'<tr>'; 
htmltabelle=htmltabelle + arrayname[i];
htmltabelle=htmltabelle + '</tr>';
}

setState("javascript.0.tabellenname", htmltabelle);

Gruß
Christian

[jmeister79]

@stimezo WOW! Super idee oder in eine variable, dass würde mir schon reichen, man darauf hätte ich ja selber kommen können.

Dann hab ich alle Vorteile eines Array und benutze die variable zur darstellung.

Nils

[stimezo]

@jmeister79 sagte in Array darstellen in vis:

@stimezo WOW! Super idee oder in eine variable, dass würde mir schon reichen, man darauf hätte ich ja selber kommen können.

Dann hab ich alle Vorteile eines Array und benutze die variable zur darstellung.

Nils

Ja, ist meiner Meinung nach das flexibelste.
Kannst Du noch schön mit CSS garnieren.
So hübsch kann ein JSON in der Visu aussehen :-)

Gruß
Christian

[jmeister79]

@stimezo

Voila!

var myarray = new Array(100);
var logbooktemp;
createState("javascript.0.logbook",'nixx',{type: 'string', name: 'Logbuchobjekt'});
createState("javascript.0.array_log", JSON.stringify(myarray), {type: 'string',name: 'Logbuchtabelle'});

on({id: 'javascript.0.LogText', change: "ne"}, function (obj) {
  if (getState("javascript.0.LogText").val != 'leer') {
     // Daten in temp Array holen
    myarray = JSON.parse(getState('javascript.0.array_log').val);
    //element vorne anfügen
    myarray.unshift(formatDate(new Date(), "YYYY.MM.DD")+'-'+formatDate(new Date(), "hh:mm:ss")+' - '+getState("javascript.0.LogText").val);
    //letztes element löschen
    myarray.pop();
    //in temp variable schreiben um zu übergeben
    logbooktemp = '';
    for (var n = 99; n >=0; n--){
        logbooktemp = n+" - "+myarray[n]+'<br>'+logbooktemp;
    }
    //json objekt zurückschreiben
    setState('javascript.0.array_log', JSON.stringify(myarray));
    //auslösendes objekt zurücksetzen
    setState("javascript.0.LogText"/*LogText*/, 'leer');
    //ausgabeobjekt zurückschreiben
    setState("javascript.0.logbook"/*LogText*/,logbooktemp);
  }
});

[stimezo]

@jmeister79 sagte in [Gelöst]Array darstellen in vis:

@stimezo

Voila!

var myarray = new Array(100);
var logbooktemp;
createState("javascript.0.logbook",'nixx',{type: 'string', name: 'Logbuchobjekt'});
createState("javascript.0.array_log", JSON.stringify(myarray), {type: 'string',name: 'Logbuchtabelle'});

on({id: 'javascript.0.LogText', change: "ne"}, function (obj) {
  if (getState("javascript.0.LogText").val != 'leer') {
     // Daten in temp Array holen
    myarray = JSON.parse(getState('javascript.0.array_log').val);
    //element vorne anfügen
    myarray.unshift(formatDate(new Date(), "YYYY.MM.DD")+'-'+formatDate(new Date(), "hh:mm:ss")+' - '+getState("javascript.0.LogText").val);
    //letztes element löschen
    myarray.pop();
    //in temp variable schreiben um zu übergeben
    logbooktemp = '';
    for (var n = 99; n >=0; n--){
        logbooktemp = n+" - "+myarray[n]+'<br>'+logbooktemp;
    }
    //json objekt zurückschreiben
    setState('javascript.0.array_log', JSON.stringify(myarray));
    //auslösendes objekt zurücksetzen
    setState("javascript.0.LogText"/*LogText*/, 'leer');
    //ausgabeobjekt zurückschreiben
    setState("javascript.0.logbook"/*LogText*/,logbooktemp);
  }
});

Das hast Du aber gut gemacht ;-)

Viele Grüße
Christian