Vue JS real-time search on object's key/value pairs - javascript

I'm using Vue JS 2 as part of my Nuxt JS project to build a real-time search filter whereby a user can start typing and have results matched based on what they've typed.
I've got a search input, binded to the model of applicantModalSearch as a String, and an object held in applicantModalData with key/value pairs.
The data inside of applicantModalData is unknown, and not initially populated on page load, it's updated as part of the user selection from a v-for element, i.e: the user clicks a button to preview data in a modal, and the index item for that v-for item is added to applicantModalData
I'd like to be able to dynamically search for both keys, and the values, and not just the value and have results returned, right now my error is:
this.applicantModalData.filter is not a function
export default {
data () {
return {
applicantModalIsShown: false,
applicantModalData: null,
applicantModalSearch: ''
}
},
methods: {
/*
** Applicant modal data
*/
toggleApplicantModal (applicant) {
this.applicantModalData = applicant ?? null
this.applicantModalIsShown = !this.applicantModalIsShown
}
},
computed: {
/*
** Filter applicant data for ease
*/
filteredApplicantData () {
if (this.applicantModalSearch) {
return this.applicantModalData.filter((item) => {
return this.applicantModalSearch.toLowerCase().split(' ').every(v => item.toLowerCase().includes(v))
})
} else {
return this.applicantModalData
}
}
}
}
An example object that I need to filter and return could be:
{
"_method": "POST",
"honey_key": "test",
"honey_version": null,
"client_user_agent_string": "Mozilla/5.0 (iPhone; CPU iPhone OS 14_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0 Mobile/15E148 Safari/604.1",
"application_source_url": "https://example.com/",
"IsIframe": "1",
"AppFirstName": "John",
"AppLastName": "Doe"
}
So if I type in something like "John" into the search element (applicantModalSearch) I expect to get from my computed property:
{
"AppFirstName": "John",
}
or if I type into the search element "lastname" I expect to see:
{
"AppLastName": "Doe"
}
What am I missing in my code?
UPDATE
So after implementing:
filteredApplicantData() {
if (this.applicantModalSearch) {
return Object.fromEntries(
Object.entries(this.applicantModalData).filter(([key, value]) => {
if (value == null) value = 'null'
return this.applicantModalSearch
.toLocaleLowerCase()
.split(" ")
.every(
(word) =>
key.toLocaleLowerCase().includes(word) ||
value.toLocaleLowerCase().includes(word)
);
})
);
}
return this.applicantModalData;
},
and adding more data, strangely the code will fail and only ever get to client_user_agent_string in the list (I've added more data)
is there a weird character maybe in the object?
FINAL UPDATE
Turns out that the following is needed to resolve and complete the function as part of the Object.entries part:
if (value == null) value = 'null'

I followed your logic for comparing the values, but applied them to both the key and value. I tested it on the example that you gave.
computed: {
filteredApplicantData() {
if (this.applicantModalSearch) {
return Object.fromEntries(
Object.entries(this.applicantModalData).filter(([key, value]) => {
return this.applicantModalSearch
.toLocaleLowerCase()
.split(" ")
.every(
(word) =>
key.toLocaleLowerCase().includes(word) ||
value.toLocaleLowerCase().includes(word)
);
})
);
}
return this.applicantModalData;
},
},
Some explanation: Object.entries returns an array of the given object's key-value pairs as an array [key, value]. This allows us to iterate/filter on that array and reconstruct the object with the opposite method Object.fromEntries.

Related

Typescript filter to select object with value of specific words

I have an array of objects in my DB records.
The record:
{"ID123":{"FileID":"12345","FileName":"ABCFile_ver5_44453.PDF"},"DocID":6009,"DocFormat":"PDF"}
The format to store the filename in my DB is always with "FileName": "actual_fileName.PDF".
I want to only get the object with "FileName":"....", to only display the filename instead of other objects.
This is my code:
getValue(): Atts[] | any {
if (this.isEmptyValue()) {
return [];
}
return !this.useObject ? this.value : Object.entries(this.value).map(([key, value]) => ({ key, value })).filter(value=);
}
How do I filter the object that contains "FileName" so that I can display the filename in my application?
I'm stuck at the filter method.
I had to reduce your code a little to a minimal reproducible example, and I made the assumption that this.value in your Object.entries is the entire DB record that you have listed above. I converted this to an object so I could process it in my code. So, your mileage may vary if my assumption was incorrect.
let obj = {
"ID123": {
"FileID": "12345",
"FileName": "ABCFile_ver5_44453.PDF"
},
"DocID": 6009,
"DocFormat": "PDF"
};
let result = { "FileName": Object.entries(obj).map(([key, value]) => ({
key,
value
})).filter(keyValuePair => {
if (keyValuePair.value.FileName) {
return true;
}
})[0].value.FileName };
This returns:
{
"FileName": "ABCFile_ver5_44453.PDF"
}
Your filter step is filtering an array of key value pairs, so when filtering, you need to return true only if the 'value' is an object that has a property of FileName.
EDIT:
I realized that the way I wrote this will not work if the returned object from the array does not have value (or is undefined), so it's probably a better idea to store this in a variable first, and then return an object based on that varible, like so:
let fileNameObj = Object.entries(obj).map(([key, value]) => ({
key,
value
})).filter(keyValuePair => {
if (keyValuePair && keyValuePair.value.FileName) {
return true;
}
})[0];
if (fileNameObj && fileNameObj.FileName) {
let result = { "FileName": fileNameObj.FileName };
}

chain logical AND without fixed length given an array in Node.js and Typescript

Scenario:
I am making a generic function that returns a boolean depending on logical AND statements, however, the function being generic accept multiple type of objects and arrays, and the statements can vary depending on the objects.
at the moment I have something like this
private async myFunction(
myArray: myArrObj[],
myObj : myObj,
): Promise<boolean> {
return (
myArr.some(
(a) =>
a.status1=== "*" ||
a.status1 === myObj.status1.status1Id
) &&
myArr.some(
(a) =>
a.status2=== "*" ||
a.status2 === myObj.status2.status2Id
) &&
myArr.some(
(a) =>
a.status3=== "*" ||
a.status3 === myObj.status3.status3Id
) &&
myArr.some(
(a) =>
a.status4=== "*" ||
a.status4 === myObj.status4.status4Id
)
)
}
the issue is not being able to know what kind of array is passed and how many checks are needed, how can I make a return? My idea was storing each array.some method in an array and join them with " && ", this approach would require to execute something from a string, which I'm not sure is the most secure thing to do, since eval is not secure at all.
to get the myObj statuses I could just use a for loop and store the the the property in a string.
I can't come up with a good solution, so feel free to propose something new if my idea is not good enough
As noted by others in the comments, it would help if you had a reproducible example with sample data. That being said, from your comment:
but the statuses and id's have different names, some id's are .nameId, and some are just .id , but the statuses themselves have the same name, so instead of status1 and obStatus1 it really should be status1 and status1
Breaking this down:
but the statuses and id's have different names, some id's are .nameId, and some are just .id
You could try to see if nameId exists and fall back to id.
but the statuses themselves have the same name, so instead of status1 and obStatus1 it really should be status1 and status1
When myArr entries share keys with myObj, then you could simply loop through myObj's keys.
async function myFunction(myArr, myObj) {
// Fallback value for if .nameId and .id both don't exist.
// Falling back to `undefined` would cause a bug / false positives.
const notFound = Symbol();
// Loop through every key:value pair in the input object.
return Object.entries(myObj).every(([myObjKey, myObjValue]) => {
// Handle both `.nameId` and `.id`
const id = myObjValue[`${myObjKey}Id`] ?? myObjValue.id ?? notFound;
// If `myArrObj`'s children only ever contain exactly
// a single key { status2: { someRandomKey: 123 } }, then you
// could use myObjValue[Object.keys(myObjValue)[0]];
// For this key--for example "status1"--is there *any* array entry
// in `myArrObj` that has the same key and value or "*"?
return myArr.some((a) => {
return a[myObjKey] === '*' || a[myObjKey] === id;
});
});
}
With the following sample data:
const sampleArr = [
{ status3: "*" },
{ status2: 234 },
{ status1: 123, thisIsAnUnusedKey: true },
{ status4: 456 },
{ name: "Foobar" },
{ thisIsAnUnusedArrayEntry: true },
];
const sampleObj = {
status1: {
status1Id: 123,
},
status2: {
status2Id: 234,
},
status3: {
status3Id: 345,
},
status4: {
// Different key
id: 456,
},
name: {
// Different dataType
nameId: "Foobar"
}
};
myFunction(sampleArr, sampleObj).then(console.log); // Logs `true`

Find nested object that contains a value

I have an object containing multiple other objects, inside these nested objects is an array containing multiple objects, each with a uid. I'm trying to loop over the objects and find the object that contains a particular uid.
My data looks like this
const data = {
"3c5671fde44f44f9ad59d59eb810d87e": {
"heading": "Heading 1",
"items": [
{
"content": {
"uid": "4fcd5f4af7a448d48463d4e0a11297d9"
}
},
{
"content": {
"uid": "31f975440a0a431592e127b2891cd142"
}
}
]
},
"ea80e8315b554c9bb40958a6cacf4b0c": {
"heading": "Heading 2",
"items": [
{
"content": {
"uid": "d6de8db4c2a74da6915a44d3964277d6"
}
}
]
}
}
The uid I want to search for is d6de8db4c2a74da6915a44d3964277d6 when found I want to return it's parent object so I can access the heading property.
Current code looks like this but it doesn't work, it's been a long day so I'm likely missing something really simple.
const currentUid = "d6de8db4c2a74da6915a44d3964277d6";
const currentHeading = Object.keys(data).forEach(section => {
return data[section].items.filter(item => {
return item.content.uid === currentUid;
});
});
When debugging it successfully evaluates to true when it finds the correct uid, it just doesn't return anything.
Any help welcome!
forEach is meant just for looping the array, use find to find the key of your object from Object.keys(data). And inside the callback use some instead of filter to check the existance. This solution will result in either the key of the object or null. To get the object, just check that a key is returned and then use that key to get the object:
const currentHeadingKey = Object.keys(data).find(section => {
return data[section].items.some(item => {
return item.content.uid === currentUid;
});
});
const currentHeading = currentHeadingKey != null ? data[currentHeadingKey] : null;
currentHeading is now either the whole object if found, null otherwise. You can access the heading property of that object.
Note: Since the callbacks of both find and some have only one statement in them, you can use the implicit return of arrow function to shorten the code:
const currentHeadingKey = Object.keys(data).find(section =>
data[section].items.some(item => item.content.uid === currentUid)
);
Consider using the Object.values() method instead, to extract the "parent heading" for the supplied uid.
Taking this approach, you can iterate the values of data, and filter those section values that contain items matching the uid. In the answer below, this is done via:
return items.some(item => item.content.uid === currentUid)
Finally, you can map() the filtered sections to acquire the corresponding heading(s) of section with matching uid items:
function findHeading(data, uid) {
return Object.values(data).filter(section => {
// Find any item with matching uid in this section, filter this section accordingly
return section.items.some(item => item.content.uid === currentUid)
})
.map(section => {
// Map heading from any sections matching item uid
return section.heading
});
}
const data = {
"3c5671fde44f44f9ad59d59eb810d87e": {"heading": "Heading 1","items": [{"content": {"uid": "4fcd5f4af7a448d48463d4e0a11297d9"}},{"content": {"uid": "31f975440a0a431592e127b2891cd142"}}]},"ea80e8315b554c9bb40958a6cacf4b0c": {"heading": "Heading 2","items": [{"content": {"uid": "d6de8db4c2a74da6915a44d3964277d6"}}]}
}
const currentUid = "d6de8db4c2a74da6915a44d3964277d6";
console.log(findHeading(data, currentUid))

How to filter nested object using lodash

I have an object, which looks like this:
{
'somename1':{
status:'success',
data:{
key:'value1',
field2:'',
field3:'',
field4:'',
field5:'',
recordSts:'done',
}
},
'someOtherName':{
status:'success',
data:{
key:'value2',
field2:0,
field3:'',
recordSts:'progress',
field5:'',
field6:0,
}
}
}
In this object, I have two fields key and recordSts, which are not null if the status is success.
I want to filter this object using lodash and the output should look like this
{
'somename1':{
status:'success',
data:{
key:'value1',
status:'value1',
}
},
'someOtherName':{
status:'success',
data:{
key:'value1',
status:'value1',
}
}
}
Simply I want to delete the keys which having null or empty or 0 values.
I tried this:
_.map(records, 'key'); //records contains my input object
But it gives only the value of one field, instead, I want the name of the field and the second field also. Please help.
Thanks.
You can use _.pickBy with our custom predicate, like
_.forEach(records, function(record) {
record.data = _.pickBy(record.data, function(val) {
return !!val;
}
})
you can use _.omitBy to remove falsy values
let res = _.forOwn(records, o => {
o.data = _.omitBy(o.data, v => {
return !v;
});
return o;
});
You can use mapValues(), assign(), and pickBy():
_.mapValues(
records,
r => _.assign({}, r, { data: _.pickBy(r.data) })
);
This produces a new records object, without mutating the original. What I like about pickBy() is that by default, it'll only return properties with truthy values. Notice how we're not passing a predicate? This works because the default predicate is identity(), which simply uses the value as a truth test.

MongoDB/Mongoose Query Builder

I am trying to build a query builder which will allow me to filter the data based on the parameters entered by user. My Data Model is like so:
{
"_id": {
"$oid": "871287215784812"
},
"tags": [
"school",
"book",
"bag",
"headphone",
"appliance"
],
"consultingDays": 57,
"client": "someOne",
"subSector": "something",
"region": "UK",
"__v": 0
}
Currently my Query Builder looks like this:
app.post('/user/test',function(req, res) {
var query = {};
//QUERY NO.1 - This works perfectly
if (req.body.region){
query.region = req.body.region
console.log(query.region)
}
// QUERY NO.2 - This works perfectly
if (req.body.subSector){
query.subSector = req.body.subSector
}
Project.find(query, function(err, project){
if (err){
res.send(err);
}
console.log(project);
res.json(project);
});
});
My Question:
I want to create a query which will take input from user and parse the "tags" array and return the required JSON.
For example:
If the user requests an object which contains "school", "book", "bag" it will return the object as seen my data model above. But if the user requests an object with "school", "book", "ninja Warrior" it won't return any data as no object within the database contain all those 3 strings.
What I have tried:
I have tried the following
if (req.body.sol){
query.solutions = {"tags" : {$in: [req.body.sol]}}
}
OR
if (req.body.sol){
query.solutions = {$elemMatch:{tags: req.body.sol}}
}
OR
if (req.body.sol){
query.solutions = { tags: { $all: [req.body.sol]}}
}
The requests were sent like so and they returned an empty array:
Also the issue is that the user will get dropdown options. For example he/she might get 3 dropdown boxes. Each dropdown box will display all the five options in the tags array. The user will select a value for each dropdown box. And then filter the result. Because there might be an object within the database that contains "book", "bag", "shoes" within the tags array. The user can select any combination of those five keywords in the tags array
Does anyone know how I can fix this?
You need to send an array as sol so in Postman you should change sol with sol[0], sol[1], etc.. Then use this:
if (req.body.sol){
query.solutions = {"tags" : {$in: req.body.sol}}
}
Without the [] because req.body.sol is an array yet.
I have implemented a simple query build for nested objects:
const checkObject = (object) => {
let key;
const status = Object.entries(object).some(([objectKey, objectValue]) => {
if (typeof objectValue === "object" && objectValue !== null) {
key = objectKey;
return true;
}
return false;
});
return { status, key };
};
const queryBuilder = (input) => {
// Array verification not implemented
let output = {};
_.each(input, (value, key) => {
if (typeof value === "object" && value !== null) {
_.each(value, (nestedValue, nestedKey) => {
output[`${[key, nestedKey].join(".")}`] = nestedValue;
});
} else {
output[key] = value;
}
});
const cacheCheckObject = checkObject(output);
if (cacheCheckObject.status)
return { ..._.omit(output, cacheCheckObject.key), ...queryBuilder(output) };
return output;
};
I have not implemented array, but with some small work you can do it work. The same for Mongo operators. The complete example can be seen on Gist.

Categories

Resources