Filter JSON object array on multiple values or arguments javascript - Stack Overflow

admin管理员组

文章数量:1317906

users = [
  {
    "username": "Alice",
    "firstName": "Alice-U",
    "lastName": "Wonderland"
  },
  {
    "username": "bob",
    "firstName": "Bob-u",
    "lastName": "Builder",
  },
  {
    "username": "charly",
    "firstName": "Charly-u",
    "lastName": "Brown",
  }
]

I want to be able to filter this array on multiple values like:

Search Criteria: { "username" : "Alice" } should return:

{
    "username": "Alice",
    "firstName": "Alice-U",
    "lastName": "Wonderland"
}

Similary for: { "username" : "charly", "firstName": "Charly-u" } should return :

{
    "username": "charly",
    "firstName": "Charly-u",
    "lastName": "Brown",
}

with exact string matching using javaScript or jQuery.

users = [
  {
    "username": "Alice",
    "firstName": "Alice-U",
    "lastName": "Wonderland"
  },
  {
    "username": "bob",
    "firstName": "Bob-u",
    "lastName": "Builder",
  },
  {
    "username": "charly",
    "firstName": "Charly-u",
    "lastName": "Brown",
  }
]

I want to be able to filter this array on multiple values like:

Search Criteria: { "username" : "Alice" } should return:

{
    "username": "Alice",
    "firstName": "Alice-U",
    "lastName": "Wonderland"
}

Similary for: { "username" : "charly", "firstName": "Charly-u" } should return :

{
    "username": "charly",
    "firstName": "Charly-u",
    "lastName": "Brown",
}

with exact string matching using javaScript or jQuery.

• javascript
• arrays
• json
• filter
• attributes

Share Improve this question Follow edited Sep 25, 2018 at 3:53 Chris Li 2,67111 gold badge1010 silver badges2424 bronze badges asked Sep 25, 2018 at 2:27 saurin shahsaurin shah 2511 silver badge66 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

You can employ .every to check that each of the criteria keys matches:

function filterBy(list, criteria) {
  return list.filter(candidate =>
    Object.keys(criteria).every(key =>
      candidate[key] == criteria[key]
    )
  );
}

let users = [
  { "username": "Alice", "firstName": "Alice-U", "lastName": "Wonderland" },
  { "username": "bob", "firstName": "Bob-u", "lastName": "Builder" },
  { "username": "charly", "firstName": "Charly-u", "lastName": "Brown" }
];

console.log(filterBy(users, { "username" : "Alice" }));
console.log(filterBy(users, { "username" : "charly", "firstName": "Charly-u" }));

Why not Array.prototype.filter()? to filter only the element that has username="Alice". By the way you can add multiple object keys inside your filter's arrow function while filtering array of object. For example:

user.username ==='Charly' && firstName==='Charly-u'

users = [{
    "username": "Alice",
    "firstName": "Alice-U",
    "lastName": "Wonderland"
  },
  {
    "username": "bob",
    "firstName": "Bob-u",
    "lastName": "Builder",
  },
  {
    "username": "charly",
    "firstName": "Charly-u",
    "lastName": "Brown",
  }
];

result = users.filter(user => user.username ==='Alice');

console.log(result);

can’t it be just a function with for loop? //call this.filterIt( ‘username’ , ‘Alice’, users);

//function
Function filterIt (key, value, arr){
result = [];
for ( a in arr){
   if (a[key] == value) result.push(a);
}
return result;
}

You can write it in the following way. If you want to do exact search write a search function like this:

function search(term) {
  return users.filter(({username, firstName, lastName}) => {
    return username.toLowerCase() === term.toLowerCase() ||
          firstName.toLowerCase() === term.toLowerCase() ||
          lastName.toLowerCase() === term.toLowerCase()
  })
}

Instead of paring each key one can iterate all object properties using object.keys.

If you want to match each anything use following function

function search(term) {
  return users.filter(({username, firstName, lastName}) => {
    return username.toLowerCase().indexOf(term.toLowerCase()) > -1 ||
           firstName.toLowerCase().indexOf(term.toLowerCase()) > -1 ||
           lastName.toLowerCase().indexOf(term.toLowerCase()) > -1
   })
}

This will even match searchTerm anywhere. Like if you use this as search('al'). It will return the first object, whereas the first function will need exact string like search('alice') to work.

const users = [{
    "username": "Alice",
    "firstName": "Alice-U",
    "lastName": "Wonderland"
  },
  {
    "username": "bob",
    "firstName": "Bob-u",
    "lastName": "Builder",
  },
  {
    "username": "charly",
    "firstName": "Charly-u",
    "lastName": "Brown",
  }
]

function searchFull(term) {
  return users.filter(({
    username,
    firstName,
    lastName
  }) => {
    return username.toLowerCase() === term.toLowerCase() ||
      firstName.toLowerCase() === term.toLowerCase() ||
      lastName.toLowerCase() === term.toLowerCase()

  })

}


function search(term) {
  return users.filter(({
    username,
    firstName,
    lastName
  }) => {
    return username.toLowerCase().indexOf(term.toLowerCase()) > -1 ||
      firstName.toLowerCase().indexOf(term.toLowerCase()) > -1 ||
      lastName.toLowerCase().indexOf(term.toLowerCase()) > -1

  })

}

console.log(searchFull('alice'))
console.log(search('al'))

本文标签： Filter JSON object array on multiple values or arguments javascriptStack Overflow