{

How to Convert Object to/from Array in Typescript


Convert Object to/from Array in Typescript

Typescript is a superset of javascript with compile type checking.

In Application development, We used to get the use cases where data retrieved from REST API/Database in the form of Array/Object, so need to convert this to Object/Array.

Every developer used to get these user cases during development.

Let us see ways to convert Object to/from Array in javascript/Typescript/Angular applications.

First, we will see how the object Array creates is in typescript.

An array of Objects Declaration and Initialization

For example, an array contains model data like the below.

[  
    {id: 1, name: 'Kiran'},  
    {id: 2, name: 'Tom'},  
    {id: 3, name: 'John'}  
 ]  

Next, is to create an interface that represents the data modal.

export interface Emp{  
    id:number;  
    name:string;  
}  
const arr: Emp[] = [  
    {id: 1, name: 'Kiran'},  
    {id: 2, name: 'Tom'},  
    {id: 3, name: 'John'}  
 ];  

How to convert Object to Array Example

This section will see how we can convert Object to Array in Angular and Typescript with examples.

Typescript Code

Let us assume that you have an object declared with multiple properties.

First Get the named keys using object.keys() method.

This method retrieves keys from the given object and returns an array of keys.

Using the map() method with a defined callback. And callback is executed for each element of an object.

  
var employees = {   
    kiran: { age:30,salary:10000},  
    john: { age:35,salary:15000},  
    Tom: { age: 21, salary:5000}  
}  
let arr = [];  
Object.keys(employees).map(function(key){  
    arr.push({[key]:employees[key]})  
    return arr;  
});  
console.log('Object=',employees)  
console.log('Array=',arr)  

Output is

Typescript Object to Array with Example

Angular Code

For example, object data contains the following properties.

let empdata={  
name:"Kiran",  
age:30,  
salary:10000  
}  

First Create an Interface that represents the above.

export interface Emp{  
  name: string;  
  age: number;  
  salary: number;  
}  

In the Component, Create an empty array.

emps: Emp[] = []; 

Add the object to an array using the push method

this.emps.push(data);  

This pushes objects to array and output are

0:{name: "kiran", age: 45, salary: 2000}  
length:1 

If you want to convert object properties - name, age, salary

let  emp = {  
    name:"kiran",  
    age:45,  
    salary:2000,  
  };  
  
  let array = [];  
  for(let key in emp){  
   if(emp.hasOwnProperty(key)){  
     array.push(emp[key]);  
   }  
  }  
  console.log(array);  

Output is

0:"kiran"  
1:45  
2:2000  

How to Convert Array to objects?

There are many ways we can do a conversion depending on the object structure.

using Array Push method example

Declared object and empty array using the array push method. we can convert to Array.

let  myObject = {  
    name:"kiran",  
    age:45,  
    salary:2000,  
  };  
let myArray = [];  
myArray.push(myObject);  
console.log(myArray);  

Output is

Array(1)0: {name: "kiran", age: 45, salary: 2000}length: 1__proto__: Array(0) 

using Spread Operator and Object.assign() method example

we can convert array objects to Single objects.

var array = [{ Kiran: "30" }, { Tom: "50" }],  
object = Object.assign({}, ...array);  
console.log(object);  

Output is

Kiran:"30"  
Tom:"50"

Conclusion

To Sum up, Learned Convert Object to/from Array in Typescript with examples.

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.