Html Liste erzeugen aus Datei live?

Guten Abend Community,

ich habe eine Frage an die Programmierer und Entwickler unter euch. Und zwar würde ich gerne eine Liste erstellen mit allen Filmen die ich besonders gut fand und diese in einer Datei speichern. ich möchte eine Seite, die mir diese Liste anzeigt und die Möglichkeit haben, einen neuen Eintrag hinzuzufügen.

Die Grundlagen von html css und co hab ich schon etwas drauf. Ich würde eine Tabelle erstellen und diese wie auch immer mit den Daten füllen aus der Filmlisten-Datei. Ich würde ebenso eine form erstellen, wo ich bspw Titel, Genre und Bewertung eingeben und per button abschicken kann, damit der neue Eintrag in die Datei geschrieben wird.

Aus der Softwareentwicklung in Windows kenne ich für sowas das Ini Dateiformat. Den besten Vergleich dazu habe ich bisher in JSON gefunden. Zuerst habe ich es mit xml versucht, bin jedoch gescheitert und habe auch durch Google den Eindruck bekommen, dass es mit JSON wohl am Sinnvollsten wäre.

Ich hatte es geschafft Einträge aus der json Datei auszulesen, aber hab nicht rausbekommen wie ich sie modifiziere bzw hat nichts funktioniert. Nun frag ich mich gerade, macht das so alles eigentlich Sinn? Oder gibt es einen viel einfacheren Weg mein Ziel zu erreichen?

Wie würde ein erfahrener Entwickler da ran gehn?

Ich hab einen Webserver mit php und co. Root Zugriff habe ich nicht, falls das relevant ist.

1 Antwort

Vom Fragesteller als hilfreich ausgezeichnet

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, Webseite, JavaScript

27.10.2023, 01:23

Wie würde ein erfahrener Entwickler da ran gehn?

Erst werden die Anforderungen ermittelt, dann was gebraucht wird und wie die einzelnen Abläufe / Anwendungsfälle aussehen.

Nun frag ich mich gerade, macht das so alles eigentlich Sinn?

Dein beschriebenes Konzept ist schon in Ordnung. Du kannst die Daten in JSON speichern, denkbar wäre aber auch ein CSV-Format oder die Daten werden direkt in einer Datenbank gespeichert.

Zumindest beim Schreiben der Daten müsstest du dir ein PHP-Skript schreiben, welches die Formulardaten entgegennimmt, evaluiert und in deine Datenquelle schreibt.

Angenommen, du bleibst beim JSON-Format, dann müsstest du die vorhandenen Daten erst auslesen und parsen, danach um die neuen Einträge ergänzen und im Anschluss könntest du das Ergebnis zurück in die Datei schreiben.

Beispiel für das Aktualisieren der Datei:

$movie = array('name' => '...', 'ranking' => '...', /* ... */);

$content = file_get_contents('movies.json');
$movies = json_decode($content);

array_push($movies, $movie);

$newContent = json_encode($movies);
file_put_contents('movies.json', $newContent);

MantaJochen425

Fragesteller

27.10.2023, 01:46

Das mit der csv Datei sieht sehr interessant aus, ich habe sogar ein Beispiel gefunden, wie ich die Liste sortieren kann und Suchfilter anwenden kann. Ich glaube da fuchs ich mich mal intensiver rein. Vielen Dank für deine ausführliche Antwort 👍🏽✌🏽

Ähnliche Fragen

Json in Liste umwandeln C#?

Hey leute

ich versuche die Json Datei auf Bild 1 mit der Methode von Bild 2 zu deserialisieren damit ich eine Liste von Büchern habe, die ich dann auf der Konsole ausgebe.

Der output ist aber wie auf Bild 3 anstatt

11 - Hello - 11

12 - World - 12

Weiß jemand woran das liegt?

...zur Frage

Bestimmten Inhalt einer JSON in HTML ermitteln?

Hallo, ich hätte gerne, dass wenn einem ein Parameter (z.B. 1) gegeben ist, dass JavaScript dann JSON Inhalt nimmt, und genau die Position (also 1) nimmt, und mir daraus eine Date anzeigt.

Wofür brauche ich das?

Ich habe eine HTML Seite, in der alle Items in der JSON in einer Liste angezeigt werden. Wenn man da drauf drückt, soll auf die "anzeige.html" genau die Position weitergegeben werden (z.B. https://thrilltechwebsite.web.app/anzeige.html?pos=1 ), und dort gelesen und angezeigt werden.

Wie mache ich das?

Danke im Vorraus ☺️

...zur Frage

JSON-Datei Inhalt in HTML Anzeigen?

Hallo Zusammen,

meine Webseite holt sich mit request genauer gesagt mit fetch-node eine JSON Datei von einem Server, soweit funktioniert das auch.

Nun weiß ich nicht genau wie kann ich nun den Inhalt aufteilen z.b. in Name, Titel, Beschreibung und diesen Grafisch in HTML darstellen ?

...zur Frage

Javascript Button erstellen?

Hallo,

ich habe einen Button in HTML erstellt und möchte, dass dieser per Click, die Farbe eine Textelements in Schwarz ändert. Den Button habe ich erstellt, komme aber bei der Funktion nicht weiter, kann jemand helfen? Danke im Voraus.

<button type="button" onclick=document.getElementById('Liste').style.color = 'black'">Drück mich!</button>

Aktueller Stand

...zur Frage

JSON Daten in JavaScript ausgeben?

Guten Tag,

ich möchte eine Webseite erstellen bei der man Daten von verschiedenen Superhelden ausgegeben bekommt, diese sind in einer JSON-Datei eingespeichert. Ich wollte fragen, wie man die Namen in eine ausfahrbare Schaltfläche einspeichern kann, so damit diese als Buttons agieren und die Daten von den Helden, dann angezeigt werden.

Danke im Vorraus

...zur Frage

JSON Datei Phrasen?

Ich möchte Texte aus einer JSON Datei lesen und in meinen HTML Code über js in z. B. ein <p></p> schreiben. Wie man eine JSON Datei schreibt weis ich inzwischen aber im Internet finde ich nur viel zu komplexe Codes um die Datei auch richtig einbinden zu können.

Also meine Frage: Was ist die einfachste Möglichkeit einen Text aus einer JSON in mein HTML Code einzubinden

...zur Frage

Webview php seite local hosten?

Hallo, ich bin gerade ein bischen am rumprobieren mit webview in android studio, ich würde gerne eine kleine Website welche php, html und js enthält local auf dem Gerät hosten und auch auf diese in webview anzeigen. Ist dies möglich, sodass ich auch Dateien in eine json Datei schreiben kann?

...zur Frage

Javascript - JSON File in Array umwandeln?

Wie wandele ich einen JSON Datei in Arrays um. Ich bin dabei einen Graph mit Knoten und Kanten zu erstellen. Da möchte ich die unten genannte JSON Datei benutzen. Als Knoten ist dann der index (KayO, BenBeck usw.) und die Kanten sind dann die skills. Da kommt die Frage wie ich den JSON Datei in Array umwandeln möchte.

So sieht mein aktueller JSON Datei aus.

const persona = {
    "KayO": {
      firstname: "Kay",
      lastname: "Ohran",
      Birthdate: "11.09.64",
      Hobby: "footbal, tennis",
      City: "California",
      skills: "java, python, HTML, json",
    },
    BenBeck: {
      firstname: "Ben",
      lastname: "Beckamm",
      Birthdate: "03.95.87",
      Hobby: "football, programming, running",
      City: "New York",
      skills: "css, ruby, php, training, simulator, java, web, webgl, json",
    };

So soll es zum Schluss aussehen:

  const persona = {
    "KayO": [{
      firstname: "Kay",
      lastname: "Ohran",
      Birthdate: "11.09.64",
      Hobby: ["footbal, tennis"],
      City: "California",
      skills: ["java, python, HTML, json"],
    }],
    BenBeck: [{
      firstname: "Ben",
      lastname: "Beckamm",
      Birthdate: "03.95.87",
      Hobby: ["football, programming, running"],
      City: "New York",
      skills: ["css, ruby, php, training, simulator, java, web, webgl, json"],
    }]};

...zur Frage

HTML & CSS in .exe umwandeln?

Hallo,

ich habe eine ganz einfache Webseite mit HTML und CSS gebaut. Dort gibt es Buttons, die zu unterschiedlichen Webseiten führen. So eine Art Favoriten Liste wie in Browsern.

Diese Webseite möchte ich gerne in eine .exe umwandeln. Dann kann der Anwender über ein Desktop Icon dieses "Programm" öffnen. Wenn man dann auf einen Button klickt öffnet sich ganz normal eine externe Browser Webseite. Habe das schon mit .hta probiert, aber dann werden einige CSS Befehle nicht übernommen und die Buttons funktionieren nicht. Würde auch gerne eine Installation ausführen lassen, so dass man dann danach eine .exe. Datei hat.

Kenne mich nur mit HTML und CSS aus. Alles Andere kann ich nicht.

Danke :)

...zur Frage

Cross Origin Anfrage blockiert?

Ich möchte gerade eine REST-API für mein Heimnetzwerk einrichten um über z.B. einen button einen CMD befehl auf dem Server PC auszuführen.

Mein Pythonscript für die API:

from flask import Flask, request, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route('/execute-command', methods=['POST'])
def execute_command():
  # Hier wird der Code zum Ausführen des Befehls eingefügt
  result = "Befehl wurde ausgeführt."
  return jsonify({"response": result})

if __name__ == '__main__':
  app.run(host='0.0.0.0', port=5000)

Mein HTML Script<!DOCTYPE html>
<html>
<head>
  <title>API Test</title>
</head>
<body>
  <button id="executeBtn">Befehl ausführen</button>
<script>
  document.getElementById('executeBtn').addEventListener('click', function() {
    fetch('http://localhost:5000/execute-command', { // Verwende absolute URL
      method: 'POST',
    })
    .then(response => response.json())
    .then(data => {
      console.log(data);
    })
    .catch(error => {
      console.error('Fehler:', error);
    });
  });
</script>
</body>
</html>

Ich bekomme als Fehler von Firefox in der Konsole:

Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf http://localhost:5000/execute-command. (Grund: CORS-Anfrage schlug fehl). Statuscode: (null).

Fehler: TypeError: NetworkError when attempting to fetch resource

Entschuldigung wenn es offensichtlich ist, bin da noch sehr frisch und habe keine Lösung gefunden.

...zur Frage

json Daten in JavaScript auslesen und an html Elemente weiterleiten?

Hi,

mehr schlecht als recht arbeite ich mich gerade durch json und habe tatsächlich mittlerweile herausfunden, dass man zum Laden einer json-Datei ohne jQuery folgenden Ansatz zu brauchen scheint:

function loadJSON(callback) {var xobj = new XMLHttpRequest();
xobj.overrideMimeType("application/json");
xobj.open('GET', 'data.json', true); // Replace 'my_data' with the path to your file
xobj.onreadystatechange = function () {
      if (xobj.readyState == 4 && xobj.status == "200") {
        // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
        callback(xobj.responseText);
      }
};
xobj.send(null);  
}

Wie ich damit dann allerdings Objekte und values auslese und weiterleite, ist mir schleierhaft.

Hier ist erst einmal der json Code

{"employees":
    [
        {
            "firstName": "John", 
            "lastName": "Doe"
        },
        {
            "firstName":"Anna", 
            "lastName":"Smith"
        },
        {
            "firstName":"Peter", 
            "lastName":"Jones"
        }
    ]
}

Meine Idee war ja etwas wie document.getElementbyID oder halt byClassName, um den Content im DOM zu verteilen. Aber irgendwas scheint mir zu fehlen.

Pseudocode mäßig wäre halt sowas schön: getElementbyID('title').data(firstName[0]) Irgendwie so halt ...

Was ich bisher gefunden habe, waren nur Kurzeinleitungen, wie ich den Code in der Konsole ausspucke, js Arrays erstelle (warum auch immer die Leute das in einem json Tutorial als Lösung anbieten) oder html Elemente in JavaScript mit dem json Inhalt erstelle. Wie gesagt, würde ich jedoch gerne den json Inhalt an meine bereits existierenden html Elemente weitergeben.

ps. Wenn ihr dazu eine jade-Lösung habt, wäre das natürlich noch um so prickelnder.

...zur Frage

Wie kann man mit PHP/JavaScript eine neue Website erstellen?

Hey Freunde

wie kann man mit PHP/JavaScript eine neue Website direkt im Browser erstellen? Also man gibt zum Beispiel den Inhalt und Titel an, drückt auf "Submit" und es wird automatisch eine neue Website erstellt, genau mit den Eingaben! Halt so ähnlich wie in WordPress bei einem neuen Blog Eintrag!

Vielen Dank!

--Ergänzung--

Mein Gedanke wäre jetzt gewesen, ein Template zu erstellen. Dann eine weitere Seite mit einem Input Field, deren Input dann PHP Variablen zugewiesen werden. Beim Drücken Des Buttons wird dann die Template Datei kopiert, und der Input eingesetzt!

...zur Frage

Electron Datei Öffnen und Inhalt in Script übergeben?

Ich möchte in meinem Electron Programm im Menü die Möglichkeit bieten eine Datei zu öffnen. Die Datei enthält JSON. Ich möchte den Inhalt dann in meinem Script weiterverarbeiten um ihn anzuzeigen. Das ist mein Code bis jetzt:

main.js

const { app, BrowserWindow, Menu } = require('electron');
const { mainMenu } = require('./menu');
const path = require('path');


const createWindow = () => {
    const mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js'),
        },
    });


    Menu.setApplicationMenu(mainMenu);


    mainWindow.loadFile(path.join(__dirname, "src/index.html"));
};


app.whenReady().then(() => {
    createWindow();


    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) {
            createWindow();
        }
    });
});


app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

menu.js

const { app, Menu, dialog } = require('electron');
const fs = require('fs');


const template = [
    {
        label: 'Datei',
        submenu: [
            {
                label: 'Öffnen',
                accelerator: 'CmdOrCtrl+O',
                click: async () => {
                    const files = await dialog.showOpenDialog({
                        properties: ['openFile'],
                        filters: [
                            { name: 'Json', extensions: ['json'] },
                            { name: 'Alle Dateien', extensions: ['*'] }
                        ]
                    });


                    if (!files || files.canceled || files.filePaths.length === 0) return


                    const file = files.filePaths[0];
                    const fileContent = fs.readFileSync(file, 'utf-8');
                    console.log(fileContent);
                }
            }
        ]
    }
]


module.exports.mainMenu = Menu.buildFromTemplate(template);

index.html (src/index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Seite</h1>
    <script>
        console.log(data);
    </script>
</body>
</html>

Wie kann ich das umsetzten? Ich habe schon von IPC gelesen, es aber nicht wirklich verstanden.

...zur Frage

Javascript & PHP: Wie sortiere ich ein ArrayListe?

Hey Leute, ich hab folgendes Problem...

Ich speichere Scores als Array (username, score) in einem anderen Array, in dem alle Scores mit Namen vorhanden sind.

In meiner Scoreliste möchte ich nun alle Scores sortiert anzeigen. Ich kann die Daten sowohl in PHP, als auch in Javascript sortieren. Kann mir jemanden einen Code geben für eine der beiden Sprachen?

JSON zum Verständnis:

[["max", 1] , ["moritz",2]]

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen