[Vuejs]-Extract matching values from array of objects in javascript

by

1👍

✅

You can loop through the array and search for objects.

users = [{
  office: "J Limited",
  contact: {
    first_name: "James",
    last_name: "Wilson",
    address: "Canada"
  }
}, {
  office: "Q Limited",
  contact: {
    first_name: "Quin",
    last_name: "Ross",
    address: "Australia"
  }
}, {
  office: "N Limited",
  contact: {
    first_name: "Nancy",
    last_name: "Mathew"
  },
  address: "England"
},
{
  office: "J Limited",
  contact: {
    first_name: "Jacob",
    last_name: "Wilson",
    address: "Canada"
  }
}
]

function search(searchKey) {
  searchKey = searchKey.toLowerCase();
  results = [];
  for (var i = 0; i < users.length; i++) {
    if (users[i].contact.first_name.toLowerCase().includes(searchKey) || users[i].contact.last_name.toLowerCase().includes(searchKey) || users[i].office.toLowerCase().includes(searchKey)) {
      results.push(users[i]);
    }
  }
  return results;
}

var resultObject = search("ja");
if (resultObject) {
  for(i in resultObject){
    console.log(resultObject[i].office, resultObject[i].contact.first_name, resultObject[i].contact.last_name)
  }
}

1👍

To get the matching users, you can do something like:

const searchString = 'ja'

const matchingUsers = users.filter(user => 
  user.office.contains(searchString) || 
  user.contact.first_name.contains(searchString) || 
  user.contact.last_name.contains(searchString)
)

And then you can format that list of matching users however you like

EDIT: contains may not work on some JS versions (works on Chrome), so replace contains with includes:

const searchString = 'ja'

const matchingUsers = users.filter(user => 
  user.office.includes(searchString) || 
  user.contact.first_name.includes(searchString) || 
  user.contact.last_name.includes(searchString)
)

1👍

let users = [{
    office: "J Limited",
    contact: { first_name: "James", last_name: "Wilson", address: "Canada" }
}, {
    office: "Q Limited",
    contact: { first_name: "Quin", last_name: "Ross", address: "Australia" }
}, {
    office: "N Limited",
    contact: { first_name: "Nancy", last_name: "Mathew", address: "England"},
}];


// ig: i for case-insensitive, g for global
const regEx = new RegExp('ja', 'ig');

const result = users.filter(
    each =>
        each.office.match(regEx) ||
        each.contact.first_name.match(regEx) ||
        each.contact.last_name.match(regEx)
)
.map(
    each => [
        each.office,
        each.contact.first_name,
        each.contact.last_name
    ]
);

console.log(result);

0👍

const filterUser = users.filter(user =>{ return user.office.toLowerCase().includes((searchField).toLowerCase()) });

your searchField is the value of input and the filteruser can now be used as it will return the user with office name contain in the search or return all if nothing is enter in searchField.

You can now map through filterUser to be able to use the user contain the input value which is your searchField.

Leave a comment