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.

2 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet

PWolff

06.09.2016, 23:33

https://wiki.selfhtml.org/wiki/JavaScript/DOM/Element/innerHTML

bzw. vorzugsweise die textContent-Eigenschaft ändern:

https://developer.mozilla.org/de/docs/Web/API/Node/textContent

Woher ich das weiß:Berufserfahrung – Software-Entwickler

abbrechen

Beitragsersteller

06.09.2016, 23:57

textContent ist ein guter Tipp, danke.

Nur weiss ich immer noch nicht, welche Syntax die richtige ist.

Um mal beim oben genannten Beispiel zu bleiben, habe ich mit jQuery folgendes ausprobiert:

$.getJSON('data.json', function(data) {
 document.getElementById("demo").textContent = employees.firstName[0];

Ohne Erfolg.

PWolff

07.09.2016, 13:06

@abbrechen

Es ist ein Array von Angestellten, nicht ein Objekt employee mit 2 Arrays.

Nimm statt

employees.firstName[0]

employees[0].firstName

abbrechen

Beitragsersteller

07.09.2016, 17:41

@PWolff

Stimmt !

Funktioniert jetzt, vielen Dank. =) Während dessen habe ich auch gelesen, dass ich in diesem Fall auch data.employees schreiben kann, da die Daten wie von mir angegeben als "data" weitergegeben werden.

So für alle, die wie ich damit Probleme haben und über Google hier gelandet sind.

Soonu

03.02.2017, 16:06

Falls du ein kostenloses tool zum formatieren und validieren suchst dann

https://jsonformatieren.de/?ref=gutefrage

kannst du auch hiermit deine JSON strings validieren ob alles richtig ist zum weiterverarbeiten

Ähnliche Beiträge

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"],
    }]};

...zum Beitrag

Javascript in JSON Datei nachschlagen lassen?

Ich möchte eine Javascript Funktion Programmieren, die einen Text aus einem Eingabefeld(HTML) ausließt, anschließend jeden Buchstaben einzeln in einer JSON Datei nachschlägt und zum Schluss den zu den Buchstaben gehörenden Hexadezimalcode, der in der JSON Datei den Buchstaben zugeordnet ist, in ein anderes Textfeld(HTML) ausgibt.

Das mit dem auslesen und ausgeben, ist auch kein Problem, aber ich weiß nicht, wie ich den Javascript Code, mit der JSON Datei Arbeiten lassen kann, weil ich das noch nie gemacht habe und es nicht ganz verstehe.

Weiß irgendjemand, wie der Code dafür lautet und kann ihn am besten noch verständlich erklären?

...zum Beitrag

Node.js Elemente via name finden und nach Value sortieren?

Hallo zusammen :)

Aktuell hab ich wieder ein bisschen Probleme mit JSON. Ich habe folgendes JSON:

[

 { name: 'total_kills', value: 39781 },

 { name: 'total_deaths', value: 33467 },

 { name: 'total_time_played', value: 2764991 },

 { name: 'total_planted_bombs', value: 1504 },

 { name: 'total_defused_bombs', value: 650 },

 { name: 'total_wins', value: 19162 },

 { name: 'total_damage_done', value: 5867115 },

 { name: 'total_money_earned', value: 106397000 },

 { name: 'total_rescued_hostages', value: 7 },

 { name: 'total_kills_knife', value: 572 },

 { name: 'total_kills_hegrenade', value: 74 },

 { name: 'total_kills_glock', value: 1549 },

 { name: 'total_kills_deagle', value: 2344 },
]

Jetzt muss ich mir alle Einträge rausziehen wo: name = total_kills_* und diese in absteigender Reihenfolge Nach value sortieren. Wie setz ich das am schönsten um?

Nach der Reihe suchen, matchen und ggf. in ein Array schmeißen ginge, aber das muss schöner gehen :)

Danke und LG

...zum Beitrag

HTML - JSON auslesen?

Hallo,

ich möchte auf einer HTML Seite einen Button haben, welcher auf die URL weiterleitet, welche ich als JSON Ausgabe von https://dsb-notifier-api.up.railway.app/USER/PASSWORT bekomme. Die Ausgabe sieht wie folgt aus:

{"url":"https://dsbmobile.de/data/2863460e-5c08-421d-bce3-1f047d02d09e/xxxxxx-62a6-4a6a-b181-xxxxxx/29e6a368-62a6-4a6a-b181-76f98xxxxa.htm"}

Danke im Voraus!

...zum Beitrag

Wie genau funktionieren Load- und Save-Methoden in Java?

Ich habe folgende Klassen gegeben:

class Person {
  private String firstname;

  private String lastname;

  private String sortname;

  public Person() {
  }

  public Person(String firstname, String lastname) {
    this.firstname = firstname;
    this.lastname = lastname;
    updateSortname();
  }

  public String getFirstname() {
    return firstname;
  }

  public void setFirstname(String firstname) {
    this.firstname = firstname;
    updateSortname();
  }

  public String getLastname() {
    return lastname;
  }

  public void setLastname(String lastname) {
    this.lastname = lastname;
    updateSortname();
  }

  public String getSortname() {
    return sortname;
  }

  public void updateSortname() {
    sortname = lastname + firstname;
  }

  @Override
  public String toString() {
    return firstname + " " + lastname + " (" + sortname + ")";
  }

  public static List<Person> load(String filename) throws IOException {
    return null;
  }

  public static Person load(DataInputStream in) throws IOException {
    return null;
  }

  public static void save(String filename, List<Person> list) throws IOException {
  }

  public static void save(DataOutputStream out, Person person) throws IOException {
  }

  public static List<Person> unserialize(String filename) throws IOException, ClassNotFoundException {
    return null;
  }

  public static void serialize(String filename, List<Person> persons) throws IOException {
  }
}

public class PersonTest {
  public static void main(String[] args) throws IOException, ClassNotFoundException {
    List<Person> persons = new ArrayList<>();
    persons.add(new Person("Willy", "Wonka"));
    persons.add(new Person("Charlie", "Bucket"));
    persons.add(new Person("Grandpa", "Joe"));
    System.out.println(persons);

    Person.save("persons.sav", persons);
    persons = Person.load("persons.sav");
    System.out.println(persons);

    Person.serialize("persons.ser", persons);
    persons = Person.unserialize("persons.ser");
    System.out.println(persons);
  }
}

Mein Problem:

Ich soll für dieses Programm die Methoden load, save, unserialize und serialize definieren. Ich habe bisher nur Beispiele dazu gesehen, mit einzelnen Klassenobjekten, wie z.B. einer Klasse Domino. Wie man dabei mit Arrays arbeitet, ist mir nicht klar und ich würde mich freuen, wenn mir jemand das Thema I/O genauer erklären könnte.

...zum Beitrag

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 ☺️

...zum Beitrag

PHP/Passwortvergleich: Warum kommt immer wieder eine Fehlermeldung?

Hallo!

Ich will ein Passwort, das eingegeben wird, vergleichen. Doch es kommt immer wieder diese Fehlermeldung:

Eingegebenes Passwort: n1234
admin:238 Benutzername: nadine
admin:242 Uncaught ReferenceError: form is not defined
  at validatePassword (admin:242:18)
  at HTMLButtonElement.onclick (admin:161:100)

Der Code im AdminController sieht so aus:

public function validatePassword(Request $request, $userName) {
  try {
    $password = $request->input('password');

    // Benutzer anhand des Benutzernamens finden
    $user = User::where('username', $userName)->first();

    // Debugging-Informationen in das Log schreiben
    \Log::info('Benutzername: ' . $userName);
    \Log::info('Benutzer gefunden: ' . ($user ? 'Ja' : 'Nein'));

    if (!$user) {
      return response()->json(['valid' => false, 'message' => 'Benutzer nicht gefunden']);
    }

    // Überprüfen, ob das gespeicherte Passwort im Bcrypt-Format ist
    $passwordInfo = password_get_info($user->password);
    \Log::info('Passwort-Algorithmus: ' . $passwordInfo['algoName']);

    if ($passwordInfo['algoName'] !== 'bcrypt') {
      return response()->json(['valid' => false, 'message' => 'Das gespeicherte Passwort verwendet nicht den Bcrypt-Algorithmus.']);
    }

    // Passwortüberprüfung
    $passwordCheck = Hash::check($password, $user->password);
    \Log::info('Passwort korrekt: ' . ($passwordCheck ? 'Ja' : 'Nein'));

    if ($passwordCheck) {
      return response()->json(['valid' => true]);
    }
    else {
      return response()->json(['valid' => false, 'message' => 'Ungültiges Passwort']);
    }
  }
  catch (\Exception $e) {
    \Log::error('Fehler bei der Passwortvalidierung: ' . $e->getMessage());
    return response()->json(['valid' => false, 'message' => 'Serverfehler. Bitte versuchen Sie es später erneut.'], 500);
  }
}

Und im admin blade so:

function showPasswordModal(route, userName) {
  console.log('showPasswordModal() wurde aufgerufen mit Route:', route);
  $('#passwordModal').modal('show');
  $('#passwordForm').attr('action', route); // Setze die Aktion des Passwort-Formulars auf die gewählte Route
  $('#passwordForm').data('userName', userName);
  console.log(userName);
}

function validatePassword() {
  console.log('validatePassword() wurde aufgerufen');
  var enteredPassword = document.getElementById('passwordInput').value;
  var userName = $('#passwordForm').data('userName');
  console.log('Eingegebenes Passwort:', enteredPassword);
  console.log('Benutzername:', userName);

  $.ajax({
    type: 'POST',
    url: form.action,//$('#passwordForm').attr('action'), // Stellen Sie sicher, dass dies die richtige Route ist
    data: {
      '_token': '{{ csrf_token() }}',
      'password': enteredPassword
    },
    success: function(response) {
      console.log('Server-Antwort:', response);

      if (response.valid) {
        $('#payForm').submit();
      }
      else {
        alert(response.message || 'Falsches Passwort! Bitte versuche es erneut.');
      }
    },
    error: function(xhr, status, error) {
      console.error('AJAX-Fehler:', error);
      alert('Fehler beim Validieren des Passworts. Bitte versuche es später erneut.');
    }
  });

Warum kommt immer wieder eine Fehlermeldung? Ich habe schon alles probiert und das schon seit Stunden! Danke.

...zum Beitrag

jquery function ausführen beim klick auf den eine oder den anderen button?

hallo, ich habe eine jquery function und möchte, dass sie beim klicken auf den eine button und beim klicken auf den anderen button ausgeführt wird.

skript:

$(document).ready(function() {
                $(".kommentarabschicken").click(function(){
                        if($(".kommentareingabe").val() != "") {

                            $.ajax({
                                type: "POST",
                                url: "kommentare.php",
                                data: "kommentareingabe=" + $(".kommentareingabe").val(),
                                cache: false,
                                success: function(html){
                                        $(".scroll").html(html);
                                        $(".kommentareingabe").val();
                                }
                                });
                        }
                        return false;
                    });
                });

jetzt wird sie ausgefürt bei klicken auf kommentarabschicken. Sie soll auch ausgeführt werden, wen man auch kommentaroeffnen klickt. (evtl. wenn die Seite geladen wird)

Vielen Dank im Vorraus!!

...zum Beitrag

Wie zeichne ich einen Graph in Javascript D3.js?

Ich möchte ein Graphendiagramm erstellen. Dazu habe ich eine JSON-Datei erstellt. Die Skills ("java, python, HTML, json") sind die Knoten und die Indexe (KayO, BenBeck, Borea usw.) sind die Kanten. Der Knoten muss eine Mindestgröße haben und darf nicht zu groß werden. Anschließend möchte ich mit einem Klick auf den Knoten die Liste der Publikationen auf der rechten Seite aufrufen können. Dabei soll der aktuell ausgewählte Knoten in der Visualisierung hervorgehoben werden. Ich habe bereits aus diesem Beispiel (https://bl.ocks.org/heybignick/3faf257bbbbc7743bb72310d03b86ee8) was implementiert. Aber leider komme ich nicht weiter.

Diese ist meine JSON Datei:

const persona = {
    "KayO": {
      firstname: "Kay",
      lastname: "Ohran",
      City: "California",
      skills: "java, python, HTML, json",
    },
    BenBeck: {
      firstname: "Ben",
      lastname: "Beckamm",
      City: "New York",
      skills: "css, ruby, php, training, simulator, java, web, webgl, json",
    };

Das ist mein Code

    const bib = persona;
    console.table(bib);
    const graph = {nodes: [{id: "a"}, {id: "b"}], links: [{source: "a", target: "b"}]};
    const linkColor = d3.scaleLinear().domain([0, 1]).range(["#eee", "#000"]);

    const svg = d3.select("svg");
    const width = +svg.attr("width");
    const height = +svg.attr("height");

    const simulation = d3
      .forceSimulation()
      .force("link", d3.forceLink().id(function (d) { return d.id; }))
      .force("charge", d3.forceManyBody())
      .force("center", d3.forceCenter(width / 2, height / 2));

      //linien -> Kanten
      var link = svg.append("g").attr("class", "links")
      .selectAll("line")
      .data(graph.links).enter().append("line")
      .attr("stroke", "#aaa");

      //kreise -> Knoten
    var node = svg.append("g")
      .attr("class", "nodes")
      .selectAll("circle").data(graph.nodes).enter().append("circle")
      .attr("r", 5).call(d3.drag().on("start", dragstarted).on("drag", dragged).on("end", dragended));

    node.append("title").text(d => d.id);


    simulation.nodes(graph.nodes).on("tick", ticked)
simulation.force("link").links(graph.links);

    function ticked() {
      link
        .attr("x1", d => d.source.x)
        .attr("y1", d => d.source.y)
        .attr("x2", d => d.target.x)
        .attr("y2", d => d.target.y);
      node.attr("cx", d => d.x).attr("cy", d => d.y);
    }

    function dragstarted(event) {
      if (!event.active) simulation.alphaTarget(0.3).restart();
      event.subject.fx = event.subject.x;
      event.subject.fy = event.subject.y;
    }

    function dragged(event) {
      event.subject.fx = event.x;
      event.subject.fy = event.y;
    }

    function dragended(event) {
      if (!event.active) simulation.alphaTarget(0);
      event.subject.fx = null;
      event.subject.fy = null;
    }

...zum Beitrag

JavaScript function beenden

Hallo zusammen,

folgende Codes:

function blabla(abbrechen) {

    if (abbrechen == "JA") {
    return;
    }

    if (window.XMLHttpRequest) {
        xmlhttp=new XMLHttpRequest();
    }
    
    else {
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("ausgabe").innerHTML=xmlhttp.responseText;
        }
    }
    
    xmlhttp.open("GET","blablabla.php",true);
    xmlhttp.send();
    
}



setInterval(function () {blabla()}, 5000);
var abbrechen = "JA";
setTimeout(function (){blabla(abbrechen)}, 10000);

Ich verstehe leider nicht, warum meine Function "blabla" nicht nach 10 Sekunden beendet wird. Immerhin gebe ich das mit

setTimeout(function (){blabla(abbrechen)}, 10000);

doch an?!

Über eine Aufklärung wäre ich dankbar!

-> Ich möchte einfach nur, dass die obige Funktion mit dem Interval alle 5 Sekunden ausgeführt wird, aber darunter nach 10 Sekunden mit TimeOut beendet wird. Was passt dem Programm nicht?

Grüße, Hummel

...zum Beitrag

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?

...zum Beitrag

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).

...zum Beitrag

Javascript Ajax Php kein Wert?

Console:

HTML javascript Code ajax:

function send(text){
   console.log("Text kurz vor versenden:\n" +text);
//hier hat er noch einen wert
   $.ajax({
     method: "POST",
     url: "DataSender.php",
     data: { text: text}
   }).done(function( response ) {
       console.log(response);
     console.log("weiterleitung

Php Code Ajax Übertragung wo es nicht geht:

      $text = $_POST['text'];
      $sql = "INSERT INTO `Xss-Data` (`ID`,`DATA`, `created_at`) VALUES (null, '{$text}' , CURRENT_TIMESTAMP)";

      if (empty($text)) {
              //das ist empty!
              echo("Error:\nEs ist leer\nText wäre\n$text");
          } else

Sind die wichtigen Code snippets

Der String hat keinen Wert. Warum? Wie löst man das?

...zum Beitrag

E-Mail Adresse bestätigen! HTML JavaScript Code?

Hallo zusammen, ich brauche einen JavaScript Code für die zwei E-Mail Adresse zu bestätigen. Wenn eine andere oder falsche mail Adresse eintippt wie oben soll eine Fehler Meldung erscheinen!

Habe zwar eine JavaScript Code, aber der geht nicht!

function check() {

if (document.forms['Check'].elements['Bestaetigungsmail'].value != document.forms['Check'].elements['Bestaetigungsmail_2'].value) {

alert("uups!");

}

else {document.forms['Check'].submit();}

}

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen