Objekte in Java Script

triceps · 22. Oktober 2020

Hallo Leute,

ich hab ein Problem was das Erstellen von Objekten in meinem JavaScript Projekt angeht.

Ziel ist es hier aus einer Funktion heraus 2 Arrays in meinem Objekt zu speichern, welches dann mittels JSON an ein JAVA-Programm weitergegeben werden soll.

Hier ist etwas von meinem Code:

Code

function bestellung()
{
  var preisDerBox;
  var preisDerBoxen=[];
  var bestellung=[];
  var endsumme=0;
  var name;
  var k=0;

  endsumme=calcPrice();

for(i=0;i<document.liste.length;i++)
  {
    if(document.liste.elements[i].checked)
    {
      /*rechnung*/
      gecheckteBox = document.liste.elements[i].name;
      bestellung.push(gecheckteBox);
      preisDerBox = document.liste.elements[i].value;
      preisDerBoxen.push(preisDerBox);

    }/*ende if*/
  }/*ende for*/



  objektErzeugen(bestellung,preisDerBoxen, endsumme);
  /* bestellung speichert alle namen */
  /*endsumme speichert den Preis */
}

function objektErzeugen(bestellung, preisDerBoxen, endsumme)
{
  var getraenkBez="";
  var gesamtPreis=0.0;
  var preise=0.0;
/*
  diesesBuch = new Buch("JavaScript Workshop",
                      "Addison Wesley", 300,
                      "gelb", "Taschenbuch");
*/
  //Objekt
  bestellungO = new OBestellung(bestellung,preisDerBoxen, endsumme);

  for(i = 0 ; i<bestellung.length ; i++)
  {
    alert(bestellungO.bestellung[i] +  ": " + bestellungO.preisDerBoxen[i]);
  }

  //entweder für jede Bestellung ein objektErzeugen
  //oder für jedes Getränk ein Objekt

}

Alles anzeigen

bestellung beinhaltet hier: ein Array mit einer Liste an Getränkenamen (Strings)

preisDerBoxen : ein Array mit einer Liste an Preisen (Float)

endsumme: stellt den Gesamtpreis dar.

Ich möchte diese Daten mittels JSON an ein Java Programm versenden. Dafür muss ich aber zunächst ein Objekt erzeugen. Oder anders gesagt, ich möchte es über ein Objekt machen.

die übliche Syntax habe ich bereits ausprobiert:

bestellungO{};

bestellungO.bestellung = bestellung;

-> Das gesamte Script funktioniert nicht mehr

bestellungO=new bestellungO();

bestellungO.bestellung = bestellung;

-> nach der Zeile wird Code nicht mehr aufgerufen.

Was mache ich falsch, bzw. was muss ich tun um den Code funktional zu gestalten.

Von einer eleganten Lösung kann man hier an der Stelle noch nicht reden. Das ist mir durchaus bewusst. Dennoch muss ich das Prinzip JSON und Objekte in JavaScript zunächst verinnerlichen und habe mir dafür diese Übung geschrieben.

Ich bin für jede Art von Ratschlag oder Tipp sehr dankbar.

LG

Sempervivum · 22. Oktober 2020

Ich würde das etwas anders aufziehen:

Code

let boxen = [], gesamtPreis = 0;
for(i=0;i<document.liste.length;i++)
  {
    if(document.liste.elements[i].checked)
    {
      /*rechnung*/
      gecheckteBox = document.liste.elements[i].name;
      preisDerBox = document.liste.elements[i].value;
      // Objekt mit Name und Preis der Box zur Liste hinzu fuegen
      boxen.push({name: gecheckteBox, preis: preisDerBox});
      // Preis zu Gesamtpreis addieren
      gesamtPreis += preisDerBox;
    }/*ende if*/
  }/*ende for*/
// Objekt mit gesamter Bestellung erzeugen
let bestellung = {boxen: boxen, gesamtPreis: gesamtPreis};
// JSON erzeugen
let json = JSON.stringify(bestellung);

Alles anzeigen

triceps · 22. Oktober 2020

Ok vielen Dank für deinen Rat! Das macht natürlich mehr Sinn.

Wie bereits erwähnt geht es hier nun für mich mehr darum zu verstehen, warum es bei mir so nicht geht!

Wie bereits erwähnt. Die gängigen Konventionen scheitern alle bei mir.

Daher würde ich gern den Grund dafür wissen.

Sempervivum · 22. Oktober 2020

Dann poste doch Mal genau einen vollständigen Versuch, der nicht funktioniert, dann kann man dir sicher auch konkret sagen, warum das nicht funktioniert.

triceps · 23. Oktober 2020

Code

function bestellung()
{
  var preisDerBox;
  var preisDerBoxen=[];
  var bestellung=[];
  var endsumme=0;
  var name;
  var k=0;

  endsumme=calcPrice();

for(i=0;i<document.liste.length;i++)
  {
    if(document.liste.elements[i].checked)
    {
      /*rechnung*/
      gecheckteBox = document.liste.elements[i].name;
      bestellung.push(gecheckteBox);
      preisDerBox = document.liste.elements[i].value;
      preisDerBoxen.push(preisDerBox);

    }/*ende if*/
  }/*ende for*/



  objektErzeugen(bestellung,preisDerBoxen, endsumme);
  /* bestellung speichert alle namen */
  /*endsumme speichert den Preis */
}

function objektErzeugen(bestellung, preisDerBoxen, endsumme)
{
  var getraenkBez="";
  var gesamtPreis=0.0;
  var preise=0.0;
/*
  diesesBuch = new Buch("JavaScript Workshop",
                      "Addison Wesley", 300,
                      "gelb", "Taschenbuch");
*/
  //Objekt
  bestellungO = new OBestellung(bestellung,preisDerBoxen, endsumme);

  for(i = 0 ; i<bestellung.length ; i++)
  {
    alert(bestellungO.bestellung[i] +  ": " + bestellungO.preisDerBoxen[i]);
  }

  //entweder für jede Bestellung ein objektErzeugen
  //oder für jedes Getränk ein Objekt

}

Alles anzeigen

hier ist der JS-Code. Komplett.

Hier kommt der HTML-Code dahinter:

HTML

<html>
    <header>
        <link href="standard.css" rel="stylesheet"/>
        <script language="javascript" type="text/javascript" src="rechenscript.js"></script>


        <title>
            Cocktailseite
        </title>

    </header>
    <body>
        <!--
        DropDown
    -->

    <nav>
      <ul>
        <li><a href="#" title="Nach Hause">Home</a></li>
        <li class="submenu"><a href="#" title="nix">Regeln</a>
          <ul>

                <li><a href="#" title="Ihr Inventar">Spielregeln</a></li>
                <li><a href="#" title="Unsere Auswahl">Verhaltensregeln</a></li>

            </li>

          </ul>
        </li>
        <li><a href="#" title="Ueber uns">Shop</a></li>
        <li><a href="#" title="So erreichen Sie uns">Logout</a></li>

      </ul>
    </nav>
<div class:"Banner">
    <img src="Banner.jpg" />
</div>
<h2>Unsere Cocktails </h2>

<form name="liste">
    <ul class="Getraenkeliste">
        <li class="auflistung">Cuba Libre<input type="checkbox" name="CubaLibre" id="getrank1" value="6.80" onclick="calcPrice()" class="getraenk"> </li>
        <li class="auflistung">Sex on the Beach<input type="checkbox" name="SexOnTheBeach" id="getrank1" value="7.20" onclick="calcPrice()" class="getraenk"></li>
        <li class="auflistung">Caipirinha<input type="checkbox" name="Caipirinha" id="getrank1" value="7.50" onclick="calcPrice()" class="getraenk"></li>
        <li class="auflistung">Mochito<input type="checkbox" name="Mochito" id="getrank1" value="8.00" onclick="calcPrice()" class="getraenk"></li>
        <li class="auflistung">Apple Teenie<input type="checkbox" name="AppleTeenie" id="getrank1" value="8.20" onclick="calcPrice()" class="getraenk"></li>
        <li class="auflistung">Old Pesces<input type="checkbox" name="OldPesces" id="getrank1" value="9.00" onclick="calcPrice()" class="getraenk"></li>
        <li class="auflistung">Tropic Thunder<input type="checkbox" name="TropicThunder" id="getrank1" value="8.40" onclick="calcPrice()" class="getraenk"></li>
    </ul>
</form>
    <div id="preisfeld">
        <p>0.00</p>
    </div>
    <input type="submit" name="Bestellbutton" value="Bestellen" onclick="bestellung()">




</html>

Alles anzeigen

Ich hoffe damit kannst du mehr anfangen.

Habe auch das Problem, dass wenn ich bestimmte Boxen anwähle, der Endpreis nicht korrekt berechnet wird, bzw das Komma seltsam gesetzt wird.

Scheinbar läuft da was mit den Datentypen in CalcPrice() nicht ganz rund.

Habe dann manuell eine 0 angefügt, damit ich eine normale Ausgabe habe. Wie schon gesagt, es war ein schnelles Kontrukt, um zu dem Punkt zu kommen an dem ich jetzt bin. Ich möchte schließlich hauptsächlich Objekte erzeugen und JSON verwenden.

Vielleicht siehst du ja was das Problem ist. Habe deine Lösung noch nicht implementiert

triceps · 23. Oktober 2020

Code

function calcPrice()
{
  var betrag;
  var betragf;
  var gecheckteBoxen=[];
  var gecheckteBox;
  var endsumme;

  for(i=0;i<document.liste.length;i++)
  {
    if(document.liste.elements[i].checked)
    {
      /*rechnung*/
      gecheckteBox = document.liste.elements[i].name;
      String(gecheckteBox);
      /*namen speichern*/
      betrag = document.liste.elements[i].value;
      /*betrag speichern*/
      Number(betrag);
      Number(summe);
      summe=parseFloat(summe) + parseFloat(betrag);

    }/*ende if*/
  }/*ende for*/
 /*Ausgabe*/
  var element = document.getElementById("preisfeld");

  if(summe===0)
  {
    element.innerHTML = "0.00"+"&#8364;";
  }
  else {
    parseFloat(summe);
    summe.toFixed(2);/* warum funktioniert das nicht*/
    var summeS=String(summe);

    /*Ausgabe */
    element.innerHTML = String(summe)+ "0" + "&#8364;"; //0 wird angefügt, weil toFixed() nicht funktioniert

    endsumme=summe;
    summe=0;
    betrag=0;
    betragf=0;
  }
  return endsumme;
}

Alles anzeigen

triceps · 23. Oktober 2020

Ich würde es toll finden, wenn wir uns zunächst auf das Erstellen eines JSON-Objects konzentrieren könnten.

in deinem Programm oben schreibst du:

let bestellung = {boxen: boxen, preisDerBox: preisDerBox}; //preisDerBox ersetzt in diesem Fall gesamtPreis

//weil darin der einzelPreis für jedes Getränk gespeichert sein soll

wie würde dann der Zugriff aussehen?

bestellung[0,0] wäre dann der boxname

bestellung[0,1] wäre dann der preis der Box?

LG

Sempervivum · 23. Oktober 2020

Um dir über die Struktur des Endergebnisses einen Überblock zu verschaffen, lässt Du sie am bestem mal in der Console ausgeben:

Code

let bestellung = {boxen: boxen, gesamtPreis: gesamtPreis};
console.log(bestellung);

Um dann auf den Gesamtpreis und die Einzelheiten einer Box zuzugreifen, kannst Du dann diesen Code benutzen:

Code

// den Gesamtpreis ausgeben:
console.log(bestellung.gesamtPreis);

// den Namen der ersten Box ausgeben:
console.log(bestellung.boxen[0].name);

// den Preis der ersten Box ausgeben:
console.log(bestellung.boxen[0].preis;

Oder alternativ geht auch diese Syntax:

Code

console.log(bestellung['gesamtPreis']);

triceps · 26. Oktober 2020

let bestellung = {boxen: boxen, gesamtPreis: gesamtPreis};

an der Stelle wäre dann "boxen" das Array mit den Getränkenamen. ?

Dann hätte man :

Boxen[0] = Getränkename1

Boxen[1] = Getränkename2

etc.

das gleiche bezieht sich auf gesamtPreis oder?

dann würde ich praktisch "bestellung" versenden.

Korrekt?

triceps · 26. Oktober 2020

Ich verstehe den grundliegenden Aufbau eines JSON-Objekts.

Nur wie man arrays darin platziert ergibt sich daraus nicht für mich.

bestellung ={boxen: alleGetränkenamen , preise: alleGetränkepreise, gesamtPreis: endsumme};

Erklärt wird immer so:

bestellung =

{"bestellung": "getraenk1" , "Preise" : "PreisFuerCubaLibre"};

so hätte ich es gern!

Ist das nachvollziehbar?

Sempervivum · 26. Oktober 2020

Dieses:

Code

bestellung ={boxen: alleGetränkenamen , preise: alleGetränkepreise, gesamtPreis: endsumme};

geht genau so gut, auch wenn mir selber mein Vorschlag sympatischer ist. Als alleGetränkenamen kannst du problemlos auch dein Array eintragen, ebenso für allGetränkepreise.

triceps · 26. Oktober 2020

ok aktueller Code:

Code

gecheckteBox = document.liste.elements[i].name;
      bestellung.push(gecheckteBox);
      preisDerBox = document.liste.elements[i].value;
      parseFloat(preisDerBox);
      preisDerBoxen.push(preisDerBox);

      bestellungJSON=JSON.stringify(gecheckteBox);
      preisDerBoxenJSON=JSON.stringifiy(preisDerBox);

    //bestellungJSON = {name: bestellungJSON , preis: preisDerBoxenJSON, endsumme: endsumme }

oder

Code

gecheckteBox = document.liste.elements[i].name;
      bestellung.push(gecheckteBox);
      preisDerBox = document.liste.elements[i].value;
      parseFloat(preisDerBox);
      preisDerBoxen.push(preisDerBox);
    

    //bestellungJSON = {name: gecheckteBox, preis: preisDerBoxen, endsumme : endsumme}

Wenn ich das umsetze sollte ich ein derartiges JSON-Objekt transportieren können.

Ist das so korrekt?

Vielen Dank für die erneute Hilfestellung!

LG

Sempervivum · 26. Oktober 2020

Ich gehe davon aus, dass Du alles zusammen in ein JSON packen willst, dann darfst Du das stringify erst auf das Endergebnis anwenden:

Code

let nameDerBoxen = [];
let preisDerBoxen = [];
let gesamtPreis = 0;
for(i=0;i<document.liste.length;i++)
  {
    if(document.liste.elements[i].checked)
    {
      /*rechnung*/
      nameDerBox = document.liste.elements[i].name;
      namederBoxen.push(nameDerBox);
      preisDerBox = document.liste.elements[i].value;
      preisDerBoxen.push(preisDerBox);
      gesamtPreis += Number(preisDerBox);
    }/*ende if*/
  }/*ende for*/

let bestellung = {nameDerBoxen: nameDerBoxen, preisDerBoxen: preisDerBoxen, gesamtPreis: gesamtPreis};
let bestellungJSON = JSON.stringify(bestellung);

Alles anzeigen

triceps · 26. Oktober 2020

ok super!

Vielen vielen Dank!

Das hat mir sehr geholfen!

Objekte in Java Script

Jetzt mitmachen!

Teilen

Tags