Vill du vara del av diskussionerna i forumet, ställa frågor eller hjälpa andra? Registrera dig här!

add to basket, hur får man till detta?

Trädvy Permalänk
Medlem
Registrerad
Okt 2015

add to basket, hur får man till detta?

Hej!

Försöker få till en liten sak här nu i min kod.

function addToBasket(productId, antal) { varukorg.push(products.find(({ id }) => id === productId)); }

products innehåller en array med 4 olika objekt som har varsit id.

med att man skriver ut

addToBasket(2,3)

så vill jag få ut id nummret 2 i products tre gånger. Jag hittar id nummret 2 och pushar in det till varukorgen, men hur gör man så att det blir tre st i varukorgen?

Big Bang Theory
Howard Wolowitz

Trädvy Permalänk
Medlem
Registrerad
Okt 2015

fick nog till det med

function addToBasket(productId, antal) { for (let i = 0; i < antal; i++) { varukorg.push(products.find(({ id }) => id === productId)); } }

bra lösning? hade uppskattat om någon kan någon bättre lösning, vill lära mig.

eller verkar inte som jag fick till det helt och hållet

Big Bang Theory
Howard Wolowitz

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Aug 2007
Skrivet av Howardtheory:

fick nog till det med

function addToBasket(productId, antal) { for (let i = 0; i < antal; i++) { varukorg.push(products.find(({ id }) => id === productId)); } }

bra lösning? hade uppskattat om någon kan någon bättre lösning, vill lära mig.

eller verkar inte som jag fick till det helt och hållet

Jag ser inget fel i koden du postat. Jag skulle skrivit det som nedan för att inte behöva loopa igenom produkterna flera gånger, men det är absolut inte nödvändigt.

function addToBasket(productId, antal) { const product = products.find(({ id }) => id === productId); for (let i = 0; i < antal; i++) { varukorg.push(product); } }

Trädvy Permalänk
Medlem
Registrerad
Okt 2015

@luddecraft: Kanon, tack, det funka som det skulle innan, såg lite fel haha.

ska nu få ut, så när man skriver getCart()

så ska man få ut innehållet i varukorgen samt pris per produkt och totalsumman, men får inte till detta alls, försökte med en foreach i varukorgen och sedan reduce för att få ut totalsumman, men måste få ut varukorgen, sen pris per produkt och sedan total summan, får inte till detta alls faktiskt.

försökt få till det med detta ungefär lite grann

function getBasket() { console.log(varukorg); let tot = varukorg.forEach(item => { return item.price; }); console.log(tot); }

Big Bang Theory
Howard Wolowitz

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Sep 2008

forEach har inget return value så tot kommer bli undefined. Istället kan man tex använda en reduce för att både printa produktpris och beräkna totalen (glöm inte initial value 0)

function getCart() { console.log(varukorg); const tot = varukorg.reduce((total, item) => { console.log(item.price); return item.price; }, 0); console.log(tot); }

Trädvy Permalänk
Medlem
Registrerad
Okt 2015

@Kraukz:

jag gjorde sådär tidigare, men inte med total, fick inte till det alls med reduce så det räknar totalen :/.

Big Bang Theory
Howard Wolowitz

Trädvy Permalänk
Medlem
Plats
Varberg/Göteborg
Registrerad
Nov 2011
Skrivet av Kraukz:

forEach har inget return value så tot kommer bli undefined. Istället kan man tex använda en reduce för att både printa produktpris och beräkna totalen (glöm inte initial value 0)

function getCart() { console.log(varukorg); const tot = varukorg.reduce((total, item) => { console.log(item.price); return item.price; }, 0); console.log(tot); }

Skrivet av Howardtheory:

@Kraukz:

jag gjorde sådär tidigare, men inte med total, fick inte till det alls med reduce så det räknar totalen :/.

const varukorg = [ { price: 100 }, { price: 200 }, { price: 150 } ] const tot = varukorg.reduce((total, item) => { return total += item.price; }, 0); console.log(tot); // => 450

Värdet behöver adderas till accumulatorn också

| EVGA Z170 FTW | i7 6700k | EVGA GTX 1060 | 16GB DDR4 2400MHz | Cooler Master V850 | Samsung 840 Evo 250GB + 2x WD Black 500GB + Seagate 2TB SSHD |

Laptop: ThinkPad X1 Extreme

Trädvy Permalänk
Medlem
Registrerad
Okt 2015

@BrutalSwede:

tack, fick till reduce nu så fick totalpriset

problemet är att när man ska skriva ut getCart() ska du få ut denna information

Visar innehållet i min varukorg samt pris per produkt och totalpris.

function getCart() { varukorg.forEach(item => { item.price; }); const tot = varukorg.reduce((total, item) => { return (total += item.price); }, 0); return tot; }

försöker med detta, men går inte hem.

får som sagt ut total värdet, men inte innehållet i min varukorg samt pris per produkt.

Vad kan man göra här, behöver lite hjälp med detta!

Big Bang Theory
Howard Wolowitz

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Aug 2013
Skrivet av Howardtheory:

@BrutalSwede:

tack, fick till reduce nu så fick totalpriset

problemet är att när man ska skriva ut getCart() ska du få ut denna information

Visar innehållet i min varukorg samt pris per produkt och totalpris.

function getCart() { varukorg.forEach(item => { item.price; }); const tot = varukorg.reduce((total, item) => { return (total += item.price); }, 0); return tot; }

försöker med detta, men går inte hem.

får som sagt ut total värdet, men inte innehållet i min varukorg samt pris per produkt.

Vad kan man göra här, behöver lite hjälp med detta!

Blir väl bara en console.log per item.price sen en för totalen? Eller ska det skrivas ut på annat sätt?

Skickades från m.sweclockers.com

Trädvy Permalänk
Medlem
Registrerad
Okt 2015

@zaibuf: det ska skrivas ut på annat sätt,

const tot = varukorg.reduce((total, item) => { return (total += item.price); }, 0); return tot;

detta skriver ut totalsumman, man måste skriva någon liknande, så man kan få ut all information ur varukorgen samt pris per produkt.

Big Bang Theory
Howard Wolowitz

Trädvy Permalänk
Medlem
Plats
Varberg/Göteborg
Registrerad
Nov 2011
Skrivet av Howardtheory:

@zaibuf: det ska skrivas ut på annat sätt,

const tot = varukorg.reduce((total, item) => { return (total += item.price); }, 0); return tot;

detta skriver ut totalsumman, man måste skriva någon liknande, så man kan få ut all information ur varukorgen samt pris per produkt.

Beror väl lite på hur du vill presentera det
Skall allt bara loggas ut i console.log, eller ska det presenteras som HTML?

| EVGA Z170 FTW | i7 6700k | EVGA GTX 1060 | 16GB DDR4 2400MHz | Cooler Master V850 | Samsung 840 Evo 250GB + 2x WD Black 500GB + Seagate 2TB SSHD |

Laptop: ThinkPad X1 Extreme

Trädvy Permalänk
Medlem
Registrerad
Okt 2015

@BrutalSwede: bara i console, har provat med detta nu

function getBasket() { let t = varukorg.map(item => { return item.price; }); const tot = varukorg.reduce((total, item) => { return (total += item.price); }, 0); return [t, tot]; }

får ut varukorgens price, men det blir fasen inte bra när man retunerar ut båda två med return [t, tot]

jag vill liksom få ut det så här typ om ni förstår:

varukogens information
pris per produkt
totalsumma

men får absolut inte ut det så nu :/

Big Bang Theory
Howard Wolowitz

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Aug 2013
Skrivet av Howardtheory:

@BrutalSwede: bara i console, har provat med detta nu

function getBasket() { let t = varukorg.map(item => { return item.price; }); const tot = varukorg.reduce((total, item) => { return (total += item.price); }, 0); return [t, tot]; }

får ut varukorgens price, men det blir fasen inte bra när man retunerar ut båda två med return [t, tot]

jag vill liksom få ut det så här typ om ni förstår:

varukogens information
pris per produkt
totalsumma

men får absolut inte ut det så nu :/

Är väl bara att i forEach skriva console.log och sen i slutet av funktionen skriva ut totalen med en console.log.
map används om du vill ändra din array och returera en ny array, här ska du bara skriva ut priserna.

Men känns som att funktionen gör flera jobb då. En funktion ska bara göra en sak, dela upp det i två.
getCartProducts
getCartTotal

getCart kan i sin tur anropa dessa två funktioner om så önskas.

Ska du följa objektorientering bör Cart vara en klass med dessa metoder inkapslade.

Skickades från m.sweclockers.com

Trädvy Permalänk
Medlem
Plats
Varberg/Göteborg
Registrerad
Nov 2011
Skrivet av Howardtheory:

@BrutalSwede: bara i console, har provat med detta nu

function getBasket() { let t = varukorg.map(item => { return item.price; }); const tot = varukorg.reduce((total, item) => { return (total += item.price); }, 0); return [t, tot]; }

får ut varukorgens price, men det blir fasen inte bra när man retunerar ut båda två med return [t, tot]

jag vill liksom få ut det så här typ om ni förstår:

varukogens information
pris per produkt
totalsumma

men får absolut inte ut det så nu :/

Om funktionen inte nödvändigtvis behöver returnera värdena, kan man göra på följande vis med template strings

const varukorg = [ { name: 'Såg', price: 100 }, { name: 'Bågfil', price: 200 }, { name: 'Hammare', price: 150 }, { name: 'Spik', price: 5 }, ] function printBasket() { varukorg.forEach((item) => { console.log(`${item.name}\t ${item.price}\t SEK`) }) const tot = varukorg.reduce((total, item) => { return (total += item.price); }, 0); console.log(`Summa:\t ${tot}\t SEK`) } printBasket();

Resultat:

Såg 100 SEK Bågfil 200 SEK Hammare 150 SEK Spik 5 SEK Summa: 455 SEK

| EVGA Z170 FTW | i7 6700k | EVGA GTX 1060 | 16GB DDR4 2400MHz | Cooler Master V850 | Samsung 840 Evo 250GB + 2x WD Black 500GB + Seagate 2TB SSHD |

Laptop: ThinkPad X1 Extreme

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Aug 2013
Skrivet av BrutalSwede:

Om funktionen inte nödvändigtvis behöver returnera värdena, kan man göra på följande vis med template strings

const varukorg = [ { name: 'Såg', price: 100 }, { name: 'Bågfil', price: 200 }, { name: 'Hammare', price: 150 }, { name: 'Spik', price: 5 }, ] function printBasket() { varukorg.forEach((item) => { console.log(`${item.name}\t ${item.price}\t SEK`) }) const tot = varukorg.reduce((total, item) => { return (total += item.price); }, 0); console.log(`Summa:\t ${tot}\t SEK`) } printBasket();

Resultat:

Såg 100 SEK Bågfil 200 SEK Hammare 150 SEK Spik 5 SEK Summa: 455 SEK

Det var det jag ville få fram, men önskemål om att TS försökte själv 😁

Skickades från m.sweclockers.com

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Aug 2007

Det som är viktigt i en reduce-funktion är vad som returneras. Ni kan förenkla den på detta sätt:

const tot = varukorg.reduce((total, item) => total + item.price, 0)

Det ser lite märkligt ut när ni skriver nedan, eftersom det gör en helt onödig tilldelning

return (total += item.price)

Trädvy Permalänk
Medlem
Registrerad
Okt 2015

@BrutalSwede:

skit snyggt, funkade skit bra vanligtvis, men problemet är att man ska bara kunna skriva ut getCart() i console så ska informationen i varukorgen komma fram, pris per produkt och totalsumma, vilket det inte gör med denna kod, det blir undefined. Och vad jag har förstått så går det ej retunera ut i en foreach loop.

hur skulle man kunna lösa detta, så allt det kommer fram med endast getCart() i webbläsarens console?

Big Bang Theory
Howard Wolowitz

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Aug 2013
Skrivet av Howardtheory:

@BrutalSwede:

skit snyggt, funkade skit bra vanligtvis, men problemet är att man ska bara kunna skriva ut getCart() i console så ska informationen i varukorgen komma fram, pris per produkt och totalsumma, vilket det inte gör med denna kod, det blir undefined. Och vad jag har förstått så går det ej retunera ut i en foreach loop.

hur skulle man kunna lösa detta, så allt det kommer fram med endast getCart() i webbläsarens console?

Fungerar utmärkt då jag testar det. Foreach returerar inget värde nej, det är en loop som itererar alla element bara.

const cart = [ {name : "Mjölk", price : 10}, {name : "Ost", price : 45}, {name : "Spaghetti", price : 25}, ]; function getCart(){ cart.forEach(product => { console.log(product.price) }); const total = cart.reduce((total, product) => total + product.price, 0); console.log(total); } getCart(); // 10 // 45 // 25 // 80

https://jsfiddle.net/5s6b84or/

Trädvy Permalänk
Medlem
Registrerad
Okt 2015

Tack alla för svaren, fick till det, var ett fel i min console i chrome jag hade.

Tänkte en sak, vi sysslar lite med api nu,

och vi ska lägga in ett svar vi får tillbaka i en tom array, men problemet är att svaren man får tillbaka är i en array, hur kan man få ut de strängar till den tomma arrayen utan arrayen dom ligger i?

(3) [Array(3), Array(3), Array(3)] 0: (3) ["Yellow", "Brown", "Blue"] 1: (3) ["United Kingdom", "Brazil", "South Africa"] 2: (3) ["Chicago Cubs", "Cincinnati Reds", "St. Louis Cardinals"] length: 3 __proto__: Array(0)

det ser ut så här, vill få bort varje array från 0 1 och 2, så dom ligger i stringar bara i den tomma arrayen.

koden jag har är

let arr = []; let correctAnswer = []; let wrongAnswer = []; let url = "https://opentdb.com/api.php?amount=3&category=21"; let quest; fetch(url) .then(res => res.json()) .then(data => { data.results.forEach(question => { render(question); }); }); function render(question) { arr.push(question.question); correctAnswer.push(question.correct_answer); wrongAnswer.push(question.incorrect_answers); }

Big Bang Theory
Howard Wolowitz

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Aug 2013
Skrivet av Howardtheory:

Tack alla för svaren, fick till det, var ett fel i min console i chrome jag hade.

Tänkte en sak, vi sysslar lite med api nu,

och vi ska lägga in ett svar vi får tillbaka i en tom array, men problemet är att svaren man får tillbaka är i en array, hur kan man få ut de strängar till den tomma arrayen utan arrayen dom ligger i?

(3) [Array(3), Array(3), Array(3)] 0: (3) ["Yellow", "Brown", "Blue"] 1: (3) ["United Kingdom", "Brazil", "South Africa"] 2: (3) ["Chicago Cubs", "Cincinnati Reds", "St. Louis Cardinals"] length: 3 __proto__: Array(0)

det ser ut så här, vill få bort varje array från 0 1 och 2, så dom ligger i stringar bara i den tomma arrayen.

koden jag har är

let arr = []; let correctAnswer = []; let wrongAnswer = []; let url = "https://opentdb.com/api.php?amount=3&category=21"; let quest; fetch(url) .then(res => res.json()) .then(data => { data.results.forEach(question => { render(question); }); }); function render(question) { arr.push(question.question); correctAnswer.push(question.correct_answer); wrongAnswer.push(question.incorrect_answers); }

Läs på om destructoring.
https://dev.to/sarah_chima/destructuring-assignment---arrays-...

Skickades från m.sweclockers.com

Trädvy Permalänk
Medlem
Registrerad
Okt 2015

DOM, hur får man tag i ID här

Hej!

Studerar just nu och nu ska vi koda en webbshop. Jag får ut produkterna, men vill göra så att klickar man på "lägg till i varukorg" så ska den produkten läggas till i varukorgen som är en tom array.

let btnCart = document.querySelector("#btnCart"); products.forEach(prod => { let div = document.createElement("div"); div.innerHTML = ` <article class="product"> <div class="img-container"> <img src="src/jeans.png" class="product-img" /> <button class="bag-btn" id="btnCart"> Lägg till i varukorg </button> </div> <h3>${prod.productName}</h3> <h4>${prod.price} SEK</h4> </article>; `; prodCenter.appendChild(div); }); btnCart.addEventListener("click", function(e) { console.log(e); });

Försöker få tag i ID i forEach loopen där, hur kan man göra så man kan lägga till en av produkterna i varukorgen när man klickar på button knappen. Försökte med console.log(e) för att se om det ens fungerade, men det står att addeventlistner är null

Big Bang Theory
Howard Wolowitz

Trädvy Permalänk
Medlem
Registrerad
Dec 2012

Först och främst - eftersom det är en loop så bör du inte använda dig av id, utan istället klasser. Detta eftersom id:n ska vara unika.

Vidare så försöker du hitta element som inte finns än. Prova att flytta den översta raden till efter din loop.

Trädvy Permalänk
Festpilot, Antiallo
David Kvist
Plats
Göteborg
Registrerad
Jun 2012

@Howardtheory:
*Trådar sammanfogade*

Vi håller oss till en tråd. Då får läsare möjlighet att få hela historian istället och alla medlemmars trådar får samma chans att synas. Det gör att det är lättare för dig att få hjälp och det blir rättvisare för övriga medlemmar att få hjälp.

 | PM:a Moderatorerna | Kontaktformuläret | Geeks Discord |
Testpilot, Skribent, Moderator & Geeks Gaming Huvudadmin

Trädvy Permalänk
Medlem
Registrerad
Okt 2015

Hej!

Håller på att göra en webbshop nu som uppgift.

https://codepen.io/louislitt/pen/dyyNgvE

Jag får ut produkterna med DOM, men vill göra så att klickar man på add to cart så ska det läggas till i varukorgen längst upp åt höger.

Har försökt med en btn för att hitta så när man klickar på add to cart knappen så ska den hitta id:t men den gör inte det, hur kan jag få till så att klickar den på första produkt så får den fram hela produkten så man kan pusha upp den till varukorgen och lika så med produkt 2,3,4,5 osv?

Big Bang Theory
Howard Wolowitz

Trädvy Permalänk
Medlem
Registrerad
Okt 2015

hur delete jag en produkt

Hej!

Behöver lite hjälp,

har fixat en table i html och lägger in tr och td i javascripten till den med information.

hur får jag tag i min trash, så jag kan deleta en produkt?

https://codepen.io/louislitt/pen/dyyNgvE

här är koden,

får inte till det riktigt.

borde man göra en table i html och lägga in värderna där istället för att göra som jag gör med

function addProductToCart() { for (let i = 0; i < addToCartButton.length; i++) { let button = addToCartButton[i]; button.addEventListener("click", function(e) { let div = document.createElement("tr"); let currentProduct = products[parseInt(e.target.dataset.id)]; div.innerHTML = ` <td class="product-img"><img src="${currentProduct.img}" width="100" height="100" /><td> <td class="productname">${currentProduct.productName}</td> <td class="price">${currentProduct.price} SEK</td> <td><input class="quantity" type="number" value="1"></td> <td class="trash"><a href="#0" class="button1 remove"><i class="fas fa-trash-alt"></i></a></td>`; table[0].appendChild(div); }); } }

om så är fallet, hur skulle man kunna göra det?

Big Bang Theory
Howard Wolowitz

Trädvy Permalänk
Medlem
Registrerad
Okt 2015

får inte till min varukorg i webshopen

Hej! Jag har ett litet problem här nu, är grön inom JS med.
jag försöker få till så att jag får ut datan ur produkterna och sedan vill jag checka läget med check, för att se om det finns eller inte finns en product där, finns det inte en som har samma id, så pushas den in, annars så ökas antalet med 1 om det redan finns, men det fungerar inte riktigt. Hur får jag till detta?

https://codepen.io/louislitt/pen/dyyWYVY

där är hela webbsidan, om ni vill se helheten i koden.

function addProductToCart(id) { for (let i = 0; i < addToCartButton.length; i++) { let button = addToCartButton[i]; button.addEventListener("click", function(e) { let currentProduct = products[parseInt(e.target.dataset.id) - 1]; check(currentProduct); num++; cartItems.innerText = num; addToCart(); }); } } addProductToCart(); function check(currentProduct) { varukorg.forEach(prod => { if (currentProduct === prod.id) { prod.antal++; } else { varukorg.push(currentProduct); } }); } //lägger in produktens information till varukorgen function addToCart() { let varu = varukorg[varukorg.length - 1]; let tr = document.createElement("tr"); tr.innerHTML = ` <td class="varu-img"><img src="${varu.img}" width="100" height="100"></td> <td class="productname">${varu.productName}</td> <td>${varu.price} SEK</td> <td><input class="quantity" type="number" value="${varu.quantity}"></td> <td class="trash"><i class="fas fa-trash-alt"></i></td> `; table[0].appendChild(tr); }

Big Bang Theory
Howard Wolowitz

Trädvy Permalänk
Medlem
Plats
Mora
Registrerad
Jan 2011

Du lägger aldrig in något i variabeln varukorg.

Trädvy Permalänk
Medlem
Registrerad
Okt 2015

@Tekoppar: pushar jag inte in en produkt om det inte redan känner av att det finns en produkt där i varukorgen?

Big Bang Theory
Howard Wolowitz

Trädvy Permalänk
Medlem
Plats
Mora
Registrerad
Jan 2011

Eftersom du gör det inuti en foreach loop så kallas ingenting när varukorgen är tom eftersom det inte finns något att loopa över.

Skickades från m.sweclockers.com

Trädvy Permalänk
Medlem
Registrerad
Okt 2015

@Tekoppar: alright, jag försökte med en if sats där innan, men då kom jag inte åt produkternas id, därför försökte jag med foreach för att loopa igenom så jag kunde få tag i dom.

Hur kan jag göra annars egentligen? :/

Big Bang Theory
Howard Wolowitz