Jump to content

.London Domains - £4
Photo

JavaScript Search/Array Methods...

javascript array methods arrays

  • Please log in to reply
4 replies to this topic

#1 historygirllfc

historygirllfc
  • Hefty Member
  • Advanced Member
  • 637 posts

Posted 17 June 2018 - 11:31

So I attempting to do a JS search thing (I have posted about it before...). I have an array of objects with info about football teams what I would like to do is be able to enter a team to seach for and if search name matches one of the teams show the relevant info about that team.

 

So far I have EventListener on the input to get the search value and created an array of the team names to match against. I have that removed the football club from the strings using replace, but I would like to further reduce the strings further and remove words from the strings as although some teams have united or city etc in their names it is not how they are usually referred to, although some do need to have that included.

 

I have looked through MDN and the list of array methods but not sure if the best way to approach it as some teams need that part of the name and others don't. Could it be splice? As the teams are listed alphabetically so I can get the index value and use that to target but could I use that for multiple teams/words?

 

Also to get the other info and display for the team that matched the search term I figure I want a for loop to go through the original teams array but not sure how it ties up with the other teamNames array I have created?

 

Any help appreciated... I think I understand the relevant bits as ever it tyings them all together I'm having difficulty with.

 

 

Codepen here:

https://codepen.io/cgweb/pen/zaEEqo


  • 0

YNWA

 

 


#2 Lyndsey

Lyndsey
  • Supporter+
  • Standard Member
  • 404 posts

Posted 16 July 2018 - 07:29

You'll probably want to use Array.filter to filter out teams based on the search keyword, rather than use a for loop. It's much cleaner:

const teams = [{ name: 'Wolves' //etc }];
const filteredTeams = teams.filter(team => team.name === searchTerm);

The string manipulation you are talking about seems a bit overkill. You could store the information in the object directly in another property e.g

const teams = [
  {
    name: 'West Bromwich Albian Football Club',
    shortName: 'West Brom',
    founded: 1878
  },
  {
    name: "Cardiff City Football Club",
    founded: 1899
  }
];

  • 1

#3 historygirllfc

historygirllfc
  • Hefty Member
  • Advanced Member
  • 637 posts

Posted 04 August 2018 - 11:07

search.addEventListener('input', () => {
  let searchName = document.getElementById('search').value.toLowerCase();
  // console.log(searchName);

  let teamNames = [];
  for (let i = 0; i < teams.length; i++) {
    teamNames.push(teams[i].name.toLowerCase().replace('football club', '').trim());
    // let teamName = teams[i].name;
    let year = teams[i].founded;
    let stadium = teams[i].stadium;
    let capacity = teams[i].capacity;
    let where = teams[i].location;
    let nickName = teams[i].nickname;
    let website = teams[i].website.toLowerCase();
    let manager = teams[i].manager;
    let img = document.createElement("img");
    img.src = teams[i].badge;

    if(teamNames[i].indexOf(searchName) > -1){
        let info = document.querySelector('p');
        info.innerHTML = `Name: ${teamNames[i]} <br> Year Founded: ${year} <br> Stadium: ${stadium} <br> Location:  ${where} <br> Nickname: ${nickName} <br> Manager: ${manager} <br> Website: ${website}`;
        info.appendChild(img);
    }
  }

So this is how I did it in the end perhaps not the most efficient way to do it but it works I'm sure once I learn more I could refactor it to be more efficient.


  • 0

YNWA

 

 


#4 Lyndsey

Lyndsey
  • Supporter+
  • Standard Member
  • 404 posts

Posted 06 August 2018 - 14:10

search.addEventListener('input', () => {
  let searchName = document.getElementById('search').value.toLowerCase();
  // console.log(searchName);

  let teamNames = [];
  for (let i = 0; i < teams.length; i++) {
    teamNames.push(teams[i].name.toLowerCase().replace('football club', '').trim());
    // let teamName = teams[i].name;
    let year = teams[i].founded;
    let stadium = teams[i].stadium;
    let capacity = teams[i].capacity;
    let where = teams[i].location;
    let nickName = teams[i].nickname;
    let website = teams[i].website.toLowerCase();
    let manager = teams[i].manager;
    let img = document.createElement("img");
    img.src = teams[i].badge;

    if(teamNames[i].indexOf(searchName) > -1){
        let info = document.querySelector('p');
        info.innerHTML = `Name: ${teamNames[i]} <br> Year Founded: ${year} <br> Stadium: ${stadium} <br> Location:  ${where} <br> Nickname: ${nickName} <br> Manager: ${manager} <br> Website: ${website}`;
        info.appendChild(img);
    }
  }

So this is how I did it in the end perhaps not the most efficient way to do it but it works I'm sure once I learn more I could refactor it to be more efficient.

 

 

Here are a couple of tips for you:

 

If you're using ES6, you can make use of destructuring to grab properties from an object instead of defining them over new lines, for example:

const { year, stadium, capacity } = teams[i];

Use const if your properties aren't going to be reassigned.

 

Instead of using document.querySelector in each loop, you'll have better performance by building up the HTML string within the loop then appending it to the DOM afterwards. Doing a lookup for an element in the DOM in each iteration can be expensive so you should try and avoid that.

 

Instead of using a for...loop try using some of the newer array methods such as .forEach or .map. Your code will become more readable and your functionality can be extracted into testable pieces.

 

Hope this helps.


  • 1

#5 historygirllfc

historygirllfc
  • Hefty Member
  • Advanced Member
  • 637 posts

Posted 18 August 2018 - 10:36

Destructuring is something new I have learnt recently so will have a go at refactoring using that. Thanks Lyndsey.


  • 0

YNWA

 

 






Also tagged with one or more of these keywords: javascript, array methods, arrays

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users