Javascript Filter Non-Array JSON Object

Question

I am trying to filter non-array JSON object as the following snippet

const filter = { filterRows: ['one'] };

const templateMapper = {
  'one': {
    title: 'one',
  },
  'two': {
    title: 'two',
  },
  'three': {
    title: 'three',
  },
}

const filterDialogView = filter.filterRows;
const filterTemplateMapper = [templateMapper].filter(row => !filterDialogView.includes(row));
console.log(filterTemplateMapper);

But it's not filtering

I am getting following output

[
  {
    "one": {
    "title": "one"
  },
  "two": {
    "title": "two"
  },
  "three": {
    "title": "three"
  }
 }
]

Desire output

 {
  "two": {
    "title": "two"
  },
  "three": {
    "title": "three"
  }
 }

I want to filter row based on filterRows for example if filterRows contain one as above JSON then one should be removed from the templateMapper

where's the JSON? all I see is an object ... and objects can't be filtered using Array.filter because objects don't have filter method — Jaromanda X
– Jaromanda X, Commented May 21, 2019 at 5:56
i am using [templateMapper] see the above code i used [] arrays — user11229655
– user11229655, Commented May 21, 2019 at 5:57

Code Maniac · Accepted Answer · 2019-05-21 06:20:31Z

4

You can use Object.fromEntries to build object back from filtered entries

Here idea is:-

First get the entries from template object
Filter the entries based on filter value
Use Object.fromEntries to build object from filtered entries

const filter = { filterRows: ['one'] };

const template = {'one': {title: 'one',},'two': {title: 'two',},'three': {title: 'three',}}

const filterDialogView = filter.filterRows;
const final = Object.entries(template).filter(([row])=> !filterDialogView.includes(row))
console.log(Object.fromEntries(final));

If you environment doesn't support Object.fromEntries you can use this

const filter = { filterRows: ['one'] };

const template = {'one': {title: 'one',},'two': {title: 'two',},'three': {title: 'three',}}

const filterDialogView = filter.filterRows;
const final = Object.entries(template).filter(([row])=> !filterDialogView.includes(row))

const output = final.reduce((op,[key,value])=>{
  op[key] = value
  return op
},{})
console.log(output);

edited May 21, 2019 at 6:20

answered May 21, 2019 at 5:59

Code Maniac

37.9k5 gold badges44 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Jaromanda X Over a year ago

This is the best answer (I was going to post identical code) - I'd add some remarks about Object.fromEntries too

Code Maniac Over a year ago

@JaromandaX thanks mate :) i have added some description about code and related link,

user11229655 Over a year ago

@CodeManiac i am getting this error Object.fromEntries is not a function in Node.JS

Code Maniac Over a year ago

@user11229655 which version of node you're using mate ?

user11229655 Over a year ago

@CodeManiac i tried in REPL.it node ver seems issue with v10.15.2 . also tried in react its working fine thanks

|

adiga · Accepted Answer · 2019-05-21 05:59:21Z

2

You could filter the entries of the object first. Then use Object.fromEntries() to create a new object from those filtered entries.

const filter = { filterRows: ['one'] };

const templateMapper = {
  'one': {
    title: 'one',
  },
  'two': {
    title: 'two',
  },
  'three': {
    title: 'three',
  },
}

const filteredObject = Object.fromEntries(
    Object.entries(templateMapper).filter(([k]) => !filter.filterRows.includes(k))
)

console.log(filteredObject)

answered May 21, 2019 at 5:59

adiga

35.4k9 gold badges65 silver badges88 bronze badges

Comments

CertainPerformance · Accepted Answer · 2019-05-21 05:57:46Z

1

One option is to create a copy of the templateMapper object, then iterate through the filterRows and delete each associated key:

const filter = {
  filterRows: ['one']
};

const templateMapper = {
  'one': {
    title: 'one',
  },
  'two': {
    title: 'two',
  },
  'three': {
    title: 'three',
  },
};


const filterTemplateMapper = { ...templateMapper };
filter.filterRows.forEach((key) => {
  delete filterTemplateMapper[key];
});
console.log(filterTemplateMapper);

(also, as comment notes, There's no such thing as a "JSON Object")

answered May 21, 2019 at 5:57

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

2 Comments

Soviut Over a year ago

This mutates the object rather than creating a new one, which is different from how the filter method works.

CertainPerformance Over a year ago

It does not mutate the original object - the { ...templateMapper } creates a copy.

Maheer Ali · Accepted Answer · 2019-05-21 06:10:43Z

You can filter() objects. You should filter() the entries of object and then convert it to object again using Object.fromEntries()

const filter = { filterRows: ['one'] };

const templateMapper = { 'one': { title: 'one', }, 'two': { title: 'two', }, 'three': { title: 'three', }, }

const filterDialogView = filter.filterRows;
const filterTemplateMapper = Object.fromEntries(
             Object.entries(templateMapper)
                   .filter(row => !filterDialogView.includes(row[0].title))
             );
console.log(filterTemplateMapper);

If Object.fromEntries() is not supported by your browser then use reduce()

const filter = { filterRows: ['one'] };

const templateMapper = { 'one': { title: 'one', }, 'two': { title: 'two', }, 'three': { title: 'three', }, }

const filterDialogView = filter.filterRows;
const filterTemplateMapper = Object.entries(templateMapper)
                   .filter(row =>!filterDialogView.includes(row[0].title))
                   .reduce((ac,[k,v]) => (ac[k] = v,ac),{});
console.log(filterTemplateMapper);

Scofjeld · Accepted Answer · 2019-05-21 06:35:37Z

0

You can use this way:

const filter = { filterRows: ['one'] };

const templateMapper = {
  'one': {
    title: 'one',
  },
  'two': {
    title: 'two',
  },
  'three': {
    title: 'three',
  },
}

// Convert object templateMapper to array with key
const keyArrayTemplateMapper = Object.keys(templateMapper);

// Filter key array
const filterKey = keyArrayTemplateMapper.filter(key => !filter.filterRows.includes(key));

// Using reduce method to return new array
const output = filterKey.reduce((obj, key) => {
    obj[key] = templateMapper[key];
    return obj;
  }, {});

console.log(output);

edited May 21, 2019 at 6:35

answered May 21, 2019 at 6:06

Scofjeld

2724 silver badges15 bronze badges

4 Comments

Maheer Ali Over a year ago

All the answers here are downvoted except one. Try adding explanation of the code.

Code Maniac Over a year ago

I don't see anything wrong with your code, only thing missing is some explanation mate, it is considered as good practice to add explanation to your answer as these will help future readers

Scofjeld Over a year ago

I get it, added some explanation. Thank you guys.

Code Maniac Over a year ago

@Scofield you can make your code as executable code snippet read here, and here comes your rewards for well detailed answer

brk · Accepted Answer · 2019-05-21 06:02:08Z

-1

Instead of modifying the original object create a copy of it and delete the unwanted keys. For delete you can use delete keyword. Iterated the filterRows array and then use delete to remove the keys from the copied object

const filter = {
  filterRows: ['one']
};

const templateMapper = {
  'one': {
    title: 'one',
  },
  'two': {
    title: 'two',
  },
  'three': {
    title: 'three'
  },
}


let newObj = JSON.parse(JSON.stringify(templateMapper));
filter.filterRows.forEach(function(item) {
  if (newObj.hasOwnProperty(item)) {
    delete newObj[item]
  }
});
console.log(newObj)

answered May 21, 2019 at 6:02

brk

50.3k10 gold badges59 silver badges85 bronze badges

Comments

Soviut · Accepted Answer · 2019-05-21 06:05:34Z

The filter() function is only available on arrays. In order to get the same behaviour with an object, you need to use the object's entries().

const filter = {
  filterRows: ['one']
}

const templateMapper = {
  'one': {
    title: 'one',
  },
  'two': {
    title: 'two',
  },
  'three': {
    title: 'three',
  },
}

const filteredMapper = Object.entries(templateMapper).reduce((acc, [key, value]) => {
  // if the key is not in the filtered list, add this entry to the object
  if (!filter.filterRows.includes(key)) {
    acc[key] = value
  }

  return acc
}, {}) // pass in empty object as initial value of accumulator

console.log(filteredMapper)

The way this works is we first get the entries (key/value pairs) from templateMapper. We then take those entries and reduce them. A reduce takes several arguments including an "accumulator" which is what collects the fields we want to keep. We "destructure" key and value so that we can check if the key is in the filter list. If it is not going to be filtered, we add it ot the accumulator. We then return the accumulator for the next iteration of the reduce. Finally, we pass in an empty object as the initial value for the accumulator on the first iteration.

Collectives™ on Stack Overflow

Javascript Filter Non-Array JSON Object

7 Answers 7

7 Comments

Comments

2 Comments

Comments

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

7 Comments

Comments

2 Comments

Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related