Compare two objects in JS / JQuery

Question

Compare two objects in JS / JQuery

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

In my application, you have several categories of an item,

In each category is created blocks related to that category, so far so good, but every time I click to change the category and return to the category I was, the blocks are replicated, and with that they are being created forever forever which alternate to a category that had already clicked ...

IwouldliketoknowhowIcanchecktoseeiftheproductsofthegivencategoryhavealreadybeencreated,soifithasalreadybeencreatedIdonotcreateanother...

FollowtheHTMLstructureandJScodessofar

produtosCategoria("temakis");

var btnCategoria = ($("#opcoes-cardapio").find("a")).click(function(){
    var idCategoria = $(this).attr("id").replace("btn-","");
    produtosCategoria(idCategoria);
});

function produtosCategoria(categoria) {
    var cardapio = $("#cardapio-produtos>.produtos");    
    var tabPanel = $("<div></div>");
    tabPanel.addClass("tab-pane fade show active");
    tabPanel.attr("role", "tabpanel");
    var categoriasProd = ["temakis","niguiris","sashimis","rolls","yakisobas","combos","variados","sobremesas","bebidas"];
    categoriasProd.forEach(function(i){
        if(i == categoria){
            tabPanel.attr("id", categoria);
            for(var j = 0; j<2; j++){
                tabPanel.append(criaGrupoProdutos());
            }
        }else{
            return 0;
        }
    });
    cardapio.append(tabPanel);
    return cardapio;
}
function criaGrupoProdutos() {
    var cardGroup = $("<div></div>");
    cardGroup.addClass("card-group d-inline-flex align-items-center flex-wrap");
    cardGroup.prepend(criarProduto(null, "Camarão", "R$5,90", "Camarão Temaki"));
    cardGroup.prepend(criarProduto(null, "Salmão", "R$10,90", "Salmão Temaki"));
    cardGroup.prepend(criarProduto(null, "Atum", "R$5,80", "Atum Temaki"));
   
    return cardGroup;
}
function criarProduto(img, titulo, preco, descricao) {
    var cardProduto = $("<div></div>").addClass("card flex-wrap item-cardapio produto"); //Cria o card 
    var cardProdutoBody = $("<div></div>").addClass("card-body d-flex flex-column align-itens-center");//cria o corpo do card
    cardProdutoBody.append(insereImagemProduto(img));
    cardProdutoBody.append(insereTituloProduto(titulo));
    cardProdutoBody.append(inserePrecoProduto(preco));
    cardProdutoBody.append(insereDescricaoProduto(descricao));
    cardProdutoBody.append(insereQuantidadeProduto());
    cardProdutoBody.append(insereBtnAdicionarCarrinho());
    cardProduto.append(cardProdutoBody);
    return cardProduto;
}

function insereImagemProduto(img) {
    var img = $("<img>").addClass("img-fluid imagem-produto");//Tag img
    img.attr("src", "assets/img/aea6de9cbaee9d2704dcf81f4a194991-754x394.jpg"); //!!! Fazer com que a imagem se altere através do banco!!!
    return img;
}

function insereTituloProduto(titulo) {
    var tituloProduto = $("<h4>").addClass("card-title titulo-produto center");
    tituloProduto.text(titulo);
    return tituloProduto;
}

function inserePrecoProduto(preco) {
    var precoProduto = $("<h5>").addClass("preco-produto center");
    precoProduto.text(preco);
    return precoProduto;
}
function insereDescricaoProduto(descricao) {
    var descricaoProduto = $("<p>").addClass("card-text descricao-produto");
    descricaoProduto.text(descricao);
    return descricaoProduto;
}

function insereQuantidadeProduto() {
    var divQtd = $("<div>").addClass("d-flex flex-column quantidade-produto");
    var txtSpanQtd = $("<span>").addClass("m-auto").text("Quantidade");
    var qtdController = $("<div>").addClass("m-auto quantidade");
    var btnRemoveQtd = $("<button>").addClass("btn btn-danger qtd-botoes qtd-remove").attr("type", "button").text("-");
    var btnAdicionarQtd = $("<button>").addClass("btn btn-danger qtd-botoes qtd-add").attr("type", "button").text("+");
    var inputQtd = $("<input>").addClass("qtd-produto").attr("type", "number").attr("value", "0").attr("min", "0");
    divQtd.append(txtSpanQtd);
    qtdController.append(btnRemoveQtd);
    qtdController.append(inputQtd);
    qtdController.append(btnAdicionarQtd);
    divQtd.append(qtdController);
    return divQtd;
}

function insereBtnAdicionarCarrinho() {
    var btnAdicionarCarrinho = $("<button>").addClass("btn btn-outline-danger btn-block btn-adicionar-carrinho");
    btnAdicionarCarrinho.attr("type", "button");
    btnAdicionarCarrinho.text("Adicionar ao Carrinho");
    return btnAdicionarCarrinho;
}

<div id="cardapio">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h1>Faça seu pedido</h1>
                    <div class="input-group" id="pesquisa-produto">
                        <div class="input-group-prepend"></div><input class="form-control" type="text" placeholder="Pesquisar..." id="campo-pesquisa">
                        <div class="input-group-append"><button class="btn btn-outline-light" type="button" id="btn-pesquisa"><i class="icon ion-search" data-bs-hover-animate="pulse" style="font-size:18px;"></i></button></div>
                    </div>
                    <div id="cardapio-produtos">
                        <ul class="nav nav-pills" id="opcoes-cardapio">
                            <li class="nav-item btn-categoria"><a class="nav-link active" role="tab" data-toggle="pill" id="btn-temakis" href="#temakis">Temakis</a></li>
                            <li class="nav-item btn-categoria"><a class="nav-link" role="tab" data-toggle="pill" id="btn-niguiris" href="#niguiris">Niguiris</a></li>
                            <li class="nav-item btn-categoria"><a class="nav-link" role="tab" data-toggle="pill" id="btn-sashimis" href="#sashimis">Sashimis</a></li>
                            <li class="nav-item btn-categoria"><a class="nav-link" role="tab" data-toggle="pill" id="btn-rolls" href="#rolls">Rolls</a></li>
                            <li class="nav-item btn-categoria"><a class="nav-link" role="tab" data-toggle="pill" id="btn-yakisobas" href="#yakisobas">Yakisobas</a></li>
                            <li class="nav-item btn-categoria"><a class="nav-link" role="tab" data-toggle="pill" id="btn-combos" href="#combos">Combos</a></li>
                            <li class="nav-item btn-categoria"><a class="nav-link" role="tab" data-toggle="pill" id="btn-variados" href="#variados">Variados</a></li>
                            <li class="nav-item btn-categoria"><a class="nav-link" role="tab" data-toggle="pill" id="btn-sobremesas" href="#sobremesas">Sobremesas</a></li>
                            <li class="nav-item btn-categoria"><a class="nav-link" role="tab" data-toggle="pill" id="btn-bebidas" href="#bebidas">Bebidas</a></li>
                        </ul>
                        <div class="tab-content produtos">
                           
                        </div> 
                    </div>
                </div>
            </div>
        </div>
    </div>

javascript jquery

asked by anonymous 25.06.2018 / 18:43

2 answers

0

To avoid inserting a duplicate block, you can use ID or name to search and see if it already exists, or simply use contains to check if already there is an element with some text, so for example:

$('#b').click(function () {
  // verificar se existe um elemento H4 que contenha o texto "Elemento"
  if ($('h4:contains("Elemento")').length == 0) {
        var h4 = $("<h4>Elemento inserido</h4>");
  	$('#d').append(h4);
  } else {
        $('#b').text('Já incluido');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><h2>Incluirprodutos</h2><divid="d"></div>

<button id='b'>Incluir</button>

This will not compare objects, but will check if it already exists and does not include duplicate, which is the problem you reported in the question.

25.06.2018 / 19:01

Django: how to use forms.ValidationError and display messages in the template Problem showing / hiding divs when uploading site

score 1 · Accepted Answer

Do so in these lines:

produtosCategoria("temakis");

var btnCategoria = ($("#opcoes-cardapio").find("a")).click(function(){
    var idCategoria = $(this).attr("id").replace("btn-","");
    produtosCategoria(idCategoria);
});

Switch to:

var categoriasExistentes = ["temakis"];

produtosCategoria("temakis");

var btnCategoria = ($("#opcoes-cardapio").find("a")).click(function(){
    var idCategoria = $(this).attr("id").replace("btn-","");

    if (categoriasExistentes.indexOf(idCategoria) < 0) {
        categoriasExistentes.push(idCategoria);

        produtosCategoria(idCategoria);
    }
});