Searching through a JSON object for nested objects within objects

Question

Searching through a JSON object for nested objects within objects

Currently, I have some data structured as follows:

var items = [
{   "id" : 1,
    "title" : "this",
    "groups" : [
        {"id" : 1,
        "name" : "groupA"},
        {"id" : 2,
        "name" : "groupB"}
    ]
},
{   "id" : 2,
    "title" : "that",
    "groups" : [
        {"id" : 1,
        "name" : "groupA"},
        {"id" : 3,
        "name" : "groupC"}
    ]
},
{   "id" : 3,
    "title" : "other",
    "groups" : [
        {"id" : 3,
        "name" : "groupC"},
        {"id" : 2,
        "name" : "groupB"}
    ]
}]

My goal is to filter this data based on group ids, but I'm encountering issues with accessing them - when trying item.group, the entire object is returned, and other attempts like item.groups.id result in null or undefined values.

I would greatly appreciate any guidance or suggestions on how to achieve this. Essentially, I aim to filter the array to include all items that belong to a specific group.

Thank you!

javascript json

Answer 1

Answer №1

Consider this solution:

groupThreeItems = items.filter(item => item.groups.findIndex(group => group.id==3) > -1)

Answer 2

Consider this solution:

groupThreeItems = items.filter(item => item.groups.findIndex(group => group.id==3) > -1)

Answer 3

Answer №2

Here is an example of how you can achieve this:

var items = [{
  "id": 1,
  "title": "this",
  "groups": [{
    "id": 1,
    "name": "groupA"
  }, {
    "id": 2,
    "name": "groupB"
  }]
}, {
  "id": 2,
  "title": "that",
  "groups": [{
    "id": 1,
    "name": "groupA"
  }, {
    "id": 3,
    "name": "groupC"
  }]
}, {
  "id": 3,
  "title": "other",
  "groups": [{
    "id": 3,
    "name": "groupC"
  }, {
    "id": 2,
    "name": "groupB"
  }]
}]

// Create a function to filter out the matched value
function filterArray(array, val) {
  return array.filter(function(elem) {
    return elem.id === val; // Filter by Id
  })
}

// Filter the original items array and get the object where id is 1
var obj = filterArray(items, 1);
// As the previous result is an array, access the first index with obj[0]. 
// Then, obj[0].groups will be an array again

var filterGroup = filterArray(obj[0].groups,1) // Get an array containing the matched group

Check out the DEMO here.

Answer 4

Here is an example of how you can achieve this:

var items = [{
  "id": 1,
  "title": "this",
  "groups": [{
    "id": 1,
    "name": "groupA"
  }, {
    "id": 2,
    "name": "groupB"
  }]
}, {
  "id": 2,
  "title": "that",
  "groups": [{
    "id": 1,
    "name": "groupA"
  }, {
    "id": 3,
    "name": "groupC"
  }]
}, {
  "id": 3,
  "title": "other",
  "groups": [{
    "id": 3,
    "name": "groupC"
  }, {
    "id": 2,
    "name": "groupB"
  }]
}]

// Create a function to filter out the matched value
function filterArray(array, val) {
  return array.filter(function(elem) {
    return elem.id === val; // Filter by Id
  })
}

// Filter the original items array and get the object where id is 1
var obj = filterArray(items, 1);
// As the previous result is an array, access the first index with obj[0]. 
// Then, obj[0].groups will be an array again

var filterGroup = filterArray(obj[0].groups,1) // Get an array containing the matched group

Check out the DEMO here.

Answer 5

Answer №3

Utilize:

Array.prototype.map to generate a new array by mapping each item in the array to a new object by
duplicating each item using the spread operator* and replacing the groups key with a new array created from the original using
Array.prototype.filter to retain only the objects with the correct id.

*requires a transpiler like babel or typescript though

OR

If you desire to simplify the structure, then you could use Array.prototype.reduce to combine the arrays.

The code provided below gives two results:

one maintains the original structure but filters out the items in the group that do not have an id of 3.
one flattens the structure and displays just one array.

const items = [{
    "id": 1,
    "title": "this",
    "groups": [{
        "id": 1,
        "name": "groupA"
      },
      {
        "id": 2,
        "name": "groupB"
      }
    ]
  },
  {
    "id": 2,
    "title": "that",
    "groups": [{
        "id": 1,
        "name": "groupA"
      },
      {
        "id": 3,
        "name": "groupC"
      }
    ]
  },
  {
    "id": 3,
    "title": "other",
    "groups": [{
        "id": 3,
        "name": "groupC"
      },
      {
        "id": 2,
        "name": "groupB"
      }
    ]
  }
];

const filteredRemovingGroups = items.map(item => ({
   ...item,
   groups: item.groups.filter(subItem => subItem.id === 3)
}));

const filterAndFlatten = items.map(item =>
  item.groups.filter(subItem => subItem.id === 3)
).reduce((combinedArr, arr) => [...combinedArr, ...arr], []) 

console.log('filteredRemovingGroups', filteredRemovingGroups);
console.log('filterAndFlatten', filterAndFlatten);

Answer 6

Utilize:

Array.prototype.map to generate a new array by mapping each item in the array to a new object by
duplicating each item using the spread operator* and replacing the groups key with a new array created from the original using
Array.prototype.filter to retain only the objects with the correct id.

*requires a transpiler like babel or typescript though

OR

If you desire to simplify the structure, then you could use Array.prototype.reduce to combine the arrays.

The code provided below gives two results:

one maintains the original structure but filters out the items in the group that do not have an id of 3.
one flattens the structure and displays just one array.

const items = [{
    "id": 1,
    "title": "this",
    "groups": [{
        "id": 1,
        "name": "groupA"
      },
      {
        "id": 2,
        "name": "groupB"
      }
    ]
  },
  {
    "id": 2,
    "title": "that",
    "groups": [{
        "id": 1,
        "name": "groupA"
      },
      {
        "id": 3,
        "name": "groupC"
      }
    ]
  },
  {
    "id": 3,
    "title": "other",
    "groups": [{
        "id": 3,
        "name": "groupC"
      },
      {
        "id": 2,
        "name": "groupB"
      }
    ]
  }
];

const filteredRemovingGroups = items.map(item => ({
   ...item,
   groups: item.groups.filter(subItem => subItem.id === 3)
}));

const filterAndFlatten = items.map(item =>
  item.groups.filter(subItem => subItem.id === 3)
).reduce((combinedArr, arr) => [...combinedArr, ...arr], []) 

console.log('filteredRemovingGroups', filteredRemovingGroups);
console.log('filterAndFlatten', filterAndFlatten);

Searching through a JSON object for nested objects within objects

Answer №1

Answer №2

Answer №3

Similar questions

Limit DerbyJS to re-rendering specific DOM elements

The video.play() function encountered an unhandled rejection with a (notallowederror) on IOS

Top tips for handling HTML data in JSON format

Create a new element by cloning the React component as an SVG named SomeSVG

Find the sum of every combination of numbers in the array

Utilize ModifyDOM to erase text triggered by selecting a radio button

Finding common elements between two arrays through partial matching

Having trouble with vscode [ctrl+click] on 'vue single-file components' and 'go to definition'? It's not working for me

How do you handle an object of a specific type that can only be determined at runtime?

The problem with utilizing the Node `util.inherits` method

"Error alert: The specified property 'Iscontains' cannot be read because it is undefined" appears in the script for this video

Utilize jQuery to dynamically assign classes to list items within a unordered list based on the length of an array

Performing two API calls using Jquery to fetch distinct dynamic elements within two nested $.each loops

Ways to store information in variables and use it across different blocks in Cypress

Ways to eliminate unnecessary quotation marks surrounding a string in a JSON file using a shell script

What could be the reason for the malfunction of the select (mongoose query)?

Can anyone explain the functionality of passport.initialize() in the context of Node.js and Express

Passing PHP array to JavaScript in a specific format

What is the best way to retrieve an object from a POST request using Angular AJAX calls in a NODEJS environment?

Tips for accessing elements other than the root element using this.$el