Using Typescript to iterate through nested interface data with the `forEach()` method

Question

Using Typescript to iterate through nested interface data with the `forEach()` method

CountTargetsData serves as an interface for parsing JSON data with multiple levels of nesting, as illustrated below.

interface CountTargetsData {
  data: {
    [state: string]: {
      [date: string]: {
        [index: string]: { [id: string]: { [targets: string]: number } },
      },
    },
  };
}

const parseCounters = useCallback(
  async (responseDeploymentData: CountTargetsData) => {
    //WANT TO PARSE ID AND TARGETS HERE
  }
);

With the complex nested structure, how can I utilize the forEach() method to extract the id and targets values for each entry in CountTargetsData?

Sample Data:

    "stateA": {
        "2016-06-03": [
            {
                "1200": {
                    "count_targets": 1,
                    "count_targets_excluded": 0,
                    "count_targets_pending": 0,
                    "count_targets_in_progress": 0,
                    "count_targets_completed": 0,
                    "count_targets_failed": 1
                }
            }
        ],
        "2016-06-07": [
            {
                "1455": {
                    "count_targets": 1,
                    "count_targets_excluded": 0,
                    "count_targets_pending": 0,
                    "count_targets_in_progress": 0,
                    "count_targets_completed": 1,
                    "count_targets_failed": 0
                }
            }
        ]
         
    }
}

javascript json typescript parsing foreach

Answer 1

Answer №1

Update

Your provided data does not match the required type structure:

interface CountTargetsData {
  data: {
    [state: string]: {
      [date: string]: ({
        [index: string]: {
          [id: string]: {
            [targets: string]: number
          }
        },
      })[],
    },
  };
}

const data = {
  "stateA": {
    "2016-06-03": [{
      "1200": {
        "count_targets": 1,
        "count_targets_excluded": 0,
        "count_targets_pending": 0,
        "count_targets_in_progress": 0,
        "count_targets_completed": 0,
        "count_targets_failed": 1
      }
    }],
    "2016-06-07": [{
      "1455": {
        "count_targets": 1,
        "count_targets_excluded": 0,
        "count_targets_pending": 0,
        "count_targets_in_progress": 0,
        "count_targets_completed": 1,
        "count_targets_failed": 0
      }
    }]
  }
}

Object.entries(data).forEach(([state, value]) => {
  Object.entries(value).forEach(([date, value]) => {
    value.forEach(obj => {
      Object.entries(obj).forEach(([id, value]) => {
        Object.entries(value).forEach(([target, value]) => {
          console.log(state, date, id, target, value)
        })
      })
    })
  })
})

Old answer

The given nested data requires a different approach than using .forEach directly.

Maybe consider using Object.entries / Object.values first or implementing a for..of loop:

const parseCounters = useCallback(
    async (
      responseDeploymentData: CountTargetsData
    ) => {
      Object.values(responseDeploymentData.data).forEach(state => {
        Object.values(state).forEach(date => {
          // continue logic here
        })
      })
  }

const parseCounters = useCallback(
    async (
      responseDeploymentData: CountTargetsData
    ) => {
      for (const state of responseDeploymentData.data) {
        for (const date of state) {
          // continue logic here
        }
      }
  }

Consider recursion or DFS algorithm for better handling of nested data

Answer 2

Update

Your provided data does not match the required type structure:

interface CountTargetsData {
  data: {
    [state: string]: {
      [date: string]: ({
        [index: string]: {
          [id: string]: {
            [targets: string]: number
          }
        },
      })[],
    },
  };
}

const data = {
  "stateA": {
    "2016-06-03": [{
      "1200": {
        "count_targets": 1,
        "count_targets_excluded": 0,
        "count_targets_pending": 0,
        "count_targets_in_progress": 0,
        "count_targets_completed": 0,
        "count_targets_failed": 1
      }
    }],
    "2016-06-07": [{
      "1455": {
        "count_targets": 1,
        "count_targets_excluded": 0,
        "count_targets_pending": 0,
        "count_targets_in_progress": 0,
        "count_targets_completed": 1,
        "count_targets_failed": 0
      }
    }]
  }
}

Object.entries(data).forEach(([state, value]) => {
  Object.entries(value).forEach(([date, value]) => {
    value.forEach(obj => {
      Object.entries(obj).forEach(([id, value]) => {
        Object.entries(value).forEach(([target, value]) => {
          console.log(state, date, id, target, value)
        })
      })
    })
  })
})

Old answer

The given nested data requires a different approach than using .forEach directly.

Maybe consider using Object.entries / Object.values first or implementing a for..of loop:

const parseCounters = useCallback(
    async (
      responseDeploymentData: CountTargetsData
    ) => {
      Object.values(responseDeploymentData.data).forEach(state => {
        Object.values(state).forEach(date => {
          // continue logic here
        })
      })
  }

const parseCounters = useCallback(
    async (
      responseDeploymentData: CountTargetsData
    ) => {
      for (const state of responseDeploymentData.data) {
        for (const date of state) {
          // continue logic here
        }
      }
  }

Consider recursion or DFS algorithm for better handling of nested data

Using Typescript to iterate through nested interface data with the `forEach()` method

Answer №1

Similar questions

Twitter Bootstrap Dropdown PHP link fails to function

Debating the use of cameras in Three.js

Loading V-Select with Data from JSON Using Vue.js

Relocate the bxslider carousel to the specific div clicked on

Transform percentage into pixels

unable to update database using jquery ajax

Tips for linking the controls of storybook with manual state updates

What issues can trailing white space cause in TypeScript coding?

Error: Uncaught Type Error - Attempted to access property 'then' of an undefined variable. This issue occurred when attempting to use a

Is there a way to transform an HTMLCollection into an array without depleting it of its elements?

What is the best method for incorporating a JSON framework into a project

Angular filtering options based on user input and model selection

Modify HTML tags based on the sum of <li> elements using jQuery

Change the name of the interface from the imported type

What is the process for linking read-only methods to Redux object instances?

Angular 6 - Accessing grandparent methods in grandchild components

The error message "Encountered an issue when trying to access properties of undefined (reading 'getState')" was

A new issue arises after merging in Google Datastore, as an unexpected property is

How I am able to access this.state in React without the need for binding or arrow functions

Tips for downsizing a large image to fit into a smaller area