How to filter JSON Object (JavaScript)

Question

I am trying to filter the below JSON object and return an array of objects where the value within the key of 'markdown' contains say "steve" - to do this I suspect I need to convert the object to an array then filter.

I have tried using Object.entries

Object.entries(diagnosisData).filter(item => item === 'steve')

as well as JSON.parse but think I am barking up the wrong tree.

I'd like to return say:

result = [
  {
    "id": "stevey",
    "markdown": "STEVEY",
    "source": null
  },
  {
    "id": "steven",
    "markdown": "STEVEN",
    "source": null
  }
]

Could anyone offer a pointer for me?

Many thanks

JSONdata = {
  "steven": {
    "id": "steven",
    "markdown": "STEVEN",
    "source": null
  },
  "john": {
    "id": "johnA",
    "markdown": "JOHNA",
    "source": null
  },
  "henry": {
    "id": "henryP",
    "markdown": "HENRYP",
    "source": null
  },
  "stevel": {
    "id": "steveL",
    "markdown": "STEVEL",
    "source": null
  }
}

I think your JSONData should rather be an array of objects, or at least that your list of people should be all in an array. there's no point having properties named after their content... — Laurent S.
– Laurent S., Commented Apr 15, 2020 at 13:02

CherryDT · Accepted Answer · 2020-04-15 13:04:53Z

6

You are almost there with your Object.entries(...).filter approach. However, I'm not sure what you want to filter by - the keys, the id values or the markdown values?

To avoid confusion, let's say you have an object like this instead:

const data = {
  keyA: {
    id: 'idA',
    markdown: 'markdownA'
  },
  keyB: {
    id: 'idB',
    markdown: 'markdownB'
  }
}

Then, just for reference, the Object.XX functions yield these results:

console.log(Object.keys(data))
// ['keyA', 'keyB']

console.log(Object.values(data))
// [
//   {id: 'idA', markdown: 'markdownA'},
//   {id: 'idB', markdown: 'markdownB'}
// ]

console.log(Object.entries(data))
// [
//   ['keyA', {id: 'idA', markdown: 'markdownA'}],
//   ['keyB', {id: 'idB', markdown: 'markdownB'}]
// ]

So:

To filter by the key, there is no filter needed at all as long as it's a perfect match your are looking for:

const result = data.keyA
console.log(result) // {id: 'idA', markdown: 'markdownA'}

If needed a non-exact match though, say for example all keys ending with A, you can use Object.entries(...).filter (and then map to the value):

const result = Object.entries(data)
  .filter(([key, value]) => key.endsWith('A'))
  .map(([key, value]) => value)
console.log(result) // [{id: 'idA', markdown: 'markdownA'}]

To filter by one of the properties (id or markdown), you could use Object.entries(...).filter, but since you are then not even interested in the key, you could use Object.values(...).filter instead:

const result = Object.values(data).filter(item => item.id === 'keyA')
console.log(result) // [{id: 'idA', markdown: 'markdownA'}]

answered Apr 15, 2020 at 13:04

CherryDT

29.4k5 gold badges56 silver badges86 bronze badges

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

5 Comments

Chris Phillips Over a year ago

Very helpful thank you - I amended the question to show the result I was looking for - am looking through the keys (seems like Object.values) is the way to go...

CherryDT Over a year ago

OK but are you searching in id or in markdown? That's still not clear to me. And by what criteria? Substring match? Start of string? End of string? Is it case-sensitive or not?

CherryDT Over a year ago

Just guessing: To search in both id and markdown, matching start of string case-insensitively, you could use

Object.values(JSONObject).filter(item => item.id.toUpperCase().startsWith('STEVE') || item.markdown.toUpperCase().startsWith('STEVE'))

Chris Phillips Over a year ago

Sorry to clarify - I am looking through markdown - and wanting to return an array of objects that contain the string - eg 'steve'

CherryDT Over a year ago

then all you need is Object.values(JSONObject).filter(item => item.markdown.includes('STEVE'))

StepUp · Accepted Answer · 2020-04-15 13:41:01Z

Try to use Object.entries:

let filterKey = 'steve';
const result = Object.entries(JSONdata).filter(([k, v]) => k== filterKey);

and then Object.fromEntries() to create an object from a list of key-value pairs:

Object.fromEntries(result)

An example:

let JSONdata = {
   "steve": {
     "id": "steve",
     "markdown": "STEVE",
     "source": null
   },
   "john": {
     "id": "john",
     "markdown": "JOHN",
     "source": null
   },
   "henry": {
     "id": "henry",
     "markdown": "HENRY",
     "source": null
   },
 };

 let filterKey = 'steve';
 const result = Object.entries(JSONdata).filter(([k, v]) => k == filterKey);
 console.log(Object.fromEntries(result))

UPDATE:

You can use startsWith method to get desired result:

const result = Object.values(JSONdata).filter((v) => 
     v.id.startsWith(filterKey));

An example:

let JSONdata = {
   "steveN": {
     "id": "steven",
     "markdown": "STEVEN",
     "source": null
   },
   "john": {
     "id": "johnA",
     "markdown": "JOHNA",
     "source": null
   },
   "henry": {
     "id": "henryP",
     "markdown": "HENRYP",
     "source": null
   },
   "steveL": {
     "id": "steveL",
     "markdown": "STEVEL",
     "source": null
   }
 }

 let filterKey = 'steve';
 const result = Object.values(JSONdata).filter((v) => 
     v.id.startsWith(filterKey));
 console.log(result)

Simon · Accepted Answer · 2020-04-15 12:58:48Z

0

One way to do it is: Object.values(JSONdata).filter(o => o.id === 'steve')

Or if you do not have the is and want to do it by key:

const key = Object.keys(JSONdata).filter(o => o === 'steve');

console.log(JSONdata[key]);

answered Apr 15, 2020 at 12:58

Simon

6,5308 gold badges55 silver badges110 bronze badges

3 Comments

Niet the Dark Absol Over a year ago

const key = 'steve' would be... way easier.

Simon Over a year ago

yes of course, but depending of the needs 'steve' could be a variable

Chris Phillips Over a year ago

yeah 'steve' is just a variable.

Collectives™ on Stack Overflow

How to filter JSON Object (JavaScript)

3 Answers 3

5 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related