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?

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

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

@Kraukz:

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

@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!

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

@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 :/

@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?

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

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

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?

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?

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

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

@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? :/