Using TypeScript to interpret JSON - insert a 'data' label

Question

Using TypeScript to interpret JSON - insert a 'data' label

Consider the following example of a JSON structure:

[  
   {  
      "id":1,
      "position":3,
      "articleNumber":"ServiceElement"
   },
   {  
      "id":2,
      "position":2,
      "articleNumber":"ServiceElement"
   }
]

Is there a way to transform it into the desired format below?

{  
   "data":[  
      {  
         "data":{  
            "id":1,
            "position":3,
            "articleNumber":"ServiceElement"
         }
      },
      {  
         "data":{  
            "id":2,
            "position":2,
            "articleNumber":"ServiceElement"
         }
      }
   ]
}

The addition of the data tag is necessary for identifying objects in order to implement a TreeTable. The original JSON structure does not meet the required format for this purpose.

json angular typescript parsing treetable

Answer 1

Answer №1

To transform the shape of items, simply utilize the map function.

Initially, we create a new object { data: } at the first level and then assign the result of array.map to the data property.

const array = [  
   {  
      "id":1,
      "position":3,
      "articleNumber":"ServiceElement"
   },
   {  
      "id":2,
      "position":2,
      "articleNumber":"ServiceElement"
   }
];

const mapped = { data: array.map(item => ({ data: item }))};
console.log(mapped);

Answer 2

To transform the shape of items, simply utilize the map function.

Initially, we create a new object { data: } at the first level and then assign the result of array.map to the data property.

const array = [  
   {  
      "id":1,
      "position":3,
      "articleNumber":"ServiceElement"
   },
   {  
      "id":2,
      "position":2,
      "articleNumber":"ServiceElement"
   }
];

const mapped = { data: array.map(item => ({ data: item }))};
console.log(mapped);

Using TypeScript to interpret JSON - insert a 'data' label

Answer №1

Similar questions

Issue with hydration when logging in with Next-Auth in NextJS 13.4

Error: Unable to access the 'nom_gr' property of null - encountered in Chrome

Constructing a Primeng MessageService causes a blank webpage to appear

Utilizing the ABP framework for implementing pagination in ngx datatable

Connection drops unexpectedly on Azure App Service after deploying SignalR

What sets apart a class from a service in NativeScript?

Attempting to deploy my Angular project on Heroku but encountering an error

Obtaining JSON information with CakePHP

What could be causing the class methods in my NestJS DI to be stored as undefined values in a map?

The class 'AngularFireList<{}>' cannot be assigned to the type 'FirebaseListObservable<any>'

Special JSON character scraping using PromTail

Ways to fix npm ERR! code ECONNRESET during Angular cli installation

Automatically Submitting React Forms Using Code

Having trouble locating the .ts module when executing a Node script with experimental modules enabled

When utilizing Angular 2, this message is triggered when a function is invoked from the Observable

Angular MatDialog failing to display the gray overlay background

Encountering the error "tsx is not defined" during a Jest test in a React/TypeScript project

Retrieve JSON data from a WordPress site that is powered by WooCommerce, using basic authentication

What could be the reason for the custom component app-transition-group and app-transition-group-item not functioning properly in Angular 8, even though it was working fine

Utilizing C# to Decode Nested HTML Elements from JSON