How to 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 was 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 Objects to/from Arrays 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 one 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 Typescript Example

This section will see how we can convert Objects 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

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 in Typescript?

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 to Convert objects to/from Arrays in Typescript with examples.