Discussion :

[alizia20]

Bonsoir,

je suis débutante en javascript et je dois créer un panier avec des articles qui se regroupent par id.
Ma dernière fonction ne marche pas ..

Je vous joins ci-dessous mon code. quelqu'un peut-il m'éclairer svp ??

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
function setCart(cart){
    localStorage.setItem('cart',JSON.stringify(cart))
}
 
function getCart(){
    let cart=[];
    let result= localStorage.getItem('cart');
    if(result){ cart=JSON.parse(result);
 
    }
    return cart;
}
function addProduct(product_ID,quantity,color){
let line={'product_ID':product_ID,'color':color,'quantity':quantity}
let cart=getCart();
cart.push(line);
setCart(cart);
}
function groupBy(product_ID){
  let foundline= line.find(p=>p.id==product_ID);
  if(foundline !=undefined){
    foundline.quantity++;
  }
 
  setCart(cart);
}

[Toufik83]

Bonjour,

Je pense qu'il faut prendre en considération la couleur aussi, car il pourrait bien y avoir des produits avec le même id mais avec des couleurs différentes.

Si je modifies seulement la fonction groupBy comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
function groupBy(product_ID) {
  return getCart().reduce((groups, item) => {
    let final = (groups[item.product_ID] || []),
      sameIdAndColor = final.findIndex(elem =>
        elem.product_ID == item.product_ID &&
        elem.color == item.color);
    if (sameIdAndColor==-1) final.push(item);
    else final[sameIdAndColor].quantity += item.quantity;
    groups[item.product_ID] = final;
    return groups;
  }, {});
}

Ajouter des produits avec des couleurs différentes :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
addProduct(1, 5, "blue");
addProduct(2, 5, "green");
addProduct(1, 2, "blue");
addProduct(2, 3, "black");
addProduct(1, 5, 'orange');

Appel à la fonction de regroupement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
//le paramètre "product_ID" de la fonction n'est plus utilisé, tu peux le supprimer à moins que si tu veux que la même fonction gère le regroupement par couleur par exemple...
let groupedById = groupBy();
console.log("original Cart :", getCart(), ", grouped By ID Cart :", groupedById);

Résultat :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
 
/* original Cart : */
[
    {
        "product_ID": 1,
        "color": "blue",
        "quantity": 5
    },
    {
        "product_ID": 2,
        "color": "green",
        "quantity": 5
    },
    {
        "product_ID": 1,
        "color": "blue",
        "quantity": 2
    },
    {
        "product_ID": 2,
        "color": "black",
        "quantity": 3
    },
    {
        "product_ID": 1,
        "color": "orange",
        "quantity": 5
    }
]
/* grouped By ID Cart :*/
{
    "1": [
        {
            "product_ID": 1,
            "color": "blue",
            "quantity": 7
        },
        {
            "product_ID": 1,
            "color": "orange",
            "quantity": 5
        }
    ],
    "2": [
        {
            "product_ID": 2,
            "color": "green",
            "quantity": 5
        },
        {
            "product_ID": 2,
            "color": "black",
            "quantity": 3
        }
    ]
}

[alizia20]

Bonjour,

Merci d'avoir pris le temps de m'aider ! cependant, quand je regarde dans le localstorage ca marche pas.

je pense que je verrrai ca avec mon prof.

[Toufik83]

Bonjour,

Je vous rappelle que j'ai testé le code avant de le poster, il est fonctionnel à moins que tu as fait une erreur...

[alizia20]

Mais je n'en doutais pas.

En fouillant un peu plus, je vois que le code fonctionne bien dans la console mais pas dans le localstorage..
je comprend pas pourquoi ca n'affiche pas la même chose

[Toufik83]

L'objet enregistré dans localStorage ne change pas, c'est la variable groupedById qui récupère les éléments regroupés par id.

Comme ça tu gardes la structure originale du tableau dans localStorage.

[alizia20]

Ok je comprend mieux.
Merci de partager votre savoir.