Friday, August 31, 2018

Typescript - How to Convert Object to Array or Array to Object| Angular Example

Typescript Object Array

Typescript is 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 this user cases during development. In this blog post, we are going to see the ways we can convert Object to/from Array in javascript/Typescript/Angular applications.

First, we will see how Array of the object can be created in typescript.

An array of Objects Declaration and Initialization.

For example, array contains model data like below.
[
    {id: 1, name: 'Kiran'},
    {id: 2, name: 'Tom'},
    {id: 3, name: 'John'}
 ]
Next is to create a Interface that represents data modal.
export interface Emp{
    id:number;
    name:string;
}
const arr: Emp[] = [
    {id: 1, name: 'Kiran'},
    {id: 2, name: 'Tom'},
    {id: 3, name: 'John'}
 ];

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 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 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 following properties
let empdata={
name:"Kiran",
age:30,
salary:10000
}
First Create a 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 push 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

Convert Array to objects example

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

using Array Push method

Declared object and empty array using 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,

we can convert array objects to Single object.
var array = [{ Kiran: "30" }, { Tom: "50" }],
object = Object.assign({}, ...array);
console.log(object);
Output is
Kiran:"30"
Tom:"50"

Related article


EmoticonEmoticon