How to Iterate Over a JSON Object in TypeScript (With Examples)

When I first started working with TypeScript, one of the most common tasks I faced was dealing with JSON data. Whether I was building a dashboard for analyzing US sales data or integrating with a third-party API, I constantly had to read and process JSON objects.

At first, iterating over a JSON object in TypeScript felt a bit tricky—especially when I wanted to keep my code type-safe and clean. But over the years, I’ve picked up some practical techniques that make this process straightforward.

In this tutorial, I’ll walk you through several easy ways to loop through a JSON object in TypeScript. I’ll also share some tips and real-world examples based on my experience.

What is a JSON Object?

Before we dive in, let’s quickly recap what a JSON object is.

A JSON object is simply a collection of key-value pairs, similar to a JavaScript object. In TypeScript, JSON data is often received from APIs, files, or user input. Here’s a quick example:

{
  "state": "California",
  "population": 39538223,
  "capital": "Sacramento"
}

When working with this data in TypeScript, you’ll usually have it as a plain object after parsing.

Check out How to Import JSON Files in TypeScript?

Iterate Over a JSON Object in TypeScript

In real-world TypeScript projects, I often need to:

• Display all properties of a JSON object (like rendering user info on a page)
• Transform or validate data before saving it to a database
• Extract specific values based on keys or conditions

For most requirements, you need to iterate through JSON objects in PowerShell.

Method 1: Using for…in Loop

The simplest way to iterate over a JSON object in TypeScript is by using a for...in loop. This loop allows you to access each key in the object.

Let’s look at an example using a JSON object representing the population of some US states:

const statePopulations = {
  California: 39538223,
  Texas: 29145505,
  Florida: 21538187,
  NewYork: 20201249
};

for (const state in statePopulations) {
  const key = state as keyof typeof statePopulations;
  console.log(`${key}: ${statePopulations[key]}`);
}

You can see the exact output in the screenshot below:

You can also write like the code below:

const statePopulations: { [key: string]: number } = {
  California: 39538223,
  Texas: 29145505,
  Florida: 21538187,
  NewYork: 20201249
};

for (const state in statePopulations) {
  console.log(`${state}: ${statePopulations[state]}`);
}

My Tip:
Always use .hasOwnProperty() to avoid iterating over properties from the prototype chain.

Check out Iterate Over Enums in TypeScript

Method 2: Using Object.keys() with forEach

Another approach I often use is Object.keys(), which returns an array of the object’s keys. You can then use forEach to loop through them.

const statePopulations = {
  California: 39538223,
  Texas: 29145505,
  Florida: 21538187,
  NewYork: 20201249
};

Object.keys(statePopulations).forEach((state) => {
  const key = state as keyof typeof statePopulations;
  console.log(`${key}: ${statePopulations[key]}`);
});

This method is concise and works well when you don’t need to break out of the loop early.

Here is the exact output in the screenshot below:

Check out TypeScript Enum with Multiple Values

Method 3: Using Object.entries() for Key-Value Pairs

If you want both keys and values directly, Object.entries() is my go-to method. It returns an array of [key, value] pairs.

const statePopulations = {
  California: 39538223,
  Texas: 29145505,
  Florida: 21538187,
  NewYork: 20201249
};

Object.entries(statePopulations).forEach(([state, population]) => {
  console.log(`${state}: ${population}`);
});

You can see the exact output in the screenshot below:

When do I use this?
Whenever I need to destructure both the key and value in one step, it is especially handy for mapping or transforming data.

Check out How to Convert TypeScript Enum to Number

Method 4: Using for…of with Object.entries()

If you prefer for...of loops (which allow using break and continue), combine them with Object.entries():

const statePopulations = {
  California: 39538223,
  Texas: 29145505,
  Florida: 21538187,
  NewYork: 20201249
};

for (const [state, population] of Object.entries(statePopulations)) {
  if (population > 30000000) {
    console.log(`${state} is one of the most populous states.`);
  }
}

This method feels very natural in TypeScript and is great for more complex logic inside the loop.

Read TypeScript Enum Duplicate Values

Method 5: Iterating Over Nested JSON Objects

In many US-based apps, I work with nested JSON objects—think of a dataset with states and their major cities:

const usData = {
  California: { capital: "Sacramento", largestCity: "Los Angeles" },
  Texas: { capital: "Austin", largestCity: "Houston" }
};

Object.entries(usData).forEach(([state, info]) => {
  console.log(`${state} - Capital: ${info.capital}, Largest City: ${info.largestCity}`);
});

For deeper nesting, you can use nested loops or recursion.

Method 6: Type-Safe Iteration with TypeScript Interfaces

One of the biggest advantages of TypeScript is type safety. I always recommend defining interfaces for your JSON objects when possible.

interface StatePopulation {
  [state: string]: number;
}

const statePopulations: StatePopulation = {
  California: 39538223,
  Texas: 29145505
};

Object.keys(statePopulations).forEach((state) => {
  // TypeScript knows state is a string, and statePopulations[state] is a number
  console.log(`${state}: ${statePopulations[state]}`);
});

This reduces bugs and makes your code easier to maintain.

Check out How to Push Objects into an Array in TypeScript?

Method 7: Filtering and Transforming JSON Objects

Let’s say you want to find all states with a population over 25 million. Here’s how I’d do it:

const largeStates = Object.entries(statePopulations)
  .filter(([_, population]) => population > 25000000)
  .map(([state, _]) => state);

console.log(largeStates); // Output: [ 'California', 'Texas' ]

This pattern is powerful for extracting and transforming data.

Handle Unknown or Dynamic JSON Structures

Sometimes, especially when consuming third-party APIs, you may not know the exact structure of the JSON object at compile time.

In such cases, I use the Record<string, any> type for flexibility:

const apiResponse: Record<string, any> = getApiResponse();

for (const key in apiResponse) {
  if (apiResponse.hasOwnProperty(key)) {
    console.log(`Key: ${key}, Value: ${apiResponse[key]}`);
  }
}

Just remember: with any, you lose type safety, so use it only when necessary.

Check out TypeScript Switch with Enums

Iterate Over a JSON Object in TypeScript Example- Iterate Over US State Data from an API

Let’s say you’re building a dashboard for a US-based company, and you fetch state data from an API:

interface StateInfo {
  name: string;
  abbreviation: string;
  population: number;
}

const states: StateInfo[] = [
  { name: "California", abbreviation: "CA", population: 39538223 },
  { name: "Texas", abbreviation: "TX", population: 29145505 },
  // ...more states
];

// Iterate over the array of objects
states.forEach((state) => {
  console.log(`${state.abbreviation}: ${state.name} - Population: ${state.population}`);
});

If the API returns a JSON object instead of an array, use the methods above to loop through its properties.

Final Thoughts

In this tutorial, I explained how to iterate over JSON objects in TypeScript using different methods with examples. We checked methods such as: for...in, Object.keys(), Object.entries(), and type-safe interfaces.

If you have any questions or want to share your own tips, feel free to leave a comment below.

You may also like the following tutorials:

• Convert String To Double In TypeScript
• TypeScript Check If String Is Number
• TypeScript keyof with Strings