jQuery - How to filter a JSON file from an external link?

Asked

Viewed 404 times

1

I have a headache that is: I need to make a filter by names of the following JSON (summarized)...

[
  {
    "index": 0,
    "age": 25,
    "eyeColor": "green",
    "name": "Peck Murphy",
    "gender": "male",
    "company": "MEDICROIX",
    "email": "[email protected]",
    "phone": "+1 (992) 428-2202",
    "address": "219 McDonald Avenue, Tioga, Utah, 6059"
  },
  {
    "index": 1,
    "age": 29,
    "eyeColor": "blue",
    "name": "Rosalyn Mckay",
    "gender": "female",
    "company": "COREPAN",
    "email": "[email protected]",
    "phone": "+1 (927) 507-3490",
    "address": "537 Rost Place, Thynedale, Wyoming, 5160"
  }
]

The ideal would be to filter it by name. It looks simple, but my task is to make this filter from the same JSON, only from an external link, which is this one and then put the lines that passed through the filter into a table.

My question is how do I filter this online JSON by a value inserted in a text box and show all the data of the line that passed through the filter? I have already turned over the entire jQuery manual and nothing that will save me. If someone can give me a light, I will be very grateful.

The latest jQuery script I’ve made:

$(document).ready(function () { // Filtro único para nome
  $('#Cons_Name').keyup( function () { // Cons_Name é a id de um input que o usuário insere o nome de alguém para filtro
    var json = $.getJSON('https://quarkbackend.com/getfile/gcpolidoro/data-json', function(data) {
      var arr = $("td").filter(function (ret, i) {
        return ret.name == $("#Cons_Name").val();
      })
      console.log(arr);
    });
  });
});

jquery json url filter

  • On this last attempt, did you receive an error message? What was the output of the console.log(arr) command? Note that you are not iterating over JSON values but rather a table that is in your HTML.

  • The output was "Undefined". What do you mean by "iterating" (sorry, I’m kind of new in this area)

  • Your loop with the function filter() is using other variables that have no relation to JSON

  • Hm. Maybe I’m wrong about that. I’ll take a look

  • By correcting the filter from "td" to json (the variable), this appeared here on the console: [prevObject: n.fn.init[1], context: undefined]. I think I’m on the right track?

  • Modify your question to reflect the code you are trying.

  • Which filter do you apply to the JSON output? What attributes do you want to display?

  • I updated the description of the question...

  • I managed to filter. I’ll leave the JS here as an answer.

Show 4 more comments

3 answers

2

Friend,

I don’t think you need to search for JSON every time in the keyup event, except that you need to pass the text as a parameter (which is not evident in your example).

Follow functional example with the data you passed, making append in a table :

<html>
<body>

    <input type="text" id="Cons_Name" />

    <table id="tabela">
        <thead>
            <tr>
                <th>id</th>
                <th>nome</th>
            </tr>
        </thead>
        <tbody>
            
        </tbody>
    </table>

    <script src="https://code.jquery.com/jquery-2.2.4.min.js"
            integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
            crossorigin="anonymous"></script>

    <script type="text/javascript">

        var dataJson = null;

        var renderData = function (data)
        {
            $("#tabela tbody").empty();
            $(data).each(function (i, item) {
                $("#tabela tbody").append("<tr><td>"+item.index+"</td><td>" + item.name + "</td></tr>");
            });

        };

        $.getJSON('https://quarkbackend.com/getfile/gcpolidoro/data-json', function (data) {
            dataJson = data;
            renderData(data);
        });


        $(document).ready(function () {
            $('#Cons_Name').keyup(function () {
                var nome = $('#Cons_Name').val();

                if (nome == void (0) || nome.length == 0) {
                    renderData(dataJson);
                } else {
                    //Parcial:
                    var arr = $(dataJson).filter(function (a, b) {
                        return b.name.toLowerCase().indexOf(nome.toLowerCase()) > -1;
                    });
                    renderData(arr);


                    //Full
                    var arr2 = $(dataJson).filter(function (a, b) {
                        return b.name.toLowerCase() == nome.toLowerCase();
                    });

                    console.log(arr);
                    console.log(arr2);
                }


            });
        });

    </script>

</body>
</html>

  • Good placement, Ericson. I changed the function from Onkeyup to Onchange. Thanks for the help

1


$(document).ready(function () { // Filtro único para nome
   $('#Cons_Name').keyup( function () { // Cons_Name é a id de um input que o usuário insere o nome de alguém para filtro 
     var dadoFiltro = $(this).val(),
         json = $.getJSON('https://quarkbackend.com/getfile/gcpolidoro/data-json', function(data) { 
             var arr = $(data).filter(function (ret, i) { 
                return ret.name == dadoFiltro;
             }); 
             console.log(arr); 
         }); 
   }); 
});

  • But you can improve the performance of that code. First save the result of json in a variable on document initialization is in the keyup of your input you only do the filtering on top of that saved json.

  • Wow, the code is much better. Thanks for your help, Rafael. :)

0

With the help of jlHertel, I was able to make a Javascript that works by name only. Here it is (it got a little big, but it’s commented and it’s very understandable):

$(document).ready(function () { // Filtro único para nome
  $('#Cons_Name').change( function () { // Cons_Name é a id de um input que o usuário insere o nome de alguém para filtro
    var json = $.getJSON('https://quarkbackend.com/getfile/gcpolidoro/data-json', function(data) {
      var arrMestre = []; // Um array que vai conter todos os cadastros (em arrays) (ver abaixo)
      var arrInfo = []; // Um array onde será guardado informações de um cadastro e limpo, depois, para a inserção do próximo cadastro
      var x = 0; // Auxilia na contagem da posição do arrMestre
      var y = 0;
      var posTabela = 1; // Aponta onte está o nome no arrInfo
      var resultNum = 0; // Conta o total de cadastros que passa pelo filtro
      $.each(data, function (i, arq) {
        arrInfo = []; // Limpeza para inserção do próximo cadastro
        arrInfo.push(arq.index);
        arrInfo.push(arq.name);
        arrInfo.push(arq.age);
        arrInfo.push(arq.gender[0]); // Detalhe interessante: o zero faz com que seja buscado apenas o primeiro dígito do sexo, fazendo com que ele seje M ou F. Economiza bastante tempo e espaço
        arrInfo.push(arq.company);
        arrInfo.push(arq.email);
        arrInfo.push(arq.phone);
        arrInfo.push(arq.address);
        arrMestre[x] = arrInfo; //O array com um cadastro é inserido no Mestre
        x++;
      });
      console.log(arrInfo);
      console.log(arrMestre); // Para ver se está tudo indo bem
      $("#tbResults tbody").empty(); // Limpa a tabela para inserir os dados
      for (var i = 0; i < arrMestre.length; i++) { // Passa por todos os cadastros do arrMestre
        var resultado = "<tr class='active'>"; // Variável que vai ser ".append()" na table que mostra o resultado. (Sim, em Bootstrap)
        if (arrMestre[i][posTabela].indexOf($("#Cons_Name").val()) >= 0) { // O coração do filtro: vê se o valor do text input (considerado como substring) está presente no nome. Se o resultado for -1, significa que não foi localizado o texto do usuário.
          resultado += "<td>" + (arrMestre[i][0] + 1 ) + "</td>"; // O "index" do meu código começava em zero, daí adiciona +1 no código
          for (var j = 1; j < arrMestre[i].length; j++) { // Todas as informações do cadas
            resultado += "<td>" + arrMestre[i][j] + "</td>"; // Vai inserindo os valores das células da table; Nome, idade, gênero...
          }
          resultado += "</tr>" // Fim da linha (literalmente)
          $("#tbResults tbody").append(resultado); // Insere a linha na tabela
          resultNum++; // Aumenta o número total de resultados em 1
        }
      }
      if (resultNum == 1) {
        var resultText = "Foi encontrado <b> um </b> resultado."
      } else {
        var resultText = "Foram encontrados <b>" + resultNum + "</b> resultados."
      }
      $(".panel-footer .resultNum").empty(); // Limpa o texto com o número de resultados anterior (detalhe pro panel-footer)
      $(".panel-footer .resultNum").append(resultText); // Insere o valor total de resultados
    });
  });
});

Browser other questions tagged jquery json url filter

You are not signed in. Login or sign up in order to post.