What the best way to loading data to a cart react js with context api

user_13693840 0
Viewed 164

I have a product with additiones and options, and that options and additional is saved in different array like this,

const Prods = [{
  ID: 0,
  Nome: 'Açai no Copo 290ml',
  Descricao: 'Acai com chocoball e confete ',
  Categoria: 0,
  Preco: 10.00,
  AdicionaisGroup: 0, // the ID of additional group 
  OpcoesGroup: 0, // ID of options group
},

const Opcoes = [{ // Options Group
  ID: 0, // ID of options group
  Nome: 'Opções açai',
  MaxOpcoes: 2,
  Itens: [{  //Items of options group
    Nome: 'Chocoball',
    ID: 0,
  },

const Adicionais = [{ // additional group
  ID: 0, // ID of additiones group
  Nome: 'Adiocinais Açai',
  MaxOpcoes: 3,
  Itens: [{
    Nome: 'Morango',
    Valor: 5.00,
    ID: 0,
  },

My problem is, when the user add the product to cart, the product data is saved in the this structure

{
    "ID": 5, // the product ID
    "idAdicionais": [ // here i have the items id's of the additional group
        1,
        2
    ],
    "idOpcoes": [  // Here i have the items id's of the options group
        0,
        1
    ],
    "Qtd": 1,
    "obs": "",
    "idAdicionaisGroup": 0,  //Here i have the ID of additional group
    "idOpcoesGroup": 0 // here i have the ID of options group
}

I don't know how i can create an one object with all data of this product and all additional and options selected, i have tried to create a function like getProdutosCart but this function return three arrays like that

{
    "Produtoresult": [
        [
            {
                "ID": 0,
                "Nome": "Açai no Copo 290ml",
                "Descricao": "Acai com chocoball e confete ",
                "Categoria": 0,
                "Preco": 10,
                "AdicionaisGroup": 0,
                "OpcoesGroup": 0
            }
        ]
    ],
    "ProdutoOpcoes": [ // this is the options what the user have selected
        [
            [
                {
                    "Nome": "Chocoball",
                    "ID": 0
                },
                {
                    "Nome": "Confete",
                    "ID": 1
                }
            ]
        ]
    ],
    "ProdutoAdicionais": [ // this is the additional what the user have selected
        [
            [
                {
                    "Nome": "Raspas de Chocolate",
                    "Valor": 5,
                    "ID": 1
                },
                {
                    "Nome": "Biz de Chocolate",
                    "Valor": 5,
                    "ID": 2
                }
            ]
        ]
    ]
}

this function returns the data i need but, i don't know how to create a single object like this

  ProdsCart = [{
            "ID": 0,
            "Nome": "Açai no Copo 290ml",
            "Descricao": "Acai com chocoball e confete ",
            "Categoria": 0,
            "Preco": 10,
            "Qtd": 2,
            "AdicionaisGroup": 0,
            "OpcoesGroup": 0,
            "ProdutoOpcoes": [{
                "Nome": "Chocoball",
                "ID": 0
            }, {
                "Nome": "Confete",
                "ID": 1
            }],
            "ProdutoAdicionais": [{
                "Nome": "Raspas de Chocolate",
                "Valor": 5,
                "ID": 1
            },
            {
                "Nome": "Biz de Chocolate",
                "Valor": 5,
                "ID": 2
            }]
        }],

The function

const getProdutos = () =>{
        const Produtoresult = ProdutosCart.map((item) => (getProduto(item.ID))) // get the product data
        const ProdutoOpcoes = ProdutosCart.map((item) => (getProdutoOpcoesChecked({groupID:item.idOpcoesGroup, idx: item.idOpcoes}))) // get the options data
        const ProdutoAdicionais = ProdutosCart.map((item) => (getProdutoAdicionaisChecked({groupID: item.idAdicionaisGroup, idx: item.idAdicionais}))) // get the additiones data
        const data ={
            Produtoresult,
            ProdutoOpcoes,
            ProdutoAdicionais
        }
        console.log(data)

    }

And another question, The data of product, additional group and options group is loading of the product context, is the best pratic do this, or is better loading direct of the database?

reactjs javascript
1 Answers

Making the below changes produces the desired result:

  1. Use find instead of filter in getProduto().
  2. Correct typo in getProdutoAdicionaisChecked(). Replace ItensA with Itens.
  3. Modify getProdutos() as shown below. This code iterates over the products in the cart and for each product, fetches the product details, produtoOpcoesChecked and produtoAdicionaisChecked returning all these data within a single object.

Hence the method returns an array of objects, where object has the consolidated data for each product in the cart.

const getProdutos = () =>{
   const Produtoresult = ProdutosCart.map((item) => 
     {
        return {
            // get the product data
            ...getProduto(item.ID), 

            // get the options data
            ProdutoOpcoes: getProdutoOpcoesChecked({groupID:item.idOpcoesGroup, 
            idx: item.idOpcoes}),  

            // get the additiones data
           ProdutoAdicionais: getProdutoAdicionaisChecked({groupID: item.idAdicionaisGroup, idx: item.idAdicionais})
        }
     }
    ); 
    return Produtoresult;

}
user_168148730
Related