Object-Eigenschaften auslesen

Discussion in 'Javascript' started by Jörg Weule, Nov 9, 2011.

  1. Hallo,

    wenn ich ein Objekt über JSON geladen habe und die Eigenschaften nicht
    kenne. Wie kann ich die Namen der Eigenschaften des Objektes durchlaufen?

    Selfhtml schreibt zur Definition von Objekten als Beispiel:

    function Farbe (R, G, B) {
    this.R = R;
    this.G = G;
    this.B = B;
    this.hex = "#";
    }

    var Hintergrund = new Farbe("E0", "FF", "E0");

    Wie kann ich die Eigenschaften-Namen "R", "G", "B" und "hex" des
    Objektes Hintergrund ermitteln.

    Dank und Grüße

    Jörg
     
    Jörg Weule, Nov 9, 2011
    #1
    1. Advertisements

  2. Wieso lädst du Objekte, die du nicht kennst?
    Um die Eigenschaften von Objekten (und zwar allgemein, in JavaScript ist
    alles ein Objekt) zu durchlaufen, kannst du die for-in-Schleife verwenden.
    Das hier ist ein Objekt, das mithilfe eines Konstruktors erstellt wurde.
    Wenn du hintergrund instanceof Farbe überprüfst, kannst du davon
    ausgehen dass das Objekt die beschriebenen Eigenschaften hat.

    Dein JSON-gelesenes Objekt hingegen ist "typlos". Als Literal ließe es
    sich auch so schreiben:
    var hintergrund = {R:"E0", G:"FF", B:"E0", hex:"#"};
    Hier kommst du nur mit der for-in-Schleife weiter.
    Einfach auslesen? Es gibt verschiedene Schreibweisen, an
    Objekteigenschaften zu kommen. Erstere kann man nur verwenden, wenn die
    Eigenschaftsnamen den Namenskonventionen entsprechen (z.B. keine
    Leerzeichen).
    alert("Der Rotton ist "+hintergrund.R);
    alert("Der Grünton ist "+hintergrund["G"]);

    Hat das geholfen?
    Andreas
     
    Andreas Bergmaier, Nov 9, 2011
    #2
    1. Advertisements

  3. Ja, Danke -- Jörg

    P.S.: Ich habe eine Struktur: Konzert-Abend hat Bands / Bands haben
    Musiker. Hierfür wollte ich einen hirarchischen Baum-Editor bauen. Am
    besten wäre es, die Struktur des Baumes könnte ich wie ein XML-Schema
    bereitstellen. Für die Knoten des Baumes könnte man kleine
    Editor-Fenster einblenden, wenn ein Knoten selektiert ist. So wären die
    Knoten des Baumes und die Struktur leicht veränderbar. Als
    Eingenschaften könnten Strings bzw. HTML-Texte (tinymce) oder
    Auswahlfelder vorkommen.

    Im Hintergrund sollte eine Datenbank mit Tabellen stehen welche die
    Daten entsprechend aufnimmt. Das ganze gibt dann am Ende ein Backend in
    Joomla oder WordPress.

    Am schönsten wäre es, über die JSON-Struktur der Daten würde ich direkt
    das Backend bauen können...
     
    Jörg Weule, Nov 10, 2011
    #3
  4. Nein, es handelt sich auch um einen Wert vom Typ `Object' mit .[[Class]] ===
    "[object Object]" und um eine `Object'-Instanz (.constructor == Object).

    Bei dem oben von `hintergrund' referenzierten Objekt handelt es sich um
    einen Wert vom Typ `Object' mit .[[Class]] === "[object Object]", jedoch um
    eine `Farbe'-Instanz (.constructor == Farbe).
    Das ist nämlich äquivalent zu

    var hintergrund = new Object();
    hintergrund.R = "E0";
    hintergrund.G = "FF";
    hintergrund.B = "E0";
    hintergrund.hex = "#";
    Was das Aufzählen der eigenen Eigenschaften betrifft, ja.
    Genauer: Wenn es sich um einen *Bezeichner* (/Identifier/) handelt.
    window.alert(…);

    oder

    console.log(…);

    F'up2 de.comp.lang.javascript


    PointedEars
     
    Thomas 'PointedEars' Lahn, Nov 10, 2011
    #4
  5. SELFHTML eignet sich nicht als (JavaScript/ECMAScript-)Referenz. Nicht nur,
    weil es hoffnungslos veraltet ist. Sorry.
    Sauberer Codestil sieht (ansatzweise) so aus:

    function Farbe(r, g, b)
    {
    this.r = r;
    this.g = g;
    this.b = b;
    this.hex = "#";
    }

    var hintergrund = new Farbe("E0", "FF", "E0");

    Nur Konstruktoren, Factorys und Konstanten (bzw. als Konstante verwendete
    Eigenschaften) sollten Bezeichner mit grossem Anfangsbuchstaben haben.

    Weiterhin würde man hier sinnvollerweise durchgängig Englisch verwenden und
    den Eigenschaften sprechende Namen geben. Ausserdem würde man die
    Komponenten als Zahlen speichern, und nur für die Ausgabe bzw. Verwendung in
    HTML/CSS in eine Zeichenfolge konvertieren (flexibler). Zum Beispiel so:

    String.prototype.padLeft = function(width, padChar) {
    var s = String(this);
    var len = s.length;
    if (width > len)
    {
    var a = [];
    a.length = width - len + 1;
    return a.join(padChar) + s;
    }

    return s;
    };

    String.prototype.leadingZero = function(width) {
    return String(this).padLeft(width, "0");
    };

    function Color(red, green, blue)
    {
    this.red = red;
    this.green = green;
    this.blue = blue;
    }

    Color.prototype.toHex = function() {
    return "#" + this.red.toString(16).leadingZero(2)
    + this.green.toString(16).leadingZero(2)
    + this.blue.toString(16).leadingZero(2);
    };

    var bgColor = new Color(0xE0, 0xFF, 0xE0);

    (Negative Zahlen werden hier noch nicht berücksichtigt, ist aber in diesem
    Beispiel auch nicht notwendig. Vgl.
    Es gibt kein Objekt "Hintergrund". Objekte haben eine Identität, (i. d. R.)
    keinen Namen. `hintergrund' (bzw. in Deinem Code `Hintergrund') ist
    lediglich der Bezeichner einer Variablen. Diese Variable speichert
    (aktuell) eine Referenz auf das mit `new Farbe(…)' erzeugte Objekt. Ein
    Objekt kann von mehreren Variablen/Eigenschaften referenziert werden.

    Auf die Objekteigenschaften kannst Du dann mittels Punkt-Zugriffssyntax –

    hintergrund.red

    – oder (falls das nicht geht, siehe andere Antwort) mittels Klammer-
    Zugriffssyntax –

    hintergrund["red"]

    – zugreifen (Gross-/Kleinschreibung beachten).

    X-Post & F'up2 de.comp.lang.javascript. comp.lang.javascript ist die
    internationale Newsgroup, hier kommst Du deshalb mit Englisch am weitesten.
     
    Thomas 'PointedEars' Lahn, Nov 10, 2011
    #5
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.