Search string in an array with jquery

Question

Guys I’m having a problem with the code.

function escreveNoticias() {

    var table_body = $("#lista-noticias tbody");
    table_body.empty();

    for (var i = 0; i<noticias.length; i++) {
        noticia = noticias[i];
        if (categorias.indexOf(noticia.categoria)>=0) {
            if (categorias.indexOf(procura)>=0) {
                var linha = "<tr class=\"realce\"><td>" + "<span>Titulo:</span>" + noticia.titulo + "&nbsp" + "&nbsp" + "&nbsp" + "&nbsp" + "<br><br>" + "<span>Categoria:</span>" + noticia.categoria + "&nbsp" + "&nbsp" + "&nbsp" + "&nbsp" + "<br><br>" + "<span>Data:</span>" + noticia.data  +  "<br><br>" + "<span>Subtitulo</span>" + noticia.subtitulo +  "<br><br>" + "<span>Artigo:</span>" + noticia.artigo +  "<br><br>" + "</td><tr>";
                table_body.append(linha);
            }
        }
    }
}

Well personal my problem is the following, when executing this part: if(categorias.indexOf(noticia.categoria)>=0) I want to see if the category of the news exists in the categories arrray and so far everything works well, presents only the news with the category that are selected by checkbox, the problem comes in the following line, when doing this: if(categorias.indexOf(procura)>=0) What I was supposed to do was to receive a string stored in the search variable and check if there is a category with the name of the string but this part doesn’t work and I don’t know why... The search variable is filled here.

function procurar() {
    $("#Procurar").click(function(){
        procura = ($("#TEXTO").val());
        escreveNoticias();
    });
}

I even made one alert to see if the string reached the escreveNoticias and comes my problem is right in the indexOf...

Someone can help me?!?!

Answer 1

I’ll highlight some problems:

1. if you declare a table HTML without elements in it, a tbody will not be generated automatically.
2. the method escreveNoticias should be receiving variables as argument, not as global objects (this is very important in the medium and long term, for the maintainability of the program)
3. the association of the event click to the element #Procurar occurs within a function, which does not appear to be called, and whose name (procurar) does not indicate that it will be called for the purpose of registering events

4. the logic of ifs is strange, you select the news according to the check-boxes (categories), until then ok... but then only let the news be listed if the user type in a text box the name of one of the categories checked (for this?)

   You will have to decide whether you want the user to select categories via checkbox or from a text he types.

Problems 1 to 3 are solved in the snippet below. The 4, is already a problem of logic, and then you will have to think a little more about the actual behavior desired.

$(function() {
  var categorias = ["Esporte", "Lazer"];
  var noticias = [
    {titulo:"O time ganhou",categoria:"Esporte",data:"",subtitulo:"",artigo:""},
    {titulo:"Resort bom bonito e barato",categoria:"Lazer",data:"",subtitulo:"",artigo:""},
    {titulo:"O outro time perdeu",categoria:"Esporte",data:"",subtitulo:"",artigo:""},
    {titulo:"Viagens à lua não são mais sonho",categoria:"Lazer",data:"",subtitulo:"",artigo:""},
    {titulo:"O filme do momento",categoria:"Cinema",data:"",subtitulo:"",artigo:""}
  ];

  function escreveNoticias(procura, categorias, noticias) {

    var table_body = $("#lista-noticias tbody");
    table_body.empty();

    for (var i = 0; i < noticias.length; i++) {
      var noticia = noticias[i];
      if (categorias.indexOf(noticia.categoria) >= 0) {
        if (categorias.indexOf(procura) >= 0) {
          var linha = "<tr class=\"realce\"><td>" +
            "<span>Titulo:</span>" + noticia.titulo + "&nbsp" + "&nbsp" + "&nbsp" + "&nbsp" + "<br><br>" +
            "<span>Categoria:</span>" + noticia.categoria + "&nbsp" + "&nbsp" + "&nbsp" + "&nbsp" + "<br><br>" +
            "<span>Data:</span>" + noticia.data + "<br><br>" +
            "<span>Subtitulo</span>" + noticia.subtitulo + "<br><br>" +
            "<span>Artigo:</span>" + noticia.artigo + "<br><br>" + "</td><tr>";
          table_body.append(linha);
        }
      }
    }
  }

  $("#Procurar").click(function() {
    var procura = ($("#TEXTO").val());
    escreveNoticias(procura, categorias, noticias);
  });
});

td {
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Suponha que estão checadas as categorias: "Esporte" e "Lazer"</p>
<input id="TEXTO" />
<button id="Procurar">Procurar</button>
<p>Lista de notícias</p>
<table id="lista-noticias">
  <tbody></tbody>
</table>