Jump to content
daviassumpcao

Verificar valor em um Json com JS

Recommended Posts

Pessoal... há valores em um JSON sendo exibidos por um JS (imagem anexo)... preciso verificar se um valor "x" está em um determinado nó do JSON. E a partir daí exibir uma div.... marquei na imagem com um círculo rosa qual valor quero verificar porém meu script não funciona... material de estudo. É possível fazer isso acontecer?

 

JS

const jsonCat = vtxctx.categoryId;
const catProd = JSON.parse(jsonCat);
var divProd = document.getElementById('faq-connect');

if (catProd.categoryId == 10103) {
  divProd.style.display = 'block';
}
else{
  divProd.style.display = 'none';
}

HTML para exibir uma DIV em caso positivo

<div class="faq-connect" style="display:none">              
  <p>Sucesso!</p>
</div>

 

 

Screen-Shot-2021-01-14-at-22.01.56.jpg

Share this post


Link to post
Share on other sites

seu script tem alguns erros:

const jsonCat = vtxctx.categoryId;
const catProd = JSON.parse(jsonCat);

// não existe id no html apenas class="faq-connect"
var divProd = document.getElementById('faq-connect'); 

// catProd já contem o valor 10103 que foi adicionado na referencia "const catProd = JSON.parse(jsonCat);"
// jsonCat recebeu o valor 10103
if (catProd.categoryId == 10103) { 
  divProd.style.display = 'block';
}
else{
  divProd.style.display = 'none';
}

SOLUTION

JS

// objeto para teste
var vtxctx = {"categoryId": "10103"};

const jsonCat = vtxctx.categoryId;
const catProd = JSON.parse(jsonCat);
var divProd = document.getElementById('faq-connect');

if (catProd == 10103) {
  divProd.style.display = 'block';
}
else{
  divProd.style.display = 'none';
}

HTML 

<div id="faq-connect" style="display:none">              
  <p>Sucesso!</p>
</div>

link jsbin: https://jsbin.com/vozawoceca/1/edit?html,js,console,output

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By _marlon307
      Boa noite. Bom Dia.
      Estou com um problema com meu menu hover em React. quando eu passo o mouse em cima do elemnto para abrir o menu le renderiza todas as abas e quando passo o mouse sobre o menu ele fica bugado.
       
      import React, { useState } from 'react'; import { Link } from 'react-router-dom'; //import DropModMn from '../../Helper/DropModMn'; import { ReactComponent as Respponse } from '../../icons/respponse.svg'; import styles from '../css/search.module.css'; import SubMenuCtg from './SubMneu/SubMenuCtg';   const Search = () => {       const menu = [         {             nctg: 'Masculino',             ctg: ['Categoria', 'Categoria', 'Categoria 3', 'Categoria 4', 'Categoria 5'],         },         {             nctg: 'Femenino',             ctg: ['Categoria 3', 'Categoria 4', 'Categoria 5', 'Categoria 6', 'Categoria 7'],         },         {             nctg: 'Criança',             ctg: ['Categoria 8', 'Categoria 9', 'Categoria 10', 'Categoria 11', 'Categoria 12'],         },         {             nctg: 'Acessórios',             ctg: ['Categoria 13', 'Categoria 14', 'Categoria 15', 'Categoria 16', 'Categoria 17'],         },         {             nctg: 'Promoção',             ctg: ['Categoria 18', 'Categoria 19', 'Categoria 20', 'Categoria 21', 'Categoria 22', 'Categoria 22', 'Categoria 22', 'Categoria 22', 'Categoria 22', 'Categoria 22', 'Categoria 22'],         }       ];      const [expand, setExpand] = useState(false);       function MouseOver(event){         event.preventDefault();                  console.log(event);           if(expand) setExpand(!expand);         else setExpand(!expand);     }       return (           <nav className={styles.search}>               <div className={styles.ct}>                 <Link to="/" className={styles.index}>                     <Respponse aria-label="Respponse"/>                 </Link>               </div>               <div className={styles.ct}>                   <ul className={styles.ldep}>                       {menu.map((m) =>                                                  <li className={styles.ictg} key={m.nctg} onMouseOver={MouseOver} onMouseLeave={MouseOver}>                               <Link className={`${styles.lctg} imh`} to={m.nctg}>{m.nctg}</Link>                                                          <SubMenuCtg gl={m.ctg} exp={expand} />                                                    </li>                     )}                                      </ul>             </div>         </nav>     ) }   export default Search
    • By Fluk
      Bom dia Galera, 
      Sou novo por aqui, estou estudando um pouco sobre o Google Script e Java Script. 

      Estou tentando criar um programinha que lê e exibe em tela os dados que estão armazenados em minha Base (FibreBase). 
      Mas quando tento puxar através da API Google google.script.run.minhaFunção() e salvar em uma variável o JavaScript passa direto não aguardando o fim da leitura de arquivo. 
      Dei uma lida sobre ser assíncrona a requisição que estou fazendo, mazers tentei de varias forma fa aguardar mas não consegui. 

       
      document.getElementById('ConsultarClientes').addEventListener( 'click',   function (){     // Buscar dados  FireBase Lista de Clientes     const clientes = getFireBase('Clientes/Arquivos');     clientes.then(retorno => console.log(retorno));   } ,false);   async function getFireBase(chave){   return google.script.run.withSuccessHandler().getFireBase(chave); };   Console log retorno
       
    • By SingleSistemas
      Olá, estou escrevendo um código aonde preciso colocar o JSON dentro de uma array, porém, o JSON foi parciado utilizando o JSON.parse, para atribuir o conteudo do document.todosOsFretes, segue o exemplo:  
      Queria saber qual alternativa que pode ser feita para mim poder colocar o document.todosOsFretes dentro de uma array e pesquisar nele, algum campo...
      Desde já agradeço.
       
       
       
       

    • By marceloDiegues
      Olá, amigos.
      Por favor,  me ajude com a seguintes perguntas.
       
      Qual a complexidade de um projeto desse?
      Qual o preçp de um projeto desse tipo?
       
      Quero contratar algum profissional para criar um site que tenha as seguintes funcionabilidades:
       
      1- Cadastro de usuário;
      2- Login e senha;
      3- O site seria muito parecido com o www.qconcursos.com, o usuário resolveria questões online.
      Contudo, haveria a possibilidade de criar salas tipo aqueles bate-papo da &nbsp;UOL.
      Então, o usuário criaria salas de estudos, em que , resolveria questões e conseguiria se comunicar por chat com usuários que estejam na mesma sala.
       
      Exemplo em anexo:
       
       
       
       

    • By Rodrigo Biaggio
      Pessoal, alguém consegue me ajudar? Eu preciso pegar os dados de um array, mas não estou conseguindo. 
       
      <!DOCTYPE html> <!-- Inicio do html --> <html lang="pt"> <!-- Inicio do head --> <head> <meta charset="utf-8"> <script src='https://kit.fontawesome.com/a076d05399.js'></script> <link rel="icon" type="imagem/png" href="images/dynatrace.png" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://unpkg.com/@popperjs/core@2"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <meta http-equiv="x-ua-compatible" content="ie=edge"> <!-- CSS Customizado --> <link href="css/ambiente-monitorado.css" rel="stylesheet"> </head> <!-- Fim do head --> <!-- Inicio do body --> <body> <header> <title>Dynatrace Managed</title> <!-- Inicio do nav fixado no topo--> <div id="nav"> <nav class="navbar navbar-inverse navbar-fixed-top"> <!-- Inicio div container-fluid --> <div class="container-fluid"> <div class="navbar-header"> <!-- Imagem do logo da Dynatrace a esquerda --> <a class="navbar-brand" href="#"><img id="imagem-logo-dynatrace" src="images/dynatrace.png" width="30px" height="30px" alt="Logo Principal" title="Logo Dynatrace"></a> </div> <!-- Inicio ul nav com opções das páginas --> <ul class="nav navbar-nav nav-custom"> <li><a href="index.html">Home</a></li> <li class="active"><a href="ambiente-monitorado.html">Ambientes Monitorados</a> <li><a href="arquitetura.html">Arquitetura Dynatrace</a></li> <li><a href="#">Downtime</a></li> <li><a href="#">Indicadores</a></li> <li><a href="como-funciona.html">Licenças</a></li> <li><a href="#">Métricas</a></li> </ul> <!-- Fim ul nav com opções das páginas --> <!-- Inicio ul nav da diretia, com search e login --> <ul class="nav navbar-nav navbar-right nav-custom"> <!-- Icone e botão login --> <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> <!-- Inicio form do search --> <form class="navbar-form navbar-left" action="/action_page.php"> <div class="input-group"> <!-- Input do search --> <input type="text" class="form-control" placeholder="Search" name="search"> <div class="input-group-btn"> <!-- Botão de submit do search --> <button class="btn btn-default" type="submit"> <!-- Icone do search --> <i class="glyphicon glyphicon-search"></i> </button> </div> <!-- Fim div input-group-btn --> </div> <!-- Fim div input-group --> </form> <!-- Fim form do search --> </ul> <!-- Fim ul nav da diretia, com search e login --> </div> <!-- Fim div container-fluid --> </nav> </div> <!-- Fim do nav fixado no topo--> </header> <div id="div-main"> <div id="div-botoes-pesquisa"> <button class="button-title btn btn-info" id="button-buscar-licencas-ambiente" data-toggle="tooltip" aria-pressed="false"><i class="fas fa-bezier-curve fa-2x" aria-hidden="true" title="Por Ambiente"></i></button> <button class="button-title btn btn-info" id="button-buscar-licencas-servidor"><i class="fas fa-server fa-2x" aria-hidden="true" title="Por Servidor"></i></button><br><br> <input class="form-control mr-sm-2" type="text" id="input-search-host-group" name="filtro" placeholder="Filtrar"> </div> <div id="div-mostra-total-licencas"></div> <div id="div-table-licencas" class="div-table-licencas table-responsive"> <table class="table table-striped table-hover table-bordered" id="table-licencas"> <thead> <tr> <th class="linha-titulo-tabela">Problema</th> <th class="linha-titulo-tabela">Camada Impactada</th> <th class="linha-titulo-tabela">Status</th> <th class="linha-titulo-tabela">Tipo Erro</th> <th class="linha-titulo-tabela">Usuários Impactados</th> </tr> </thead> <tbody id="table-body"> </tbody> </table> </div> <div id="demo"></div> </div> <script src="js/api-get-problems.js"></script> <script src="js/disable-button.js"></script> <script src="js/filtrar-search-licencas.js"></script> </body> <!-- Fim do body --> </html> <!-- Fim do html --> $(document).ready(function() { const Url=''; $("#button-buscar-licencas-ambiente").click(function(){ $.ajax({ url: Url, type:"GET", success: function(result){ console.log(result); var problema = result.problems; var userimpactado = result.problems.impactAnalysis; $.each(problema, function(i, value) { console.log('The value at arr[' + i + '] is: ' + value.displayId); var newRow = $('<tr class="linha-table">'); var cols = ""; cols += '<td class="displayId" id="displayId">' + value.displayId + '</td>'; cols += '<td class="impactLevel" id="impactLevel">' + value.impactLevel + '</td>'; cols += '<td class="status" id="status">' + value.status + '</td>'; cols += '<td class="title" id="title">' + value.title + '</td>'; cols += '<td class="estimatedAffectedUsers" id="estimatedAffectedUsers">' + value.impactAnalysis.impacts.estimatedAffectedUsers + '</td>'; newRow.append(cols); $("#table-licencas").append(newRow); }); }, error:function(error){ console.log('Error ${error}') } }); }); }); Preciso pegar as informações dos campos 
      estimatedAffectedUsers:  numberOfPotentiallyAffectedServiceCalls:    Cada value.displayId pode ter 1 ou mais impactedEntity.   impactAnalysis: {
      impacts: [
      {
      impactType: "SERVICE",
      impactedEntity: {
      entityId: {
      id: "SERVICE-034769111916BA3B",
      type: "SERVICE"
      },
      name: ""
      },
      estimatedAffectedUsers: 0,
      numberOfPotentiallyAffectedServiceCalls: 4496
      },
      {
      impactType: "APPLICATION",
      impactedEntity: {
      entityId: {
      id: "APPLICATION-A8D06FDBBA2EE7F6",
      type: "APPLICATION"
      },
      name: ""
      },
      estimatedAffectedUsers: 2
      },
      {
      impactType: "SERVICE",
      impactedEntity: {
      entityId: {
      id: "SERVICE-B7A98E7FDD81118A",
      type: "SERVICE"
      },
      name: "online-importer-server-v*"
      },
      estimatedAffectedUsers: 0,
      numberOfPotentiallyAffectedServiceCalls: 775
      },
      {
      impactType: "SERVICE",
      impactedEntity: {
      entityId: {
      id: "SERVICE-D773255CD13D8968",
      type: "SERVICE"
      },
      name: ""
      },
      estimatedAffectedUsers: 1,
      numberOfPotentiallyAffectedServiceCalls: 34
      }
      ]  
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.