Mapping data from JSON to Array in Typescript

Mapping data from JSON to Array in TypeScript

When working with TypeScript, you may often come across the need to map data from a JSON object to an array. This can be useful in scenarios where you want to manipulate or display the data in a different format. In this blog post, we will explore different solutions to achieve this mapping in TypeScript.

Solution 1: Using the map() function

The map() function is a built-in method in JavaScript that allows you to iterate over an array and transform each element based on a callback function. In TypeScript, you can use this function to map data from a JSON object to an array.

const jsonData = {
  "users": [
    { "name": "John", "age": 25 },
    { "name": "Jane", "age": 30 },
    { "name": "Bob", "age": 35 }
  ]
};

const usersArray = jsonData.users.map((user) => {
  return {
    name: user.name,
    age: user.age
  };
});

console.log(usersArray);

The above code snippet demonstrates how to use the map() function to map the “name” and “age” properties from each user object in the JSON data to a new array called usersArray. The resulting array will contain objects with the same properties as the original JSON data.

Solution 2: Using Object.entries() and Array.from()

If you need to map data from a JSON object that has dynamic property names, you can use the Object.entries() method to get an array of key-value pairs from the object. Then, you can use the Array.from() method to transform this array into the desired format.

const jsonData = {
  "user1": { "name": "John", "age": 25 },
  "user2": { "name": "Jane", "age": 30 },
  "user3": { "name": "Bob", "age": 35 }
};

const usersArray = Array.from(Object.entries(jsonData), ([key, value]) => {
  return {
    id: key,
    name: value.name,
    age: value.age
  };
});

console.log(usersArray);

In the above example, the Object.entries() method is used to get an array of key-value pairs from the jsonData object. Then, the Array.from() method is used to transform this array into the desired format, mapping the “name” and “age” properties from each value object to the new array called usersArray. Additionally, the “id” property is set to the key of each entry in the original JSON data.

These are two common solutions for mapping data from JSON to an array in TypeScript. Depending on your specific requirements and the structure of your JSON data, you can choose the solution that best fits your needs. Happy coding!

Final Output:

<

pre>

const jsonData = {
  "users": [
    { "name": "John", "age": 25 },
    { "name": "Jane", "age": 30 },
    { "name": "Bob", "age": 35 }
  ]
};

const usersArray = jsonData.users.map((user) => {
  return {
    name: user.name,
    age: user.age
  };
});

console.log(usersArray);

const jsonData = {
  "user1": { "name": "John", "age": 25 },
  "user2": { "name": "Jane", "age": 30 },
  "user3": { "name": "Bob", "age": 35 }
};

const usersArray = Array.from(Object.entries(jsonData), ([key, value]) => {
  return {
    id: key,
    name: value.name,
    age: value.age
  };
});

console.log(usersArray);