How do I filter through an array of object and retain the object key name?

Question

I have some JSON data where I am attempting to filter out JSON objects that do not have a specific property.

I am able to use a filter function from Underscore.JS to successfully filter out the objects that do not have the correct property.

However, when the filter function runs, it is stripping out the key name of the object.

Here is the JSON that is used in the variable data in the filter function below:

{
    "Presentations": {
        "Instant": false,
        "Daily": false,
        "WeeklySummary": false,
        "ContentTypeId": 5
    },
    "Articles": {
        "Instant": true,
        "Daily": false,
        "WeeklySummary": true,
        "ContentTypeId": 1
    },
    "Blogs": {
        "Instant": true,
        "Daily": false,
        "WeeklySummary": true,
        "ContentTypeId": 61
    },
    "NewsBriefs": {
        "Instant": false,
        "Daily": false,
        "WeeklySummary": false,
        "ContentTypeId": 2
    },
    "SpecialInsights": {
        "Instant": false,
        "Daily": false,
        "WeeklySummary": false,
        "ContentTypeId": 50
    },
    "UserSelected": {
        "Frequency": null,
        "Value": false,
        "ContentTypeId": 0
    }
}

Here is the JavaScript filter function that is returning an array of objects that must include a property of 'Instant'

newArr = _.filter(data, function(obj){
              return obj.hasOwnProperty('Instant')
          });

If I console.log the newArr, here is what I get:

[
   {
      "Instant":false,
      "Daily":false,
      "WeeklySummary":false,
      "ContentTypeId":5
   },
   {
      "Instant":true,
      "Daily":false,
      "WeeklySummary":true,
      "ContentTypeId":1
   },
   {
      "Instant":true,
      "Daily":false,
      "WeeklySummary":true,
      "ContentTypeId":61
   },
   {
      "Instant":false,
      "Daily":false,
      "WeeklySummary":false,
      "ContentTypeId":2
   },
   {
      "Instant":false,
      "Daily":false,
      "WeeklySummary":false,
      "ContentTypeId":50
   }
]

As you can see, it is correctly filtering out objects that do not have the Instant property which in this case is the UserSelected object.

However, in that process I am losing the Object key names like Presentations and Articles.

How do I retain these key names when filtering the JSON data?

Hi, yes I can add if you would like. The output will be the same as newArr but we retain those key names like in the original JSON. I just didn't want to add repetitive code and muddy the question. — SBT23434
– SBT23434, Commented Sep 23, 2019 at 16:07

grokked · Accepted Answer · 2019-09-23 16:54:53Z

4

you can do it without any library:

Object.entries(data).filter(([key, value]) => {
  return value.hasOwnProperty('Instant')
}).reduce((acc, [key, value]) => {
  return { ...acc, [key]: value }
}, {})

what you did wrong was that you only kept the value while iterating over the dictionary, but never carried over the keys. You can also use the new fromEntries I guess, but it works the same way

edited Sep 23, 2019 at 16:54

answered Sep 23, 2019 at 16:05

grokked

4212 silver badges8 bronze badges

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

6 Comments

Andreas Over a year ago

You don't need the .filter() call:

Object.keys(data).reduce((result, current) => { if (current.hasOwnProperty("Instant")) { result[current] = Object.assign({}, input[current]); } return result; }, {})

SBT23434 Over a year ago

@grokked Hi, so when I run your code, the first Object seems to have an issue where the key for "Presentations" is put into an Object with key name of "0" and it's values are put into another object with the key name of "1". The rest of the objects look correct and the UserSelected object is indeed filtered. Any idea why the first Object "Presentations" is being split like that?

grokked Over a year ago

i made a mistake in the code, forgot to add the empty object as the second argument in the reduce function

grokked Over a year ago

@Andreas you are right, but your code does not work, you should either use data[current].hasOwnProperty("Instant") or Object.entries

Andreas Over a year ago

@grokked You're absolutely right. Looks like I've mixed two solutions... The correct version:

Object.keys(data).reduce((result, current) => { if (data[current].hasOwnProperty("Instant")) { result[current] = Object.assign({}, data[current]); } return result; }, {})

|

Collectives™ on Stack Overflow

How do I filter through an array of object and retain the object key name?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related