I need help filtering an object based on array values. For example:
{
"sun":["sleep","walk"],
"mon":["read","dance","ride"],
"tue":["work","dance","sleep"],
}
If I search for the keyword "sleep," the result should be:
{
"sun":["sleep"],
"tue":["sleep"],
}
Please share any suggestions you may have to accomplish this task. Thank you!
Simply loop through the object and perform the necessary operations. See the functioning code snippet below:
const data = {
"sun": ["sleep", 'walk'],
"mon": ["read", "dance", "ride"],
"tue": ["work", "dance", "sleep"],
}
function filterData(filterValue) {
const output = {};
for (const property in data) {
if (data[property].includes(filterValue)) {
output[property] = [filterValue];
}
}
return output;
}
const filteredResult = filterData('sleep');
console.log(filteredResult);Tools that can assist in resolving this issue:
let obj =
{
"sun": ["sleep", "walk"],
"mon": ["read", "dance", "ride"],
"tue": ["work", "dance", "sleep"],
};
let result = Object.fromEntries(
Object.entries(obj)
.filter(kvpair => kvpair[1].includes('sleep'))
.map(([key, value]) => [key, value.filter(item => item === 'sleep')])
)
console.log(result)
Utilizing Object.keys, map, and includes.
const obj ={
"sun":["sleep","walk"],
"mon":["read","dance","ride"],
"tue":["work","dance","sleep"],
}
let new_obj = {}
let search = 'sleep'
Object.keys(obj).map(key => {
obj[key].includes(search) ? new_obj[key]=[search] : '';
})
console.log(new_obj)
To generate a fresh object, utilize _.transform(). Verify if the array value (v) contains the string (str), and if it does, assign the key with a new array that has the string:
const createNewObj = (object, str) => _.transform(object, (o, v, k) => {
if(v.includes(str)) o[k] = [str]
})
const originalObject = {
"sun":["sleep","walk"],
"mon":["read","dance","ride"],
"tue":["work","dance","sleep"],
}
const modifiedResult = createNewObj(originalObject, 'sleep')
console.log(modifiedResult)<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js" integrity="sha512-90vH1Z83AJY9DmlWa8WkjkV79yfS2n2Oxhsi2dZbIv0nC4E6m5AbH8Nh156kkM7JePmqD6tcZsfad1ueoaovww==" crossorigin="anonymous"></script>I am looking to dynamically update my table using JavaScript every few seconds. Currently, I have set up an AJAX post request to my update.php file and trigger it if it is set. Then, I execute a MySQL query to retrieve the data and store the resultset in ...
Currently, I have been using the following code to switch between images. However, what I actually want to do is change the image when hovering over the title link of the image. onmouseover="this.src='Images/img.png'" onmouseout="this.src=' ...
Looking to develop a Vue.js component that accepts properties from its parent component, like this example: <table-cell :value="foo" format="date" /> Although value and format are set as properties, Vue automatically sets up obse ...
I have a list of tasks that includes both completed and incomplete items. Additionally, I have two buttons - one for deleting an item (which is functional) and the other for marking an item as done or not. I am struggling with creating a function to move ...
Trying to resolve this issue, I adjusted the geoJsonURL to handle a more intricate shape. Despite the new shape allowing the zoom method to function correctly, the shape itself appears completely distorted. Based on the Coordinate system: WGS 84 (EPSG:4326 ...
I seem to be at a standstill when it comes to finding a solution for my mvc.NET / angularjs project. So far, I believe I've done a good job abstracting the view to use a controller that matches the type name of the specific controller.cs class: < ...
It is my belief that the code snippet below: i += 1 or i = i + 1 does not have the same effect as ++i. Am I incorrect in this assumption? Is there an alternative method to achieve pre-increment without utilizing the ++ operator? ...
I've been attempting to loop through the Mui component MenuItem using a forEach loop, but I'm encountering an error stating 'Type 'void' is not assignable to type 'ReactNode''. Here's the section of my code caus ...
Currently, I am delving into JavaScript and jQuery. Here is the code snippet that I am working on: $("#hrefBlur0").hover(function() { $("#imgBlur0").toggleClass("blur frame"); }); $("#hrefBlur1").hover(function() { $("#imgBlur1").toggleClass("blur fra ...
Exploring the creation of a FAQ section with individual carousels for each item. My primary objective is for the carousel to transition to the next chapter when advancing beyond the last slide (backwards navigation would be a future enhancement). I'v ...
Currently, I am working on a grid layout for my website. My goal is to have 9 images load quickly, and then once the page has loaded, I want to fetch additional images, insert them into the image containers, and animate between them. While I understand how ...
Consider this scenario: there is a path that reaches me as /example/123 and I must redirect it to /otherExample/123. My code utilizes next/router, extracting the URL from router.asPath. if(router.asPath == '/example/123') { Router.push(' ...
On my website, I have implemented ajax calls to filter product results and apply effects. However, the effects on these products seem to stop working after the ajax call is completed. Located at the bottom of the page's code is the following script: ...
I am struggling to retrieve the value of the href within the code structure below: <div class=""> <div class=""> <div class=""> <a href=""><img src=""></a> </div> </div> </div> The m ...
I have implemented the following code: var activeFilter = $('<li></li>').data('input-id', 'mycustomId'); $('#container').append(activeFilter); Now, I am faced with the challenge of retrieving a specific ...
index.html#section takes you to a specific section of a webpage. However, I am interested in picking the second tab within a section of the page. I'm uncertain if this can be achieved without relying on JavaScript, but employing the Tab Content Script ...
When working with React, I have found it convenient to pass props down dynamically using the spread operator: function SomeComponent(props) { const {takeOutProp, ...restOfProps} = props; return <div {...restOfProps}/>; } Now, I am curious how I ...
Is it possible to automatically unsubscribe from an http call in an Angular service using the ngOnDestroy hook? Just to note, I am already familiar with using the rxjs 'take' operator or manually unsubscribing from the service within the compone ...
After creating a loop with the setTimeout function, I encountered an issue where it would call itself after the 2nd or 3rd step because it started executing twice simultaneously. Here is how my function looks: var value = 70, intervalID = null; func ...
For the past couple of days, I've been struggling with an Ajax issue that I just can't seem to figure out. Despite looking for a solution online, nothing seems to work. Below is the code snippet that's causing me trouble: <!DOCTYPE html& ...