Menu aus json erstellen

lano

lano

Aktives Mitglied
Moin.

Ich bin mir grad nicht so sicher ob ich so clever denke.

Folgendes hab ich vor.
Ich lade ein json file.
Ungefähr so:
data.php: 
{
  "dsgvoOverlay": "false",
  "lanoUrl": "redirect.php?lnk=http%3A%2F%2Fwww.lan4lano.de",
  "aktPid": "overview",
  "page": {
    "lang": "de",
    "title": "Example Title",
    "name": "Example Name",
    "author": "Sven M\u00f6nnich",
    "bluBarTitle": "Lanos Example Layout"
  },
  "auth": {
    "sid": "0000000000000",
    "challenge": "2$60000$6000",
    "username": "lano"
  },
  "menu": {
    "meldungen": {
      "txt": "Meldungen",
      "pos": 10,
      "tab": ["liste", "karte"]
    },
    "liste": {
      "txt": "Liste",
      "par": "meldungen",
      "html": "html/liste.html",
      "js": "js/liste.js",
      "css": "css/liste.css"
    },
    "karte": {
      "txt": "Karte",
      "par": "meldungen",
      "html": "html/karte.html",
      "js": "js/karte.js",
      "css": "css/karte.css"
    }
  }
}

Das Augenmerk sollte bei menu hängen bleiben.
Ich denke mir das so.
Ich parse das json und erstelle die menu links. Also zb meldungen
txt ist der Linktext der Angezeigt wird im Menü.
tab wären die dazugehörigen tabs auf der seite.
liste und karte

jetzt weiß ich nicht so genau. parse ich noch mal und nehme alle die ein par haben und hänge das quasi dann an.
oder verfolge ich von meldungen über tabs weiter.

Jemand ne idee ?
 
Also du fragst, welche der beiden Varianten besser ist?

Javascript: 
let variante1 = {
    menu: {
        meldungen: {
            txt: "Meldungen",
            pos: 10,
            tab: ["liste", "karte"],
        },
        liste: {
            txt: "Liste",
            par: "meldungen",
            html: "html/liste.html",
            js: "js/liste.js",
            css: "css/liste.css",
        },
        karte: {
            txt: "Karte",
            par: "meldungen",
            html: "html/karte.html",
            js: "js/karte.js",
            css: "css/karte.css",
        },
    },
};

let variante2 = {
    menu: {
        meldungen: {
            txt: "Meldungen",
            pos: 10,
            tab: [
                {
                    liste: {
                        txt: "Liste",
                        html: "html/liste.html",
                        js: "js/liste.js",
                        css: "css/liste.css",
                    },
                },
                {
                    karte: {
                        txt: "Karte",
                        html: "html/karte.html",
                        js: "js/karte.js",
                        css: "css/karte.css",
                    },
                },
            ],
        },
    },
};

Ich finde Variante 2 besser, weil du da die ganzen Objekte drin hast, ohne erst über eine Referenz / die ID danach suchen zu müssen. Dadurch kannst du auch direkt aus einer Schleife heraus das Menü bauen. Da brauchst du dann auch keine extra-Info über den Parent, weil dieser sich aus der Datenstruktur ergibt.

Außer du verwendest die Menüs auch für andere Bereiche.. dann würde ich deine Original-Variante mit den Referenzen nehmen.

Edit: Irgendwas mit den Klammern hat nicht geklappt..naja.. aber die Grundstruktur kann man ja sehen
 
Kannst es natürlich auch als Mischung machen, wenn die Verschachtelung zu unübersichtlich wirkt:

Javascript: 
const liste = {
    txt: "Liste",
    html: "html/liste.html",
    js: "js/liste.js",
    css: "css/liste.css",
};

const karte = {
    txt: "Karte",
    html: "html/karte.html",
    js: "js/karte.js",
    css: "css/karte.css",
};

const menu = {
    menu: {
        meldungen: {
            txt: "Meldungen",
            pos: 10,
            tab: [liste, karte],
        },
    },
};
 
Zurück
Oben Unten