Javascript - how to search for a property in an object of an (array)?

Asked

Viewed 43 times

1

Hello, I am learning Javascript and need to perform a search for a property (city) in an object of an array(markersData), and if the term searched exists, ai show all the content 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

  • Do you want to find the first object or filter the array and create a new one with these objects? You can better explain how to use this data more?

  • Hello Sergio, I want to use an input for the user to enter the name of the city, if this city exists inside the objects of the array, then I want to show all the content in the html object as a result

  • And if there are 3 objects with this city?

  • there will not be 3 objects with the same string for city, there in the example I put the array with two objects (two cities) right? the original array will have tens or even hundreds of objects.... I hope to be correct in the terms... , then the user must perform the search by typing the name of the city (string) in the input, if this name (city property) exists inside the array, then it must show in innerHtml all data stored in the object in question (city, company, representative, telephone and email.

  • Okay, and you want full match or writing santa should appear Água Santa and a city (if any) Santa Ana also?

  • I had thought to put the exact match, but if you can show me two options it would be great, it would be two learnings in a need

Show 1 more comment

1 answer

1


I leave an example where I invent and simplify the parts I don’t 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 compare the searched text txt in small print within the name of each city (also in small print). This demand does not take into account accents, there are other questions that address this problem, but I think that is not the main problem of the question.

With a Ubmit 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>

  • understood, then maybe in this case it would be more appropriate to use a select with the name of all cities? this would eliminate the problem of accentuation?

  • @Rafakunz yes, no doubt, You can also have a custom select with search functionality.

  • ♦ thanks again for your help! have one more question, instead of using 'keyup', I would like to use an input button with 'Submit', I tried to replace in the code above, but it didn’t work aenas by changing the keyup by Submit with an input type='Submit', you could help me?

  • @Rafakunz added this variant to the answer. If the question answers what you are looking for you can click to mark as accepted.

Browser other questions tagged javascript

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