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

Question

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

Navigation

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

1

I have a headache that is as follows: I need to do 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 sounds simple, but my task is to do this filter from the same JSON, only from an external link, which is this one , and then put the rows that passed the filter in a table.

My question is how do I filter this JSON that is online for a value entered in a text box and show all the data of the line that passed through the filter? I'll turn the entire jQuery manual and nothing to save me. If anyone can give me a light, I will be very grateful.

The latest jQuery script I've done:

$(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

asked by anonymous 28.02.2017 / 14:01

3 answers

2

Friend,

I think you do not need to fetch JSON every time in the keyup event, except you need to pass the text as a parameter (which is not evident in your example).

Here is a functional example of the data you passed by appending to 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>

05.03.2017 / 20:01

0

With the help of jlHertel, I was able to make a JavaScript that works the filter by name only. Here it is (it was kind of 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
    });
  });
});

28.02.2017 / 18:05

Alignment Gif Loading My Intranet Project Security

score 1 · Accepted Answer

$(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); 
         }); 
   }); 
});