Friday, 3 September 2021

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

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?



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

No comments:

Post a Comment