"Filter" is not closed

Asked

Viewed 49 times

0

Hello, I have a simple script that from some searches on stackoverflow I built.

After I started to put some more content the scripts started to stop working and to present some errors, I already managed to solve some but there are two errors that I am not able to solve that appear in the console:

inserir a descrição da imagem aqui

I put the most updated version of Ajax and jQuery but something is not working, can anyone help me solve this error?

The purpose of the script displayed is to automatically execute the function when entering the page showPeople(); 

function LoadJsonData(callback) {
    $.ajax({
      url: './Json/dados.json',
      dataType: 'json',
      async: false,
      success: function (json) {
        if (callback) callback(json);
      }
    });
  }

var jsondata = LoadJsonData();

showPeople();

function showPeople() {


    var filtroFaixaEtaria = $("#FaixaEtaria option:selected").text();
    var filtroSexo = $("#Sexo option:selected").text();
    var filtroRecursoArma = $("#RecursoArma option:selected").text();
    var filtroDistrito = $("#Distrito option:selected").text();

    var arrayResultados = jsondata.filter(function (item) {
        var criteria = true;

        if (filtroFaixaEtaria != null && filtroFaixaEtaria != "")
            criteria = criteria && item["Faixa Etaria"] == filtroFaixaEtaria;
        if (filtroSexo != null && filtroSexo != "")
            criteria = criteria && item["Sexo"] == filtroSexo;
        if (filtroRecursoArma != null && filtroRecursoArma != "")
            criteria = criteria && item["RecursoArma"] == filtroRecursoArma;
        if (filtroDistrito != null && filtroDistrito != "")
            criteria = criteria && item["Distrito"] == filtroDistrito;


        return criteria;

    });

    document.getElementById("contadorprincipal").innerHTML = arrayResultados.length;

    document.getElementById("contadordebonecos").innerHTML = arrayResultados.length + " / " + arrayResultados.length;

    console.log("Foram encontrados " + arrayResultados.length + " elementos de acordo com a busca");
    const imagens = Array.from({
        length: Number(arrayResultados.length)
    }).reduce((html) => html + imagem, '');
    $('#images').html(imagens);

    console.log("Foram encontrados " + arrayResultados.length + " elementos de acordo com a busca");
    const imagenss = Array.from({
        length: Number(arrayResultados.length)
    }).reduce((html) => html + imagemm, '');
    $('#imagess').html(imagenss);
}

javascript jquery ajax

  • Your problem must be because you are using a filter() method on a null result... try to regularize it to be an empty array when it has no value: [].filter( ... ), here is more information about this.

  • Its problem is asynchronous. When calling the showPeople function, the value of jsondata is still undefined.

  • @Ivanferrer I had to see but my goal is to filter the cases of json, because this filter is a function that I use in a select and show people and for the site to display the total number of cases in json

  • @Sam How can I define the value of jsondata? the purpose of the script is to parse which of the selects are selected to then define how many it will set when executing the paginar there is no select selected

  • To check if it is set: if(typeof jsondata !== 'undefined') { ... }

2 answers

1

Do as follows by calling the function LoadJsonData sending as callback parameter the function showPeople. The value of the variable jsondata will be sent by Ajax callback to the function showPeople via parameter.

And remove the option async: false, ajax. Using Ajax synchronously is discouraged (see this response).

Your code should look like this:

function LoadJsonData(callback) {
    $.ajax({
      url: './Json/dados.json',
      dataType: 'json',
      success: function (json) {
        if (callback) callback(json);
      }
    });
  }

LoadJsonData(showPeople);

function showPeople(jsondata) {
   // resto do código
}

  • Continued with the same error of showPeople and more errors appeared I will try to rewrite otherwise this code is very strange... but thanks anyway!

0

Try it this way and see if it works:

function LoadJsonData(callback) {
    $.ajax({
      url: './Json/dados.json',
      dataType: 'json',
      async: false,
      success: function (json) {
        if (callback) callback(json);
      }
    });
  }

var jsondata = LoadJsonData(function(json){
    showPeople(json);
});

jsondata();


function showPeople(jsondataResult) {


    var filtroFaixaEtaria = $("#FaixaEtaria option:selected").text();
    var filtroSexo = $("#Sexo option:selected").text();
    var filtroRecursoArma = $("#RecursoArma option:selected").text();
    var filtroDistrito = $("#Distrito option:selected").text();

    var arrayResultados = jsondataResult.filter(function (item) {
        var criteria = true;

        if (filtroFaixaEtaria != null && filtroFaixaEtaria != "")
            criteria = criteria && item["Faixa Etaria"] == filtroFaixaEtaria;
        if (filtroSexo != null && filtroSexo != "")
            criteria = criteria && item["Sexo"] == filtroSexo;
        if (filtroRecursoArma != null && filtroRecursoArma != "")
            criteria = criteria && item["RecursoArma"] == filtroRecursoArma;
        if (filtroDistrito != null && filtroDistrito != "")
            criteria = criteria && item["Distrito"] == filtroDistrito;


        return criteria;

    });

    document.getElementById("contadorprincipal").innerHTML = arrayResultados.length;

    document.getElementById("contadordebonecos").innerHTML = arrayResultados.length + " / " + arrayResultados.length;

    console.log("Foram encontrados " + arrayResultados.length + " elementos de acordo com a busca");
    const imagens = Array.from({
        length: Number(arrayResultados.length)
    }).reduce((html) => html + imagem, '');
    $('#images').html(imagens);

    console.log("Foram encontrados " + arrayResultados.length + " elementos de acordo com a busca");
    const imagenss = Array.from({
        length: Number(arrayResultados.length)
    }).reduce((html) => html + imagemm, '');
    $('#imagess').html(imagenss);
}

Browser other questions tagged javascript jquery ajax

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