Navigate back to the homepage

How to get array from json object in typescript?

Infinitbility
TypeScript
February 4th, 2022 · 1 min read
keep affilitate

Hello Friends 👋,

Welcome To Infinitbility! ❤️

Every time, we got an array in an object and we have to use arrays from objects.

Today, we will see how we will use an array from an object in TypeScript.

In this tutorial, we will take the example of an object in an array of objects and we will iterate every row of arrays.

Let’s start Today’s tutorial How to get an array from JSON object in typescript?

let’s assume we have the following response from API.

1{
2 status: 200,
3 users: [
4 { id: 1, name: 'infinitbility' },
5 { id: 2, name: 'notebility' },
6 { id: 3, name: 'repairbility' }
7 ]
8}

To create the above API response in typescript we have followed below code example of the API response interface.

1interface User {
2 id: number;
3 name: string;
4}
5
6interface Api {
7 status: number;
8 users: Array<User>;
9}
10
11let users: Array<User> = [
12 { id: 1, name: 'infinitbility' },
13 { id: 2, name: 'notebility' },
14 { id: 3, name: 'repairbility' },
15];
16
17let apiResponse: Api = {
18 status: 200,
19 users: users
20}

Now, we have the response of objects with contain array of objects let’s see how we can iterate the array.

If you also the following code to iterate API response first check API response and if OK status, use for loop to get rows.

1interface User {
2 id: number;
3 name: string;
4}
5
6interface Api {
7 status: number;
8 users: Array<User>;
9}
10
11let users: Array<User> = [
12 { id: 1, name: 'infinitbility' },
13 { id: 2, name: 'notebility' },
14 { id: 3, name: 'repairbility' },
15];
16
17let apiResponse: Api = {
18 status: 200,
19 users: users
20}
21
22if(apiResponse.status == 200){
23 for(let user of apiResponse.users){
24 console.log('user', user);
25 }
26}

Output

typescript, object, arrays, example
TypeScript, iterate object array example.

Thanks for reading…

Follow me on Twitter

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

melio affilitate

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Guide book

Guidebook: The Javascript Monorepo Photoshop Guide

Tutorials

Categories

More articles from Infinitbility

How to get array index value in typescript?

TypeScript, get array of element index value example.

February 3rd, 2022 · 1 min read

How to get array length in typescript?

TypeScript, get length of array example.

February 2nd, 2022 · 1 min read
© 2020–2022 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]