Wie kann ich in Javascript eine externe JSON File auslesen und verändern?

Hallo, allerseits.

Ich taste mich gerade an HTML heran und will dazu aus einer JSON Datei informationen auslesen. Ich habe einiges im Internet gefunden, aber das ließe sich nur mit Node.JS machen, was bei mir nicht möglich ist (zumindest weiß ich nicht wie). Weiß jemand vielleicht eine Antwort? Bei Node.JS kann man ja einfach

var json = require('example.json');

schreiben und dann

console.log(json);

. aber das funktioniert wie gesagt nur mit Node.JS und nicht in Chrome, der gibt mir dann folgende Fehlermeldung:

Uncaught ReferenceError: require is not defined

Vielen Dank schon mal im vorraus!!!

1 Antwort

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, Technik, JavaScript

18.01.2021, 14:14

Du kannst mittels fetch einen Request an die Datei abschicken.

fetch("url-to-json-file")
  .then(function(response) {
    return response.json();
  })
  .then(function(data) {
    console.log(data); // <<< file content
  })
  .catch(function(error) {
    console.error(error);
  });

Wenn er fehlschlägt, könnte es an CORS liegen. Dann solltest du den Request stattdessen von Serverseite aus starten.

AllesKaese3

Fragesteller

18.01.2021, 19:12

Ich habe eine lokale status.json, die ich fetchen will.

fetch("file:///C:/Users/ole/client/status.json")
  .then(function(response) {
    return response.json();
  })
  .then(function(data) {
    console.log(data); // <<< file content
  })
  .catch(function(error) {
    console.error(error);
  });

So gibt Chrome mir aber die Fehlermeldung

file:///C:/Users/ole/client/status.json. URL scheme must be "http" or "https" for CORS request.
Und:
updatestatus.js:9 TypeError: Failed to fetch
(anonymous) @ updatestatus.js:9
Promise.catch (async)
(anonymous) @ updatestatus.js:8

Ich verstehe das zwar, aber ich weiß nicht wie ich das beheben kann. Das gibt er mir bei jeder Website, zum Beispiel auch http://www.time.jsontest.com

Oder er gibt mir den Fehler

GET http://www.time.jsontest.com/ net::ERR_NAME_NOT_RESOLVED

und die Sache mit failed to fetch. Und die URL http://www.time.jsontest.com/ gibt es sehr wohl, sie im Browser zu öffnen funktioniert Problemlos.

WEnn du noch da bist und mir antworten willst: Es ist für das Projekt nicht wichtig, externe .json files (aus einer URL) zu fetchen sondern nur eine lokale, die im gleichen verzeichnis wie die .js Datei liegt.

Vielen Dank im Vorraus!!

regex9

18.01.2021, 19:29

@AllesKaese3

Deine Webseite muss in jedem Fall von einem Webserver ausgespielt werden. Anderfalls wird dein Browser den Request blocken.

Dieser Aufruf:

fetch("file:///C:/Users/ole/client/status.json")

darf also auch nicht über file:/// laufen, sondern muss über http://localhost/... erfolgen.

Einen Webserver kannst du dir schnell und einfach installieren. Zwei Optionen:

a) Du installierst dir das Softwarepaket XAMPP (Datenbank und Mailserver brauchst du nicht). Im Control Panel startest du den Apache Webserver, deine Webseite legst du in den htdocs-Ordner (im XAMPP-Installationsverzeichnis). Dieser Ordner ist der Root, d.h. http://localhost/ zeigt genau auf diesen Ordner. Angenommen, deine HTML-Datei heißt index.html (und sie liegt wie gesagt in htdocs), wäre der Aufruf dann: http://localhost/index.html. Deine status.json würde ich in den gleichen Ordner packen, um es einfach zu halten.

b) Du installierst dir den IIS (Anleitung; Voraussetzung ist also ein Windows OS). Das Stammverzeichnis wird auf der Seite erwähnt, das weitere Prinzip wäre wie bei a), nur dass der Ordner wwwroot heißt, statt htdocs.

Die time.jsontest-Seite kann ich bei mir nicht öffnen.

AllesKaese3

Fragesteller

18.01.2021, 19:31

@regex9

ja. Den IIS Server habe ich schon mal vor geraumer zeit installiert.

AllesKaese3

Fragesteller

18.01.2021, 19:32

@regex9

Die URL ist seltsam. sie hat ein puunkt nach dem .com : http://time.jsontest.com./

AllesKaese3

Fragesteller

18.01.2021, 19:33

@regex9

Jetzt bekkomme ich das:

Access to fetch at 'http://localhost/data/status.json' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
updatestatus.js:1 GET http://localhost/data/status.json net::ERR_FAILED
(anonymous) @ updatestatus.js:1
auswahl.html:1 Uncaught (in promise) TypeError: Failed to fetch
Promise.then (async)
(anonymous) @ updatestatus.js:5

regex9

18.01.2021, 19:35

@AllesKaese3

Lies dir mal die komplette Fehlermeldung durch und vergleiche mit dem, was ich bereits geschrieben habe.

AllesKaese3

Fragesteller

18.01.2021, 19:35

@regex9

hä? bin ich blöd?

Ich weiß das es so nicht funktionieren kann aber wie geht es denn richtig???

Was mache ich falsch? Der Error ist :

Uncaught ReferenceError: require is not defined at Test.html:12:28

Mein Code

<!DOCTYPE html>
    <html >
        <head>
        <title>Test</title>
        </head>
            <body>


            </body>

            <script>
                const fs = require("fs");
                fs.readFile("test.txt", (err, data) => {
                if (err) throw err;

                console.log(data.toString());
                });
            </script>
    </html>

...zur Frage

Require is not defined Java Script PHP?

Quellcode:

<!doctype html>
<title>Beispiel</title>


<?php $erg = file_get_contents('test.txt'); ?>
    <script>
   const {readFileSync, promises: fsPromises} = require('fs');


filename = "test.txt"


result = readFileSync(filename, 'utf-8');
console.log(result);
</script>

Warum kommt im Browser immer Uncaught ReferenceError: require is not defined

...zur Frage

Braucht man SSH um Node JS apps zu Deployen?

Meine index.js :

const app = require("express")();
const http = require("http").Server(app);
const io = require("socket.io")(http);

http.listen(3000,()=>{
    console.log("working")
})
app.get('/index.html', (req, res) => {
    res.send('<h1>Hello world</h1>');
  });

Lokal funktioniert das, wenn ich localhost:3000/index.html

aufrufe erscheint ein Hello World,

aber wenn ich das ganze über FTP hochlade und url/index.html aufrufe :

Leere Html Seite und Konsole Error :

index.js:1 Uncaught ReferenceError: require is not defined

Also hat der Server garkein Node JS.

SSH hab ich aber garnicht, um dann mit irgendwelchen Ubuntu Commands das zu installieren, sudo apt install nodejs ...

Sry wenn es eine Dumme Frage ist aber ich hab bis jetzt nur Serverseitig Php gemacht und das ist sehr simple.

Man benutzt Fetch oder Ajax und im php skript echo "hello world"; und das wars.

Wollte mich an Node JS Ranwagen, das ganze ist aber viel komplexer.

(Bin bei All inkl)

...zur Frage

HTML/CSS/JAVASCRIPT Taschenrechner Fehler beheben?

ich programmiere grade einen Taschenrechner mithilfe von Javascript, habe auch alles soweit richtig hinbekommen. nur wenn ich einen buchstaben eingebe zeigt mit der browser(in diesem fall t): Uncaught ReferenceError: t is not defined

welche funktion muss ich noch hinzufügen das einfach gar nichts bei einem buchstaben passiert aber auch keine fehlermeldung kommt?

danke

https://hastebin.com/nutoquduca.html

...zur Frage

Node js Mailer?

Hab das ausprobiert emails zu versend mit Text aber wie kann ich dazu noch eine jpg/png datei hinzufügen die im selben ordner ist.

Zum beispiel unter dem

text: 'That was easy!',

Image: path: "bild.jpg"


var nodemailer = require('nodemailer');

var transporter = nodemailer.createTransport({
  service: 'gmail',
  auth: {
    user: 'youremail@gmail.com',
    pass: 'yourpassword'
  }
});

var mailOptions = {
  from: 'youremail@gmail.com',
  to: 'myfriend@yahoo.com',
  subject: 'Sending Email using Node.js',
  text: 'That was easy!'
};

transporter.sendMail(mailOptions, function(error, info){
  if (error) {
    console.log(error);
  } else {
    console.log('Email sent: ' + info.response);
  }
});

Der code ist ein beispiel von https://www.w3schools.com/nodejs/nodejs_email.asp

...zur Frage

Node.js: Werte an HTML Datei übergeben?

Ich habe etwas mit Node.js angefangen und komme einfach nicht mehr weiter. Ich habe das Server erstellen usw. gut verstanden, aber jetzt komme ich nicht mehr weiter. Es kann sein, dass das total einfach ist.

Ich habe anfangs einen Server erstellt. Nun habe ich eine MySQL-Verbindung hergestellt (was auch funktioniert) und mit dem SELECT-Befehl Daten daraus bekommen. Nur stellt sich mir nun einfach die Frage, wie zum Teufel ich den Wert in meine HTML Datei bekomme, um sie auszugeben.

app.js:

var express = require("express");
var app = express();
var mysql = require("mysql");
var con = mysql.createConnection({
  host: "localhost",
  user: "root",
  password: "",
  database: "test"
});

con.connect(function(err) {
  if (err) throw err;
  console.log("Connected to Database!");
});

app.listen(8080, function() {
  console.log("Server is running!");
});

con.query("SELECT id, Zahl FROM test", function(err, result, fields) {
  if (err) throw err;
  console.log(result);
});

app.get("/", function(req, res) {
  res.sendFile(__dirname + "/index.html");
});

Also, wie gesagt, bekomme ich in der Konsole "result" ausgegeben. Aber wie bekomme ich das jetzt z.B. in einen div in meiner index.html?

Und noch eine kleine Nebenfrage: Ist das so richtig, wenn ich einfach andere Seiten so

app.get("/", function(req, res) {
  res.sendFile(__dirname + "/index.html");
});

app.get("/test", function(req, res) {
  res.sendFile(__dirname + "/test.html");
});

erzeugen kann?

Also wenn ich einfach nur mehrere HTML Dateien haben möchte.

Und noch eine kleine Frage: Ich kenne es so, dass man in PHP eigentlich immer MySQL-Datenbanken verwendet. In Node.js geht das ja auch, aber gibt es da auch eine Art vorgesehene Datenbank?

Die kleinen Fragen sind nebensächlich, die erste Frage ist mir erst einmal am wichtigsten. Aber wer es weiß ...

MfG

Tom

...zur Frage

Javascript ES Modules benutzen für Mongoose?

Kann ich mittlerweile in Node.js ES modules benutzen (export, import) anstatt CommonJS (module.exports, require)?

...zur Frage

Node.js eigene sachen mit console.log machen / consolen output?

Hallo, wie kann Ich in node.js oder generell JavaScript eine function callen oder generell den wert der in die konsole ausgegeben wird noch woanders benutzen?

bsp: Console.log('1') wurde von einem Script ausgeführt und jetzt wird consolelog(v) mit dem wert der eben in die console geloggt wurde

...zur Frage

JSON parsen in JavaScript?

Moin, ich habe das Problem, dass ich eine JSON-Response bekomme. Aus dieser würde ich gerne einen bestimmten Wert (beispielsweise "NAME-REPLACEMENT" zu dem Schlüssel "name") auslesen. Kann mir vielleicht jemand dabei weiterhelfen?

Die JSON-Datei habe ich hier verlinkt (aus Datenschutzgründen sind ein paar Sachen übrigens von mir ersetzt worden). https://pastebin.com/Zk7fJQNc

Das ganze soll in JavaScript realisiert werden, das heißt, der Wert soll in eine Variable eingelesen werden (und mit console.log() ausgegeben werden).

...zur Frage

Node.js/Express - req.body funktioniert nicht?

Ich möchte in meiner app.js-Datei Werte aus meiner HTML-Datei benutzen. In meiner HTML-Datei ist ein TextFeld namens "search". Dazu will ich in app.js

var searchText = req.body.search

verwenden, um den Wert des Feldes zu bekommen. Das klappt aber nicht!

Hier mein app.js-Code:

var express = require("express");
var pg = require("pg");
var bodyParser = require("body-parser");
var CON_STRING = process.env.DB_CON_STRING;

if (CON_STRING == undefined) {
  console.log("Error: Environment variable DB_CON_STRING not set!");
  process.exit(1);
}

pg.defaults.ssl = true;
var dbClient = new pg.Client(CON_STRING);
dbClient.connect();

var urlencodedParser = bodyParser.urlencoded({ extended: false });
const PORT = 80;

var app = express();
app.set("views", "views");
app.set("view engine", "pug");
app.get("/search", urlencodedParser, function (req, res) {
  var searchText = req.body.source;
  console.log(searchText); //HIER IST DER FEHLER: Es spuckt "undefined" aus!

  dbClient.query("SELECT * FROM book LIMIT 50 ", function (dbError, dbItemsResponse) {
    res.render("index", {
      BookList: dbItemsResponse.rows
    });
  });
});
app.listen(PORT, function () {
  console.log(App listening on Port ${PORT});
});

Das

console.log(searchText)

gibt mir immer undefined zurück. Wenn ich in der HTML-Datei über ein Script den Wert vom Textfeld ausgebe, dann ist der das, was da drinnen steht. Nur mit req.body scheine ich nicht darauf zugreifen zu können. Ich bekomme immer undefined.

Was mache ich falsch? Wie kann ich es beheben? Hat jemand eine Idee?

...zur Frage

Javascript Fetch API - Wie kann ich den Output als Variable weiterbearbeiten?

Ich hole mir in einer scoreboard.php Datei eine Liste mit Werten aus meiner MySQL Datenbank. Wie kann ich diese PHP Datei aus einem Script heraus aufrufen und die zurückgegebenen Werte weiter verarbeiten? Ich bin soweit, dass ich die Werte zwar mit console.log() ausgeben kann, jedoch hilft mir das nicht, da ich sie nicht ausgeben möchte sondern noch weiter verarbeiten.

var results;
fetch("includes/scoreboard.php")
  .then(res => res.text())
  .then(data => results = data);
  .then(() => console.log(results))

Wie bekomme ich die Ausgabe einer externen PHP Datei in eine JS Variable?

...zur Frage

Javascript "ReferenceError: Hex is not defined"?

Hallo,

ich will einen Byte-Hex-String generieren. Dazu habe ich folgenden Code:

function random_string()
{
    return Hex.encodeHexString(SecureRandom.getInstanceStrong().nextBytes(new byte[16]))
}

Aber es kommt der Fehler "ReferenceError: Hex is not defined"

Warum geht das nicht??

...zur Frage

SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data?

Hallo,

ich versuche mit JavaScript Daten über ein Servlet aus der Datenbank zu holen. In folgende Zeile bekomme ich die Fehlermeldung aus dem Titel:

var katHoler = JSON.parse(xmlhttp.responseText);

Ich habe gelesen, dass meine Funktion eine JSON erwartet. Aber ich habe nur Lösungen mit Libraries wie jQuery gefunden. Die darf ich aber von meinem Professor aus nicht benutzen.

function pupulateDropDown() {
  var servletURL = "./KategorienHolen"
  var xmlhttp = new XMLHttpRequest();

  xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      var katHoler = JSON.parse(xmlhttp.responseText);
      JSON.stringify(katHoler);
      
      var ausgabe = "<a href=" + "DisplayKlamotten" + "?=" + katHoler.kategorie + ">" + katHoler.kategorie + "</a>";

      document.getElementsByClassName("innerDiv").innerHTML = ausgabe;
      console.log(xmlhttp.responseText);
      console.log(katHoler.kategorie);
      console.log(katHoler.id);
    }
  }

  xmlhttp.open("GET", servletURL, true);
  xmlhttp.send();
}

...zur Frage

Dynamischer JSON Pfad?

Kann ich in JavaScript irgendwie direkt auf ein tiefverschachteltes Objekt zugreifen, wenn mir der Pfad bekannt ist?
Angenommen ich habe folgendes JSON:

 let obj = {
  test: {
    test2: {
      test3: {
        test4: "hallo"
      }
    }
  }
}

Mir liegt eine Textdatei mit der Struktur zu den relevanten Daten vor:

test.test2.test3.test4

Wie kann ich direkt auf "hallo" zugreifen, ohne dass ich durch jede Ebene iterieren muss?

Mir schwebt folgendes vor:

str = fs.readFileSync(struct.txt); // test.test2.test3.test4
console.log(obj[str]) // hallo

Ist sowas irgendwie möglich?

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen