Leverage a dictionary to refine and organize JavaScript data objects

Question

Leverage a dictionary to refine and organize JavaScript data objects

If I have a specific filter set up like this:

filter = [ {key: "pl", value: 3}, {key: "sh", value: 2} ]

I am looking to use this filter to search through the following JavaScript object:

var data = [
{title: "The Uncertainty of the Poet ",
pl: 3,
si: 2,
va: 3,
te: 0,
co: 0,
or: 4,
sh: 2,
po: 0,
li: 0,
ar: 5
},
{
title: "Direction",
pl: 4,
si: 3,
va: 1,
te: 3,
co: 0,
or: 3,
sh: 2,
po: 0,
li: 0,
ar: 5
}
...
]

I attempted the following code but it did not work as expected:

var result = data.filter(function(d){
            for (item in filter) {
                return d.key==d.value;
            }

javascript dictionary filter

Answer 1

Answer №1

Here's an alternative method to verify if the object satisfies all requirements:

data.filter(function(obj) {
    return filter.reduce(function(a, f) {
        return a && (obj[f.key] === f.value);
    }, true);
});

This approach eliminates the need to check for hasOwnProperty due to the implementation of reduce. To verify if any of the filter conditions are met, you can modify it as follows:

data.filter(function(obj) {
    return filter.reduce(function(a, f) {
        return a || (obj[f.key] === f.value);
    }, false);
});

Answer 2

Here's an alternative method to verify if the object satisfies all requirements:

data.filter(function(obj) {
    return filter.reduce(function(a, f) {
        return a && (obj[f.key] === f.value);
    }, true);
});

This approach eliminates the need to check for hasOwnProperty due to the implementation of reduce. To verify if any of the filter conditions are met, you can modify it as follows:

data.filter(function(obj) {
    return filter.reduce(function(a, f) {
        return a || (obj[f.key] === f.value);
    }, false);
});

Answer 3

Answer №2

You may also accomplish this in the following manner:

let filters = [{key: "pl", value: 3}, {key: "sh", value: 2}]

let data = [
    {
        title: "The Mystery of the Poet ",
        pl: 2,
        si: 2,
        va: 3,
        te: 0,
        co: 0,
        or: 4,
        sh: 3,
        po: 0,
        li: 0,
        ar: 5
    },
    {
        title: "Path",
        pl: 3,
        si: 3,
        va: 1,
        te: 3,
        co: 0,
        or: 3,
        sh: 2,
        po: 0,
        li: 0,
        ar: 5
    }
]

let result = data.filter((item) => {
  for(let i = 0; i < filters.length; ++i) {
    let filter = filters[i];

    if(item[filter.key] && item[filter.key] === filter.value) {
      return true;
    }
  }

  return false;
});

Answer 4

You may also accomplish this in the following manner:

let filters = [{key: "pl", value: 3}, {key: "sh", value: 2}]

let data = [
    {
        title: "The Mystery of the Poet ",
        pl: 2,
        si: 2,
        va: 3,
        te: 0,
        co: 0,
        or: 4,
        sh: 3,
        po: 0,
        li: 0,
        ar: 5
    },
    {
        title: "Path",
        pl: 3,
        si: 3,
        va: 1,
        te: 3,
        co: 0,
        or: 3,
        sh: 2,
        po: 0,
        li: 0,
        ar: 5
    }
]

let result = data.filter((item) => {
  for(let i = 0; i < filters.length; ++i) {
    let filter = filters[i];

    if(item[filter.key] && item[filter.key] === filter.value) {
      return true;
    }
  }

  return false;
});

Answer 5

Answer №3

If you're looking to match either of the specified values, this solution should do the trick:

criteria = [ {key: "pl", value: 3}, {key: "sh", value: 2} ]

var result = data.filter(function(item) {
    return item.pl === criteria[0]['value'] || item.sh === criteria[1]['value']
})

To prevent any confusion, I've renamed the array as criteria.

Answer 6

If you're looking to match either of the specified values, this solution should do the trick:

criteria = [ {key: "pl", value: 3}, {key: "sh", value: 2} ]

var result = data.filter(function(item) {
    return item.pl === criteria[0]['value'] || item.sh === criteria[1]['value']
})

To prevent any confusion, I've renamed the array as criteria.

Answer 7

Answer №4

To enhance your for in loop, you need to delve deeper into working with each individual object within the array.

Consider utilizing Array#every() to ensure that every object in the filter array corresponds to a match in the data object.

// Filtering main data
var result = data.filter(function(dataObj){
   // Verify if all properties within the filter array have a matching value
   return filter.every(function(filterObj){
      // Compare the value of property found in filterObject with corresponding value 
      return dataObj[filterObj.key] === filterObj.value
   })
})

console.log(result)

<script>
var filter = [ {key: "pl", value: 2}, {key: "sh", value: 3} ]

var data = [{
    title: "The Uncertainty of the Poet ",
    pl: 2,
    si: 2,
    va: 3,
    te: 0,
    co: 0,
    or: 4,
    sh: 3,
    po: 0,
    li: 0,
    ar: 5
  },
  {
    title: "Direction",
    pl: 4,
    si: 3,
    va: 1,
    te: 3,
    co: 0,
    or: 3,
    sh: 2,
    po: 0,
    li: 0,
    ar: 5
  }
 
]
</script>

Answer 8

To enhance your for in loop, you need to delve deeper into working with each individual object within the array.

Consider utilizing Array#every() to ensure that every object in the filter array corresponds to a match in the data object.

// Filtering main data
var result = data.filter(function(dataObj){
   // Verify if all properties within the filter array have a matching value
   return filter.every(function(filterObj){
      // Compare the value of property found in filterObject with corresponding value 
      return dataObj[filterObj.key] === filterObj.value
   })
})

console.log(result)

<script>
var filter = [ {key: "pl", value: 2}, {key: "sh", value: 3} ]

var data = [{
    title: "The Uncertainty of the Poet ",
    pl: 2,
    si: 2,
    va: 3,
    te: 0,
    co: 0,
    or: 4,
    sh: 3,
    po: 0,
    li: 0,
    ar: 5
  },
  {
    title: "Direction",
    pl: 4,
    si: 3,
    va: 1,
    te: 3,
    co: 0,
    or: 3,
    sh: 2,
    po: 0,
    li: 0,
    ar: 5
  }
 
]
</script>

Leverage a dictionary to refine and organize JavaScript data objects

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The Serialization problem in next.js when using getStaticProps

Retrieve the string value from a JSON object beginning at a designated position

JavaScript Sort function malfunctioning and not correctly sorting

Node JS fails to return body content in POST request

Adding a Table Row in jQuery without Appending it to the Bottom of the Table

Importing JavaScript files to work with Vue-Router: A Step-by-Step Guide

When attempting to store data in localstorage using React Hooks useState, an error occurs regarding mapping the array, resulting in a rendering issue where everything appears inverted. This

The DiscordAPIError occurred due to the incorrect placement of required options in the form body. In order to resolve this issue, ensure that required

Creating a function that writes to a file by utilizing the data input from

Duplicate the Date object without retaining previous data

Why is jQuery button function only functioning for the first button?

Is it possible to retrieve duplicate objects within the same array?

JavaScript is reporting that the length of the array is not defined, rather than the array itself

Error connecting to the network: apisauce

When trying to pass 3 parameters from an Angular frontend to a C# MVC backend, I noticed that the server side was receiving null

Tips for utilizing Vue 'component' with just Vue added as a page add-on using <script>:

Tips for creating a validation section in a CRUD application using React.js

The output of JSTree's data.rslt.obj.text() function is an array of text values, not just the text from the specified node

Leveraging the Meteor Framework for Application Monitoring

Different ways to notify a React/Next.js page that Dark Mode has been switched?