Transform a JSON array containing individual objects into a new JSON array with objects

Question

Transform a JSON array containing individual objects into a new JSON array with objects

My array contains objects with nested objects in each element, structured like this:

[
  {
    "person": {
    "name": "John",
    "isActive": true,
    "id": 1
   }
 },
 {
    "person": {
    "name": "Ted",
    "isActive": true,
    "id": 2
   }
 }
]

I want to transform it into a format that eliminates the class name, resulting in:

[
  {
    "Name": "John",
    "IsActive": true,
    "id": 1
  },
  {
    "Name": "Ted",
    "IsActive": true,
    "id": 2
  }
]

This conversion is necessary for me to efficiently load the data into a Kendo UI grid. The transformation process takes place in a Typescript file.

javascript json typescript

Answer 1

Answer №1

To simplify the task, you can destructure the property called person.

var data = [{ person: { name: "John", isActive: true, id: 1 } }, { person: { name: "Ted", isActive: true, id: 2 } }],
    result = data.map(({ person }) => person);

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

To simplify the task, you can destructure the property called person.

var data = [{ person: { name: "John", isActive: true, id: 1 } }, { person: { name: "Ted", isActive: true, id: 2 } }],
    result = data.map(({ person }) => person);

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 3

Answer №2

Utilize the map method to transform an array of objects into a new object with specific keys

let data = [{
    "person": {
      "name": "John",
      "isActive": true,
      "id": 1
    }
  },
  {
    "person": {
      "name": "Ted",
      "isActive": true,
      "id": 2
    }
  }
];


let newData = data.map(function(item) {
  return {
    Name: item.person.name,
    IsActive: item.person.isActive,
    id: item.person.id
  };
});

console.log(newData)

Answer 4

Utilize the map method to transform an array of objects into a new object with specific keys

let data = [{
    "person": {
      "name": "John",
      "isActive": true,
      "id": 1
    }
  },
  {
    "person": {
      "name": "Ted",
      "isActive": true,
      "id": 2
    }
  }
];


let newData = data.map(function(item) {
  return {
    Name: item.person.name,
    IsActive: item.person.isActive,
    id: item.person.id
  };
});

console.log(newData)

Answer 5

Answer №3

Extremely Basic persons.forEach(person => person.name)

var persons=[
  {
    "person": {
      "name": "Sarah",          
      "isActive": true,
      "id": 1
   }
 },
 {
    "person": {
      "name": "Mike",          
      "isActive": true,
      "id": 2
   }
 }
]

var newPersons=persons.map(person => person)

console.log(newPersons)

Answer 6

Extremely Basic persons.forEach(person => person.name)

var persons=[
  {
    "person": {
      "name": "Sarah",          
      "isActive": true,
      "id": 1
   }
 },
 {
    "person": {
      "name": "Mike",          
      "isActive": true,
      "id": 2
   }
 }
]

var newPersons=persons.map(person => person)

console.log(newPersons)

Answer 7

Answer №4

To utilize the .map method

const data = [{"person": {"name": "Alice","isActive": false,"id": 3}},{"person": {"name": "Bob","isActive": true,"id": 4}}]
.map(({ person }) => {
  return {
    "Name": person.name,
    "IsActive": person.isActive,
    "ID": person.id
  }
})

console.log(data)

Answer 8

To utilize the .map method

const data = [{"person": {"name": "Alice","isActive": false,"id": 3}},{"person": {"name": "Bob","isActive": true,"id": 4}}]
.map(({ person }) => {
  return {
    "Name": person.name,
    "IsActive": person.isActive,
    "ID": person.id
  }
})

console.log(data)

Transform a JSON array containing individual objects into a new JSON array with objects

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The Socket.io authorization feature is failing to refresh session information

Obtain the actual file path from a JSON response

Discovering whether an image contains a caption with the help of JavaScript

Troubleshooting Guide: Issues with Bootstrap 3 Modal Window Implementation

Creating a custom dynamic favicon and title in NextJS

Implementing automatic selection mode in Kendo MVC grid

Guide on hiding a div element when clicked outside of it?

Retrieve a variable from the context and assign it to the Angular scope

Is it possible to utilize TypeScript code to dynamically update the JSON filter with variable values?

Header stabilization on scroll

Trying to toggle between two Angular components within the app component using a pair of buttons

Modifying iframe src using click event from a separate component in Angular 10

Having difficulty controlling the DOM within an AngularJS template

Creating a seamless thread using AngularJS

Timed up 10-second countdown with vue.js

Create a custom overlay for an image that is centered horizontally and does not have a fixed width

Detecting Unflushed Requests in Jasmine and AngularJS

A step-by-step guide to displaying an HTML table on your view using AJAX and JSON data

Make sure to select the checkbox using a protractor only if it hasn't been checked already

Providing the module with the URL