Search and filter through array javascript

Question

Excuse the title I'm not sure how to describe what I'm doing

I have a textarea where people can write comments but they can also mention people using an @mention system I have made... now my only issue is once the user starts typing after the @ it doesnt narrow down the users so say I have an array of objects like so..

users = [
  {
    name: steve,
    id: 47 
  },
  {
    name: james,
    id: 41
  },
  {
    name: guy,
    id: 44 
  },
  {
    name: troy,
    id: 32 
  }
]

how can I filter out users in the array depending on the string thats being written after an @ symbol so If I write @tr in my text area my users array should now look like this

users = [
  {
    name: troy,
    id: 32
  }
]

Any help would be appreciated!

CertainPerformance · Accepted Answer · 2018-07-18 02:40:41Z

2

Use a filter to check for if the name of the user being iterated over includes the substring in question:

const users = [
  {
    name: 'steve',
    id: 47 
  },
  {
    name: 'james',
    id: 41
  },
  {
    name: 'guy',
    id: 44 
  },
  {
    name: 'troy',
    id: 32 
  }
];

const substr = 'tr';
console.log(
  users.filter(({ name }) => name.includes(substr))
);

Also make sure your name values are strings.

answered Jul 18, 2018 at 2:40

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Smokey Dawson Over a year ago

Sorry just another quick question how can I only check for the string after the @??

CertainPerformance Over a year ago

@SmokeyDawson If the input string actually has the @ in it, then match everything that comes after the @: value.match(/@(.+$)/)[1] or if there might be multiple @s, /@([^@]+$)/

pizzarob · Accepted Answer · 2018-07-18 03:06:46Z

I'd recommend an approach similar to the other answer, but I would use startsWith instead of includes and make sure to lowercase both strings when comparing them. This will give you more accurate results.

const names = [{ name: 'Bob'}, { name: 'Sally' }, { name: 'Frank' }, { name: 'Lester' }, { name: 'Bo' }, { name: 'Salazar' }, { name: 'Frida' }];
const textArea = document.querySelector('[data-id="textarea"]');
const nameWrap = document.querySelector('[data-id="names"]');

function inputListener() {
  let shouldListen = false;
  let index;
  return (e) => {
    const { value } = e.currentTarget;
    const currentValue = value[value.length - 1];
    if(shouldListen) {
      if(currentValue === ' ' || value.length - 1 < index) {
        shouldListen = false;
        return;
      }
      const str = (value.substr(index).match(/@(.+$)/)[1]).toLowerCase();
      const html = names
        .filter(({ name }) => name.toLowerCase().startsWith(str))
        .map(({ name }) => `<p>${name}</p>`)
        .join('');
        console.log(html)
     nameWrap.innerHTML = html;
    }
    if(currentValue === '@' && !shouldListen) {
      shouldListen = true;
      index = value.length - 1;
    }
  }

}
textArea.addEventListener('input', inputListener())

<textarea data-id="textarea"></textarea>
<div data-id="names"></div>

Joven28 · Accepted Answer · 2018-07-18 02:42:38Z

0

Try this.

let str = "@tr";

var users = [
  {
    name: "steve",
    id: 47 
  },
  {
    name: "james",
    id: 41
  },
  {
    name: "guy",
    id: 44 
  },
  {
    name: "troy",
    id: 32 
  }
];

const filteredUser = users.filter(user => user.name.includes(str.replace(/@/, "")));
console.log(filteredUser);

answered Jul 18, 2018 at 2:42

Joven28

7693 silver badges12 bronze badges

2 Comments

Smokey Dawson Over a year ago

Sorry just another quick question how can I only check for the string after the @??

Joven28 Over a year ago

Yeah that's why i replace "@" with "".

user3003238 · Accepted Answer · 2018-07-18 02:43:37Z

0

You may want filter

const users = [
  {
    name: 'steve',
    id: 47 
  },
  {
    name: 'james',
    id: 41
  },
  {
    name: 'guy',
    id: 44 
  },
  {
    name: 'troy',
    id: 32 
  }, {
    name: 'stephon',
    id: 141
  }
];

const partialUserName = 'st';
const output = users.filter(user => user.name.startsWith(partialUserName)); 
// you can change to contains if that's what you want
console.log(output)

answered Jul 18, 2018 at 2:43

user3003238

1,51510 silver badges17 bronze badges

Comments

Adnan · Accepted Answer · 2018-07-18 02:51:56Z

0

You can try search method

  const substr = 'tr';
   array.filter(( name ) => {
     return (
      name.toLowerCase()
      .search(substr.toLowerCase()) !== -1
       )

Hope this help

answered Jul 18, 2018 at 2:51

Adnan

1,70713 silver badges19 bronze badges

Collectives™ on Stack Overflow

Search and filter through array javascript

5 Answers 5

2 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related