1

Eu possuo um link com um atributo que possui a informação de qual dado do JSON deve ser obtido.

<a href="#" data-json-code="code_118"></a>

E possuo o código responsável pelo comportamento do mesmo, que deve ser:

  1. Pegar o atributo;
  2. Buscar esse atributo no json;
  3. Exibir as informações do json no console.

Eu fiz dessa forma, mas sempre retorna "undefined":

$('.c-productCard a').on('click', function(event) {
    event.preventDefault();
    var jsonCodeProduct = $(this).attr('data-json-code');

    var jsonUrl = 'https://api.myjson.com/bins/mc9ig';
    $.ajax({
        type: 'GET',
        datatype: 'json',
        url: jsonUrl,
        cache: false,
        beforeSend: function() {
            console.log('before send');
        },
        success: function(result) {
            console.log(result.jsonCodeProduct);
        },
        error: function(xmlHttpRequest, textStatus, errorThrown) {
            console.log('erro');
        },
        complete: function() {
            console.log('complete');
        }
    });
});

Se por acaso eu retirar o jsonCodeProduct da chamada success o json inteiro é exibido no console (como esperado).

A pergunta é, como fazer para que o dado da variavel jsonCodeProduct seja o "seletor" para exibir o dado correspondente do JSON?

3
  • Conseguiu resolver? apresente a estrutura do seu Json, para que eu possa elaborar melhor a minha resposa. Commented 29/01/2019 às 12:32
  • Consegui @LeandroAngelo, muito obrigado, a solução era justamente a que você indicou, bastava colocar o "jsonCodeProduct" entre colchetes após o result. Commented 29/01/2019 às 15:34
  • Então, por favor, marque a proposta como resposta da sua pergunta, isso vai ajudar outras pessoas que estiverem passando pelo mesmo problema a encontrar a solução mais rápido. Commented 29/01/2019 às 15:40

1 Resposta 1

2

Assim como qualquer objeto no javascript, você pode obter o valor de uma propriedade através de seu nome, no seu caso seria:

    success: function(result) {
        console.log(result[jsonCodeProduct]);
    }

Veja o exemplo abaixo, também se você está utilizando atributos data e jquery você pode recuperar a informação de uma forma um pouco mais elegante.

$('a').on('click', function(event) {
  event.preventDefault();
  var jsonCodeProduct = $(this).data('json-code');

  console.clear();
  console.log(objExemplo[jsonCodeProduct]);


});

var objExemplo = {
  code_118: { nome : 'Produto 1' , preco : 'R$10,00'},
  code_119: { nome : 'Produto 2' , preco : 'R$20,00'}
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="exemplo" href="#" data-json-code="code_118">Produto 1</a>
<a id="exemplo" href="#" data-json-code="code_119">Produto 2</a>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .