© Juli 2024, letzte Änderung am 17.08.24
Mit den Drücken des Knopfes, wird die Funktion printRndTxt() aufgerufen.
Sie erzeugt einen zufälligen Text.
Dieser Text mit JSON Struktur wurde über eine Variable list als Text definiert.
Über JSON.parse wurde das in das Objekt obj umgewandelt.
In obj befindet sich das Array set, hier aus 3 Zeilen Fragen und Antworten.
Im set befinden sich wiederum 2 Objekte: query mit der Frage
und reply, welches wiederum ein Array mit möglichen Antworten enthält.
Per Zufallsgenerator wird dann ein Datenset ausgewählt und ausgegeben.
hier kommt mehrzeiliger
Text hin.
hier kommt mehrzeiliger
Text hin.
Der Code sieht wie folgt aus.
<p id="out_1">
hier kommt mehrzeiliger <br>
Text hin.
</p>
<p id="out_2">
hier kommt mehrzeiliger <br>
Text hin.
</p>
<input type="button" value="create text"/>
<script>
const knob1 = document.querySelector("input"); // nur möglich, da 1. input
const out1 = document.querySelector("#out_1");
const out2 = document.querySelector("#out_2");
function printRndTxt()
{ let list, obj, row, question, answer, x;
list = '{"set":[';
list += '{"query":" Was bedeutet VK?",';
list += '"reply":[ "Vitalkapazität", "AZV + IRV + ERV", "ॐ 28.7.24" ] },';
list += '{"query":" Wirbelsäule:<br> Wieviele Wirbel hat die<br> Halswirbelsäule?",';
LIST += '"reply":[ "7", "ॐ 3.8.24" ] },';
list += '{"query":" Verdauung: <br> Wo fängt Verdauung an?",'
LIST += '"reply":[ "Mundhöhle", "ॐ 3.8.24" ] }';
list += ']}';
obj = JSON.parse( list );
row = Math.floor( Math.random() * obj.set.length );
question = obj.set[row].query;
question = question.replace(/<br>/g, "\n");
out1.innerText = question;
answer = 'Anzahl Antworten: '+ (obj.set[row].reply.length -1) + '\n';
for ( x = 0; x < obj.set[row].reply.length -1; x++ )
{ answer += obj.set[row].reply[x] + '\n';
}
answer = answer.replace(/<br>/g, "\n");
out2.innerText = answer;
console.log(row);
if (knob1.value == "create text")
{ knob1.value = "create new text";
}
}
knob1.addEventListener("click", printRndTxt )
</script>
Zum Anfang
Mit den Aufruf dieser Seite wird zunächst eine JSON-Datei test.json
vom Server gelesen. JSON - Java Script Object Notation
Erst beim Drücken der Taste create text,
wird ein zufälliger Inhalt der Datei ausgegeben.
Um einen Textumbruch zu haben, wurde folgendes definiert
<style>
p.lf { white-space: pre; }
</style>
Der hierfür nötige Code sieht wie folgt aus.
rdJSON1() oder rdJSON2() sind gleichwertig.
<input type="button" value="create text" id="in2"/>
<p class="lf" ></p>
<script>
const out3 = document.querySelector(".lf"); // . für eine Klasse
const knob2 = document.querySelector("#in2"); // # für eine ID
let sets = [];
async function rdJSON1()
{ let myObj = await fetch('test.json');
let myTxt = await myObj.text();
let data = JSON.parse( myTxt );
sets = data.issues;
}
function rdJSON2()
{ fetch('test.json')
.then( response => response.json() )
.then( data =>
{ console.log("found " + data.issues.length +" rows")
sets = data.issues; // Daten ins globale Array
})
.catch( (error) => console.log('Error:', error) );
}
function print1row()
{ let row = Math.floor( Math.random() * issues.length );
out3.innerText = sets[row].firstName + ' ' + sets[row].lastName;
}
rdJSON()2; // read at start data
knob2.addEventListener("click", print1row )
</script>
Die Beispieldatei test.json auf dem Server sieht wie folgt aus.
{ "issues":[
{"firstName":"Ina", "lastName":"Wagner"},
{"firstName":"Anna", "lastName":"Meier"},
{"firstName":"John", "lastName":"Denver"},
{"firstName":"Mike", "lastName":"Renner"},
{"firstName":"Jane", "lastName":"Goodall"},
{"firstName":"Jean", "lastName":"Reno"}
]}
Zum Anfang
Hier ein Beispiel, wie ich eine lokale Datei von meinen
Browser-PC runter laden auf die Seite im Browser.
Dann passe ich per Java Script im Browser die eigene Webseite an,
um den Inhalt dazustellen.
Um einen Umbruch darstellen zu können, ist eine Style Definition notwendig.
<style>
div.in { white-space: pre; background-color: #e0e0e0; }
</style>
Das eigentliche Programm ist recht klein.
Zunächst wird auf das Event gewartet, jemand wählt eine Datei aus.
Nun zeige ich div. Eigenschaften der ersten ausgewälten Datei an.
Danach wird auf das nächste Event, Datei geladen, gewartet.
War das erfolgreich (onload), wird der Inhalt ausgegeben.
Da potentiell unsichere Inhalte geladen werden können,
filter ich zumindest ein paar Dinge aus.
<p>
<label> Wähle eine Text-Datei aus:
<input type="file" id="fileSel" name"json_file"/>
</label>
<div id="out4"> </div>
</p>
<p>
Inhalt:
<div class="in" id="out5"></div>
</p>
<script>
const inEl = document.getElementById("fileSel");
const format = {weekday:"long", month:"long", day:"numeric", hour:"2-digit", minute:"2-digit"};
inEl.addEventListener("change", (e) =>
{ let firstFile, txt;
firstFile = e.target.files[0];
txt = "filename: " + firstFile.name + "\r";
txt += "file size: " + firstFile.size + " bytes \r";
txt += "file type: " + firstFile.type + "\r";
txt += "file date: " + new Date( firstFile.lastModified ).toLocaleString('de-DE',format) + " \r";
document.getElementById("out4").innerText = txt;
if(!firstFile) return;
const fReader = new FileReader();
fReader.onload = (e) =>
{ let txtContent = e.target.result;
document.getElementById("out5").innerText = txtContent;
// .innerHTML you can execute code !
// .textContent
}
fReader.onerror = (e) =>
{ let error = e.target.error;
console.error('while reading ${firstFile.name} error occured', error );
}
fReader.readAsText(firstFile);
});
</script>
Inhalt:
Zum Anfang
Zum Anfang