Javascript - how to perform a search for a property on an array object?

Question

Javascript - how to perform a search for a property on an array object?

Navigation

#1 by (1 votes)

1

Hello, I'm learning JavaScript and I need to search for a property (city) on an array object (markersData), and if the search term exists, then show the entire contents of the object.

example:

var markersData = [
   {
      cidade: "Aceguá",
      empresa: "Empresa: JOÃO EVARISTO CASSANEGO MACHADO",
      representante: "Representante: Evaristo",
      telefone: "Fone: (51) 98149 9986",
      email: "Email: <a href='mailto:[email protected]'>[email protected]</a>" 
   },
   {
      cidade: "Água Santa",
      empresa: "Empresa: A. ROBERTO SEVERO REPRES COM",
      representante: "Representante: Roberto",
      telefone: "Fone: (54) 99133 2034",
      email: "Email: <a href='mailto:[email protected]'>[email protected]</a>" 
   }
}

javascript

asked by anonymous 07.07.2018 / 21:29

1 answer

Exchanging icons on menu button does not show I create a table or several tables in SQL Server?

score 1 · Accepted Answer

I leave an example where I invent and simplify the parts that I do not know how you want to implement:

const markersData = [{
    cidade: 'Aceguá',
    empresa: 'Empresa: JOÃO EVARISTO CASSANEGO MACHADO',
    representante: 'Representante: Evaristo',
    telefone: 'Fone: (51) 98149 9986',
    email: "Email: <a href='mailto:[email protected]'>[email protected]</a>",
  },
  {
    cidade: 'Água Santa',
    empresa: 'Empresa: A. ROBERTO SEVERO REPRES COM',
    representante: 'Representante: Roberto',
    telefone: 'Fone: (54) 99133 2034',
    email: "Email: <a href='mailto:[email protected]'>[email protected]</a>",
  },
];

const mostrador = document.getElementById('mostrador');
const procura = document.getElementById('procura');
procura.addEventListener('keyup', (e) => {
  const filtrados = markersData.filter((marker) => {
    const txt = e.target.value;
    // versão simples seria:
    // return txt && (txt === marker.cidade);

    // versão mais flexivel:
    return marker.cidade.toLowerCase().includes(txt.toLowerCase());
  });

  mostrador.innerHTML = filtrados.map(
    (obj) => '
    <h4>${obj.cidade}</h4>
    <p>${obj.empresa}</p>
  ',
  ).join('<hr/>');
});

<input id="procura" />
<div id="mostrador"></div>

The essential part is marker.cidade.toLowerCase().includes(txt.toLowerCase()); what I do is to compare the searched text txt in small print within the name of each city (also in small print). This search does not take into account accents, there are other questions that address this issue, but I think that's not the main problem of the question.

With a submit button it would look like this:

const markersData = [{
    cidade: 'Aceguá',
    empresa: 'Empresa: JOÃO EVARISTO CASSANEGO MACHADO',
    representante: 'Representante: Evaristo',
    telefone: 'Fone: (51) 98149 9986',
    email: "Email: <a href='mailto:[email protected]'>[email protected]</a>",
  },
  {
    cidade: 'Água Santa',
    empresa: 'Empresa: A. ROBERTO SEVERO REPRES COM',
    representante: 'Representante: Roberto',
    telefone: 'Fone: (54) 99133 2034',
    email: "Email: <a href='mailto:[email protected]'>[email protected]</a>",
  },
];

const mostrador = document.getElementById('mostrador');
const enviar = document.getElementById('enviar');
const procura = document.getElementById('procura');
enviar.addEventListener('click', (e) => {
  const filtrados = markersData.filter((marker) => {
    const txt = procura.value;
    // versão simples seria:
    // return txt && (txt === marker.cidade);

    // versão mais flexivel:
    return marker.cidade.toLowerCase().includes(txt.toLowerCase());
  });

  mostrador.innerHTML = filtrados.map(
    (obj) => '
    <h4>${obj.cidade}</h4>
    <p>${obj.empresa}</p>
  ',
  ).join('<hr/>');
});

<input id="procura" /><button id="enviar" type="button">Enviar</button>
<div id="mostrador"></div>