JSON in editierbaren HTML Table?
Hallo zusammen,
ich versuche zur Zeit folgende JSON-Datei in eine editierbare, dynamische HTML-Table einzulesen, aber scheitere leider schon beim einlesen der JSON-Datei.
{
"listenPort": 25565,
"backendServerMappings": [
{
"mappingDomain": "example.com",
"backendServerAddress": "192.168.1.10",
"backendServerPort": 25565
},
{
"mappingDomain": "ftb.example.com",
"backendServerAddress": "192.168.1.20",
"backendServerPort": 25565
}
]
}
Als HTML habe ich folgenden Schnipsel schon im Internet gefunden, welcher aber die JSON nicht richtig einliest:
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Cleanstone Configuration</title>
<script src= "https://code.jquery.com/jquery-3.5.1.js"></script>
<style>
table {
margin: 0 auto;
font-size: large;
border: 1px solid black;
}
h1 {
text-align: center;
color: #006600;
font-size: xx-large;
font-family: 'Gill Sans',
'Gill Sans MT', ' Calibri',
'Trebuchet MS', 'sans-serif';
}
td {
background-color: #E4F5D4;
border: 1px solid black;
}
th,
td {
font-weight: bold;
border: 1px solid black;
padding: 10px;
text-align: center;
}
td {
font-weight: lighter;
}
</style>
</head>
<body>
<section>
<h1>Minecraft Cleanstone Configuration</h1>
<!-- TABLE CONSTRUCTION-->
<table id='table'>
<!-- HEADING FORMATION -->
<tr>
<th>Domain</th>
<th>Server Address</th>
<th>Server Port</th>
</tr>
<script>
$(document).ready(function () {
// FETCHING DATA FROM JSON FILE
$.getJSON("config.json",
function (data) {
var student = '';
// ITERATING THROUGH OBJECTS
$.each(data, function (key, value) {
//CONSTRUCTION OF ROWS HAVING
// DATA FROM JSON OBJECT
student += '<tr>';
student += '<td>' +
value.mappingDomain + '</td>';
student += '<td>' +
value.backendServerAddress + '</td>';
student += '<td>' +
value.backendServerPort + '</td>';
student += '</tr>';
});
//INSERTING ROWS INTO TABLE
$('#table').append(student);
});
});
</script>
</section>
</body>
</html>
Ich würde auch gerne die json-Datei editieren können und auch abspeichern können. Wie genau ist das möglich?
Ich bedanke mich schonmal im Voraus und entschuldige mich für ggf. unklare Ausdrucksweisen.
1 Antwort
Das Editieren sollte möglich sein, wenn Du halt ein Formular mit Textfeldern verwendest. Das Speichern ist aber nicht möglich ohne serverseitiges Script, welches die Datei dann auch wirklich auf dem Server ablegt.
Außer, es soll auf dem Client gespeichert werden. Dann müsstest Du Local Storage verwenden. Das ist aber dann kein JSON mehr, sondern eine KeyValue-Liste. https://javascript.info/localstorage
Naja, vermutlich findet er die JSON-Datei nicht. Wird sie denn geladen? (Developer Console hilft eventuell)
@ohwehohach Die JSON-Datei wird geladen, allerdings nicht die richtigen Items der JSON. in der JSON befinden sich mehrere Ebenen, wo ich aber nur die 2. Ebene von einem Item quasi benötige.
Bin leider recht neu in der Materie. Kenne die Fachbegriffe noch nicht.
Auf oberster Ebene ist ja auch kein Array. Du musst für die einzelnen Items konkret nicht data durchlaufen, sondern data.backendServerMappings.
@ohwehohach Alles klar. Vielen Dank! Das war mir tatsächlich nicht bewusst. Jetzt funktioniert das Einlesen und editieren schonmal. Perfekt!
Das Editieren habe ich soeben hinbekommen. Danke dafür! Allerdings steht in jedem Feld weiterhin "undefined". Weißt du zufällig auch, wie ich das gerade biegen kann?