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

1 Antwort

Vom Fragesteller als hilfreich ausgezeichnet

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, programmieren, JavaScript

16.05.2021, 17:23

Mittels JSON.parse kannst du einen JSON-String in ein JavaScript-Objekt konvertieren.

Beispiel:

const data = '{ "firstname": "Joachim", "age": 33 }';
const person = JSON.parse(data);

console.log(person.firstname);

PS.: Wenn deine JSON-Datei tatsächlich den von dir beschriebenen Inhalt hat, ist sie nicht valid.

So wäre es richtig:

{
  "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",
  }
}

Wobei es schöner (und konsistenter) wäre, alle Keys in Anführungszeichen zu gruppieren.

ashuraRog

Fragesteller

16.05.2021, 19:10

leider darf die Keys nicht in Anfüjhrungszeichen konvertieren. Das Problem ist halt, dass ich nicht weiß wie man diese dann als Kante und als Knote graphisch zeigen lässt.

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;
    }

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

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

Java aus json datei die id auslesen?

Hey ich mache eine anfrage an eine website und bekomme das hier zurrück:

{"status":"success","message":"Deposit successful"}

jetzt will ich den status ausleesen.

ich grig die hier so als String und irgendwie schaffe ich es nicht den string wider in json zurrück zu setzten, so dass ich den satus einfach auslesen kann.

Mfg. Niklas

...zur Frage

Batch Datei parameter übergabe?

Wie kann ich zu einer batch Datei Parameter übergeben?

Stimmt das: install.bat firstname lastname

wie kann man nachher im Skript aufrufen?

Kann jemand ein Beispiel machen?

...zur Frage

Gehalt Trainee Java Developer?

Hallo,

Ich wollte mal wissen, was ein Praktikant Java Developer in österreich verdient.

Ich habe bald mein erstes Vorstellungsgespräch.

Ich muss dazu sagen, ich bin ü40 und Quereinsteiger, und rechne mir keine besonders guten Chancen aus, weil ich die htl vor einem Jahr auch nicht fertig gemacht habe, sondern nur 4 von 6 Semestern. Um meine Chancen bisschen zu erhöhen, habe ich eine kleine App entwickelt, Homepage und eigener Server den ich forwarde.

Ja und sonst halt Basic skills in Java, JavaFX, Sql, plsql, XML, Mongodb, projektentwicklung, json

...zur Frage

GIT ältere Version zurückholen?

Welchen Befehl nimmt man am besten um eine ältere Version eines Projekts zurückzuholen?
Nimmt man da immer git revert?

...zur Frage

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.

...zur Frage

Wie kann man den Dark-Mode Seitenübergreifend machen?

Liebe GuteFrage.net Community,

Wie kann ich dafür sorgen, dass der Dark-Mode aktiviert bleibt, wenn man auf eine Unterseite geht von der Seite? Habe ein wenig JavaScript genutzt, doch ich kenne mich noch nicht so wirklich aus in dem Bereich. Ich hoffe, Ihr könnt es mir erklären. :) Dies ist mein Code:

HTML /Javascript:

<button onclick="myFunction()">Toggle dark mode</button>
            <script>
              function myFunction() {
              var element = document.body;
              element.classList.toggle("dark-mode");
           }
            </script>

Css:

.dark-mode {
  background-image: radial-gradient(#5c5252 2%, transparent 7%),
    radial-gradient(#928f8f 2%, transparent 7%);
  background-color: #16140f;
  background-position: 25px 35px, 50px 50px;
  background-size: 20px 20px; 
}

Eine weitere Frage wäre da noch... Und zwar wie bekomme ich es hin in Boxen die Farbe zu verändern? Bisher verändert sich nur der Hintergrund...

...zur Frage

Prüfen ob Element in JSON vorhanden ist (JAVA)?

Hallo, ich nehme einmal folgendes Beispiel.

Man hat eine simple JSON Datei. Diese Besteht in der obersten ebene aus einem JSON Array, wobei jedes Element darin ein JSON Object ist. Angenommen es handelt sich um Personen. Diese haben das als Eigenschaft wiederum Objekte und Arrays z.B. Ein Array mit den Elementen Kinder (also jedes Kind ein Objekt im besagten Array).

Bei manchen ist es vorhanden bei manchen nicht. Da die Datei umfangreich ist will ich z.B. mittels Schleife alle Kinder ausgeben deren Alter größer als 12 ist.

Wie checke ich bei der Bedingung ab, ob überhaupt Objekte vom Typ Kind vorhanden sind? Was wird zurückgegeben wenn ein Aufgerufenes Element nicht existiert?

Bei dem ganzen benutze ich:

//import com.google.gson.Gson;

...zur Frage

Android Studio (java) text datei erstellen und mit eigner endung speichern?

Wie kann man in Android Studio eine plain/text Datei(oder ähnliche typen), schreibt einen String(Objekt mit gson zu Json String gewandelt) rein und speichert die Datei dann mit eigener Dateinendung. Und wenn möglich als Dokument speichern da man dafür laut Google keine Berechtigung zu Speichern braucht.

Danke im Voraus

...zur Frage

Html und Javascritp Gif ein und ausblenden lassen?

Ich möchte mit Html und Javascript ein Gif per button einfügen lassen. Ich habe schon einiges ausprobiert aber es funktioniert nicht, ich würde mich gerne über Hilfe freuen. (Die Aufgabe war es einen Kopfrechentrainer zu programmieren, als Zusatz ein Bild einfügen,...)

<html>
	<head>
		<title> Kopfrechentrainer Ultimate </title>
	</head>
	<body>
<script language=javascript>


{	var a;
	var b;
	var c;
	var d;
	var f=0;
	var r=0;
	var x;
}	
	function random()
	
{
	a=Math.floor(Math.random()*90)+10;
	document.rechnen.eingabe1.value=a;
	
	b=Math.floor(Math.random()*9)+1;
	document.rechnen.eingabe2.value=b;	
}


	function kontrolle()
{
	c=document.rechnen.vergleich.value;
	if(a*b==c){r++;document.rechnen.richtig.value=""+r}
	if(a*b!=c){f++;document.rechnen.falsch.value=""+f}


	if(r+f==50)
{
	if(r==0){alert('soos')}
	else if(0<r<=10){alert('saas')}
	else if(10<r<=20){alert('sees')}
	else if(20<r<=30){alert('siis')}
	else if(30<r<=40){alert('suus')}
	else if(40<r<=50){alert('fiif')}
}


}
	function zurück()
{
	document.rechnen.richtig.value=""
	document.rechnen.falsch.value=""
}


	function shutdown()
{
	window.open('https://www.youtube.com/watch?v=dQw4w9WgXcQ');
}


	function bka()
{
   	var audio = new Audio('sirene.mp3');
   	audio.play();


	document.getElementById("bkaf").style.display="none";
}


</script>








	
		<font color ="red"> <h2 align = center>  Kopfrechentrainer Ultimate </h2> </font>
		<br>
		<p align = center> <b>  
		Du kannst hier Multiplikationsaufgaben üben. <br>
		Beim Klicken auf den Button werden dir dir nacheinander 50 Aufgaben gestellt.
		</p> </b>
		<br>
		<br>
		<h1 align = center> Bereit? </h1>
		<br>
	<form name="rechnen">
		<input type=button value="Start" onclick=random()>
		<br> <br>
		<INPUT type=text name=eingabe1 value=""> *
		<INPUT type=text name=eingabe2 value=""> =
		<INPUT type=text name=vergleich value="">
		
			<input type=button value="Kontrolle" onclick=kontrolle()>
			<input type=button value="Zurücksetzen" onclick=zurück()>
				
		<br> <br> 
	<p align = center> <b>
		Richtig gelöst Falsch gelöst
	</b> 
		<br> <br>
		<INPUT type=text name=richtig value=""> 
		<INPUT type=text name=falsch value="">
	<br> <br>
		<input type=button value="shutdown" onclick=shutdown()>
	<br> <br>
		<input type=button value="BKA Modus" onclick=bka()>
		
		<audio autoplay>
 		 <source src="sirene.mp3" type="audio/mpeg">
		</audio>
		<br>
	<div id="bkaf">
	<img id="blaulicht" src="blaulicht.gif">	
	</div>


	</form>










	</body>
</html>

...zur Frage

Wie kopiere ich den Text einer json Datei und füge diesen in eine E-Mail ein mit Java?

Ich habe hier eine Java Datei die auf eine andere zugreift welche sich mit den Gmail Servern verbindet... . Jetzt wollte ich gerne das beim ausführen, der text einer json Datei in der Email eingefügt wird. Mir wäre es egal ob die Datei als Anhang oder als Text auftaucht.

package Datei;

public class StartMailSender {

public static void main(String[] args) {

String username = "Email";

String password = "Passwort";

MailSender sender = new MailSender();

sender.login("smtp.gmail.com", "465", username, password);

try {

sender.send("Email-absender", "Name", "Email Empfänger", "Datei", (Text der aus der json Datei)

);

} catch (Exception e) {

e.printStackTrace();

}

...zur Frage

Php Variablen mit Html mischen?

Also ich möchte das hier

echo "<h1> $x </h1> 
<br> $y <br>";

und nicht so

echo "<h1>". $x ."</h1> 
<br>". $y ."<br>";

In JavaScript gibt es die ``mit denen konnte man das wenigstens so machen ${x}

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen