Where to iterate through JSON object

Question

I'm building something with Angular and using redux .

My json object has objects that have certain values. Lets pretend:

name: "john",
sex: "m"
children: [
  {
  name: "joe",
  sex: "m"
  children: [
    {
    name: "mary",
    sex: "f"
    children: [
      {
      name: "ryan",
      sex: "m"
      children: []
      }
    ]
    }
  ]
],
name: "sue",
sex: "f"
children: [
  {
  name: "joe",
  sex: "m"
  children: [
    {
    name: "mary",
    sex: "f"
    children: [
      {
      name: "ryan",
      sex: "m"
      children: []
      }
    ]
    }
  ]
]

Lets say I want to:

1. count the amount of total children and grandchildren that john has.
2. count the number of grandchildren that john has.

Well then:

3. Where would I write the function for this when using Angular/Redux? Would I do it before I get my state? After I make my API call and get my state? In the reducer? In the component?
4. What is the fastest/best way to iterate and get those 2 counts that I wanted? Because I know Angular has some built in things, would it have any faster way to do this? Or through plain JS?

And last point:

5. Lets say I have some sibling component (john's wife, sue) that will be using this similar count or information. If I want to keep my code DRY, where should I be making these count functions?

Do I use my state from before if some information count is going to be different? Lets say this is only counting female children/granddaughters. And john's is for male children/grandsons.

Or should I be making two slice of state for these (m & f) and working off those?

File Structure:
app
 |store
   |actions
   |models
   |reducers
   |effects
 |views
   |john
     |.html
     |.ts
   |sue
     |.html
     |.ts
 |app.ts etc

Answer 1

I think a lot of your points can be answered by using selectors .

https://ngrx.io/guide/store/selectors

1.) You can make many selectors. Maybe you can make a selector that takes the input of the name (string) and can give you the number of children it has. And another selector that gives you the number of grandchildren this name has. You can then combine it in your component. Maybe you can make one selector that counts both of them. It's up to you.

2.) Answered in 1.

3.) You would write it as a selector in maybe selectors.ts inside of the store folder and can then pass these selector functions in the select argument of the store.

4.) The fastest and best way will be through using plain JS or a JS library like lodash. Angular has a lot of stuff built in but it is a UI/View library, not a make common JavaScript operations faster library.

5.) I would have one slice of state and like mentioned previously using selector functions to transform the state into the data I am interested in.