json einlesen, oder als js skript datei?

[Bennyaa]

Hallo, gobt es ne einfache möglichkeit eine json datei über js einlesen zu können, ohne einen server am laufen zu haben?
oder sollte man hier einfacher eine js datei mit den entsprechenden daten als variable anlegen und über den html body implementieren?

 

[Bagbag]

In welcher Umgebung (Browser, Node, Deno..) und woher kommt die JSON-Datei?

An sich gibt es da mehrere Möglichkeiten:

• import data from './data.json' assert { type: 'json' } - ESM Import
• const data = await import('./data.json', { assert: { type: 'json' } }) - dynamischer ESM Import
• const data = require('./data.json') - CJS Require
• const jsonString = getJsonStringSomehow() (z.B. von einem HTTP-Request)
  -> const data = JSON.parse(jsonString) - selbsterklärend

nachdem ich es nochmals gelesen habe... du meinst wohl im Browser. Dann entweder Variante 1, 2 oder 4. Aber ohne Server? Das heißt du öffnest einfach eine lokale HTML-Datei?

 

[Bennyaa]

ja, wollte ein kleines Berechnungstool erstellen, welches auf einer html datei basiert.
die kollegen sollen die datei einfsch auf dem netztlaufwerk öffnen (wo auch die json liegt),
oder sich den ordner lokal kopieren können.
aktuell habe i h einfach eine js datei mit einer entsprechend deklarierten struktur implementiert.

 

[goonie]

was genau ist das Problem (außer fehlende Grundlagenkenntnisse)?

 

[Bennyaa]

das problem ist, dass man wohl night so ohne weiteres ohne server eine json datei einlesen kann.
hatte es mit nem xmlhttprequest versucht, aber da wurde von chrome der zugriff blockiert.

 

[Bagbag]

Mit Variante 1 und 2, die ich vorhin nannte, sollte (nicht ganz sicher) es funktionieren. import mit assert ist aber ein sehr neues Feature und aktuell nur im Chrome unterstützt.

 

[Bennyaa]

Das kommt dabei raus

 

[Bagbag]

Die Variante, die du genommen hast ist ein statische Import. Das muss als allererstes in einem JavaScript-Modul passieren und es muss auch ein Modul sein und kein einfaches Skript: https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/import

Ansonsten habe ich gerade auch noch etwas rumprobiert... es scheint es lokal wegen Cross-Origin einfach nicht möglich zu sein. Aber du kannst es einfach als .js verpacken, darin eine variable setzen und diese dann aus dem Hauptskript nutzen.

 

[Bennyaa]

Die Variante, die du genommen hast ist ein statische Import. Das muss als allererstes in einem JavaScript-Modul passieren und es muss auch ein Modul sein und kein einfaches Skript: https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/import

Ansonsten habe ich gerade auch noch etwas rumprobiert... es scheint es lokal wegen Cross-Origin einfach nicht möglich zu sein. Aber du kannst es einfach als .js verpacken, darin eine variable setzen und diese dann aus dem Hauptskript nutzen.

Ja so habe ich es auch gemacht.
Ist zwar nicht so schön wie ne externe JSON, aber im Prinzip würde ich damit ja auch nichts anders machen, als in ne Struktur einlesen.

 

[netzgestaltung]

wie beschrieben wurde mit "jsonp" (ist das stichwort)

var meineApp_json = {
    "erster wert": "blah"
};

function meineApp(){
  if ( meineApp_json['erster wert'] === 'blah' ) {
    // do something
  }
}

<script src="path/to/x.js"></script>
<script src="path/to/meineApp.js"></script>

wenn das ganze aus CSV Daten kommt kannst du die hier mit einem template konvertieren: https://www.convertcsv.com/csv-to-json.htm

Top Area

window.meineApp_json = {lb}{br}

Repeating Section for each Line of CSV: (Beispiel mit 5 Spalten)

"{f1}": [{(f2)==""?"null":f2},{(f3)==""?"null":f3},{(f4)==""?"null":f4},{(f5)==""?"null":f5}]

Bottom area:

{br}{rb}

 

[Bennyaa]

Ich habe eine Datei "CurrentTransformers.js" in welcher ich ein Array einer Struktur erzeuge:

// Variable definieren

let CurrentTransformers =[

    {
        "Artikelnummer":"1503510",
        "Typ":"KUW1/30 60/1A L=3mtr Kl.3",
        "Bezeichnung":"Klasse 3, 60 / 1 A",
        "Preis":"78",
        "Klasse":"3"
    },
    {
        "Artikelnummer":"1503511",
        "Typ":"KUW1/30 75/1A L=3mtr Kl.3",
        "Bezeichnung":"Klasse 3, 75 / 1 A",
        "Preis":"78",
        "Klasse":"3"
    },
    {
        "Artikelnummer":"1503512",
        "Typ":"KUW1/30 100/1A L=3mtr Kl.3",
        "Bezeichnung":"Klasse 3, 100 / 1 A",
        "Preis":"78",
        "Klasse":"3"
    }
]

Dann rufe ich diese Struktur beim initialisieren auf und fülle eine selection mit options

function InitPage()
{
    // Füllen des Stromwandler Dropdowns
    for( i=0; i<CurrentTransformers.length; i++ )
    {
        let opt = document.createElement('option');
        opt.innerHTML = CurrentTransformers[i].Typ;
        opt.value = i;
        PageElement.CtSelection.appendChild(opt);
    };
    CtDropdownChanged();
}

Funzt super.
Mir fehlt nur immer so die html und css geschichte, um die seiten schön aufbauen zu können.

 

[Bagbag]

Wenn man kein Corporate Design braucht und es nicht gut kann oder will, macht man das am besten nicht selbst sondern greift auf bspw. Bootstrap, Material Design oder Bulma zurück.

 

[Bennyaa]

Wenn man kein Corporate Design braucht und es nicht gut kann oder will, macht man das am besten nicht selbst sondern greift auf bspw. Bootstrap, Material Design oder Bulma zurück.

Das Problem ist, man hat so die Idee, dass man für gewisse Dinge ein Excel"Tool" erstellen möchte.
Ich wollte nun die Kollegen damit überraschen, dass sie das auch im Browser nutzen können.
Die Funktionen (Diverse Berechnungen) die sind nicht das Problem, sondern hauptsächlich das Design :-D
Möchte halt etwas erstellen, was sowohl auf dem Netzlaufwerk, als auch Lokal laufen kann.

 

[Bagbag]

Du weißt was Bootstrap etc ist? Eben genau das... CSS Frameworks für Design und Layout.

 

[netzgestaltung]

Also ich kann anbieten CSS gegen Geld individuell auf eure Corporate Identity zu bauen. Ansonsten sind Frameworks wie von @Bagbag beschrieben schon ein möglicher Weg das vergleichsweise einfach hinzubekommen.

Weiters gibts auch reine HTML/CSS Templates/Vorlagen wo vielleicht was passendes dabei ist: https://www.free-css.com/free-css-templates

 

[Bennyaa]

Habe gestern noch Material Design light entdeckt und mit zumindest eine Navigation als Vorlage runter gezogen.
(Gut, muss man in jeder Seite einfügen, aber ok).
Oder würdet ihr eher bootstrap empfehlen?
Habe ich noch keine Erfahrung mit, aber schon mal gehört.

 

[Bagbag]

Wenn du templates nutzen würdest, müsstest du es nicht manuell in jede Seite packen. Alternativ über JS den Header etc in jede Seite schreiben.

Ob Bootstrap, Material Design, Bulma oder sonst was hängt vom Design ab, das du haben willst.

 

[Bennyaa]

Wenn du templates nutzen würdest, müsstest du es nicht manuell in jede Seite packen. Alternativ über JS den Header etc in jede Seite schreiben.

Ob Bootstrap, Material Design, Bulma oder sonst was hängt vom Design ab, das du haben willst.

Ah, schaue ich mir nochmal an mit dem Template. Aber dass muss doch auch implementiert werden und entsprechend angepasst werden.

 

[Bagbag]

Glücklicherweise haben das schon viele vor dir gemacht.

Entweder "klassisch" mit Dingen wie Handlebars oder Mustache oder aber modern mit bspw React oder Vue