Javascript JSON file filter with object as a parameter

Question

I'm a newbie in Javascript and I'm trying to understand the destructuring approach also with object literals. So what I'm trying to do is to create a function which has two types of arguments: 1. It's a JSON data file which I want to iterate. 2. An object literal with a random value assigned. So I'm trying to iterate with this object value passed as a parameter and filter with the data from the JSON file with an if statement inside the array of objects iterator. And add to arr all the object which match. Thanks everyone in advance.

Array of objects:

[
  { "id": 44, "hours": 100,"finished": false },
  { "id": 22, "hours": 80,"finished": false },
  { "id": 65, "hours": 34,"finished": false },
  { "id": 1098, "hours": 21,"finished": true  },
  { "id": 2, "hours": 67,"finished": false },
  { "id": 765, "hours": 32,"finished": false },
  { "id": 223, "hours": 555,"finished": false },
  { "id": 986, "hours": 2,"finished": false }
]

main.js

const data = require('./example.json')

function dataFilter (items, {id: _id, hours: _hours, finished: _finished}) {

for (let i = 0; i < items.length; i++) {
    let arr = [];
    if (items[i].id === _id) {
        arr.push(items[i])
    }
    else if (items[i].hours >= _hours){
        arr.push(items[i])
    }
    else if (items[i].finished === finished){
        arr.push(items[i])
    }
    return arr;
  }
}

console.log(dataFilter(data,{ id: 65 }));
console.log(dataFilter(data,{ hours: 30 }));

Where you have auto, shouldn't be finished?? In the else if statement — mindmaster, Feb 23 '19 at 16:43
But i didn't understand yet what are you trying to achieve... — mindmaster, Feb 23 '19 at 16:47
"JSON data file": although your read data from a JSON file, the function parameter is not expecting JSON at all: it expects a JavaScript array. — trincot, Feb 23 '19 at 16:48
I don't understand what you are asking. What's wrong with the code you have now? — Madara's Ghost, Feb 23 '19 at 16:52
@trincot you mean that this is not the way to iterate through an array of objects? — Kaiser91, Feb 23 '19 at 16:54
@PUPU, no I mean your question is stating something that is not true. It says that the first argument is a JSON file, but that is not what you are doing. It is a comment about how you name things. JSON file is not the same thing as a JavaScript object. — trincot, Feb 23 '19 at 16:55
@MadaraUchiha trying to add to **arr** all the objects which match with the function calling parameters — Kaiser91, Feb 23 '19 at 16:55

Dimitri Kopriwa · Accepted Answer · 2019-02-25T14:20:22.100

You don't need destructuring, what you need is array filter.

You also forgot to set a default {} so you can access undefined keys:

https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/filter

const data = [
  { "id": 44, "hours": 100,"finished": false },
  { "id": 22, "hours": 80,"finished": false },
  { "id": 65, "hours": 34,"finished": false },
  { "id": 1098, "hours": 21,"finished": true  },
  { "id": 2, "hours": 67,"finished": false },
  { "id": 765, "hours": 32,"finished": false },
  { "id": 223, "hours": 555,"finished": false },
  { "id": 986, "hours": 2,"finished": false },
  { "id": 1986, "hours": 30,"finished": false },
];

function dataFilter (items, {id: _id, hours: _hours, finished: _finished} = {}) {
  return items.filter((item) => item.id === _id || item.hours >= _hours || item.finished === _finished);
}

document.getElementById('results').innerHTML = `
<pre>
ID: 65
${JSON.stringify(dataFilter(data,{ id: 65 }), null, 2)}
  
HOURS: 30
${JSON.stringify(dataFilter(data,{ hours: 30 }), null, 2)}
</pre>
`

<div id="results"></div>

Approach with multiple filters

It is also possible to use more than one filter at once:

const data = [
  { "id": 44, "hours": 100,"finished": false },
  { "id": 22, "hours": 80,"finished": false },
  { "id": 65, "hours": 34,"finished": false },
  { "id": 1098, "hours": 21,"finished": true  },
  { "id": 2, "hours": 67,"finished": false },
  { "id": 765, "hours": 32,"finished": false },
  { "id": 223, "hours": 555,"finished": false },
  { "id": 986, "hours": 2,"finished": false },
  { "id": 1986, "hours": 30,"finished": false },
];

function dataFilter (items, filters = {}) {
  // this will create a list of function on the fly for every `filters` you pass.
  const fnList = Object.keys(filters)
    .map((key) => (list) => list.filter((item) => item[key] === filters[key]));
    
  let res = [...items];
  while (cursor = fnList.shift()) {
    res = cursor(res);
  }
  return res;
}

document.getElementById('results').innerHTML = `
<pre>
ID: 44, HOURS: 100
${JSON.stringify(dataFilter(data,{ id: 44, hours: 100 }), null, 2)}
  
ID: 2, HOURS: 67
${JSON.stringify(dataFilter(data,{ id: 2 }), null, 2)}
</pre>
`

<div id="results"></div>

If you want to specify the operators used for the comparaison, use a fonction as explained here: Are Variable Operators Possible?

Thx, this approach looks cool, but I was trying to pass e.g 3 values as a parameter _{id: 45, hours: 10, finished: true}_ so the result will be just the objects which match with those parameters. — Kaiser91, Feb 23 '19 at 17:17

score 0 · Answer 2 · answered Feb 23 '19 at 16:54

Looks like you want to be able to filter the data by any combination of the three items in that object.

function filterFactory({id, hours, finished}) {
  return function filter(item) {
    let isGoodValue = false;
    if (id !== undefined && item.id === id) isGoodValue = true;

    // for the second and third checks we'll short-circuit if it already
    // passed an earlier check
    if (!isGoodValue && hours !== undefined && item.hours >= hours) isGoodValue = true;
    if (!isGoodValue && finished !== undefined && item.finished === finished) isGoodValue = true;
    return isGoodValue;
  };
}

data.filter(filterFactory({id: 2}));

Note that we're using the native filter method on arrays. filterFactory is a factory that makes callbacks to pass to filter based on one or more of the three factors you're filtering on.

Javascript JSON file filter with object as a parameter

2 Answers2

Approach with multiple filters