IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Regrouper des articles en localStorage


Sujet :

JavaScript

  1. #1
    Candidat au Club
    Femme Profil pro
    Étudiant
    Inscrit en
    juillet 2022
    Messages
    4
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Corse (Corse)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : juillet 2022
    Messages : 4
    Points : 2
    Points
    2
    Par défaut Regrouper des articles en localStorage
    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);
    }

  2. #2
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    janvier 2012
    Messages
    2 086
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2012
    Messages : 2 086
    Points : 4 038
    Points
    4 038
    Par défaut
    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
            }
        ]
    }

  3. #3
    Candidat au Club
    Femme Profil pro
    Étudiant
    Inscrit en
    juillet 2022
    Messages
    4
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Corse (Corse)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : juillet 2022
    Messages : 4
    Points : 2
    Points
    2
    Par défaut
    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.

  4. #4
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    janvier 2012
    Messages
    2 086
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2012
    Messages : 2 086
    Points : 4 038
    Points
    4 038
    Par défaut
    Bonjour,

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

  5. #5
    Candidat au Club
    Femme Profil pro
    Étudiant
    Inscrit en
    juillet 2022
    Messages
    4
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Corse (Corse)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : juillet 2022
    Messages : 4
    Points : 2
    Points
    2
    Par défaut
    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

  6. #6
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    janvier 2012
    Messages
    2 086
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2012
    Messages : 2 086
    Points : 4 038
    Points
    4 038
    Par défaut
    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.

  7. #7
    Candidat au Club
    Femme Profil pro
    Étudiant
    Inscrit en
    juillet 2022
    Messages
    4
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Corse (Corse)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : juillet 2022
    Messages : 4
    Points : 2
    Points
    2
    Par défaut
    Ok je comprend mieux.
    Merci de partager votre savoir.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Probleme pour effacer des lignes
    Par Thargor dans le forum Oracle
    Réponses: 7
    Dernier message: 12/10/2005, 14h58
  2. DTD - probleme pour definir des differentes branches
    Par jeanpol dans le forum Valider
    Réponses: 1
    Dernier message: 11/07/2005, 19h00
  3. Réponses: 7
    Dernier message: 16/04/2005, 08h55
  4. [NetBeans 4.0 Beta 2]Probleme pour monter des jars
    Par nicoo dans le forum NetBeans
    Réponses: 2
    Dernier message: 19/11/2004, 14h14
  5. Réponses: 5
    Dernier message: 07/07/2004, 16h05

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo