Tips on transforming the array of objects (changing from its original form to a new form) using TypeScript

Question

Tips on transforming the array of objects (changing from its original form to a new form) using TypeScript

I have an array of objects containing data in a key-value format. Here is an example:

"data": [
    {
      "groupBy": "InvalidAuth",
      "count": 41
    },
    {
      "groupBy": "InvalidAuthEmpty",
      "count": 75
    },
    {
      "groupBy": "InvalidAuthSQL",
      "count": 75
    },
    {
      "groupBy": "Unsecured",
      "count": 75
    }
  ]

I want to transform this data into the following format, where "count" is renamed as "value" and "groupBy" is renamed as "name". How can I achieve this programmatically using TypeScript or JavaScript?

data:[
            {value:41, name:'InvalidAuth'},
            {value:75, name:'InvalidAuthEmpty'},
            {value:75, name:'InvalidAuthSQL'},
            {value:75, name:'Unsecured'}
]

The original format does not work with e-charts, as it only accepts data in the value-name form.

Can someone assist me with this conversion?

Thank you.

javascript typescript

Answer 1

Answer №1

You can easily utilize the map function along with destructuring

const info = [{"category": "InvalidAuth","quantity": 41},{"category": "InvalidAuthEmpty","quantity": 75},{"category": "InvalidAuthSQL","quantity": 75},{"category": "Unsecured","quantity": 75}]
  
let result = info.map(({quantity:value,category:name}) => ({name,value}))

console.log(result)

Answer 2

You can easily utilize the map function along with destructuring

const info = [{"category": "InvalidAuth","quantity": 41},{"category": "InvalidAuthEmpty","quantity": 75},{"category": "InvalidAuthSQL","quantity": 75},{"category": "Unsecured","quantity": 75}]
  
let result = info.map(({quantity:value,category:name}) => ({name,value}))

console.log(result)

Answer 3

Answer №2

To transform the original array and retrieve a new array with specific property names, you can utilize the map method:

const items = [
    {
      "category": "Electronics",
      "quantity": 10
    },
    {
      "category": "Clothing",
      "quantity": 20
    },
    {
      "category": "Books",
      "quantity": 15
    },
    {
      "category": "Home Decor",
      "quantity": 30
    }
  ];
  
  const modifiedItems = items.map(item => ({
    name: item.category,
    amount: item.quantity
  }));
  
  console.log(modifiedItems);

Answer 4

To transform the original array and retrieve a new array with specific property names, you can utilize the map method:

const items = [
    {
      "category": "Electronics",
      "quantity": 10
    },
    {
      "category": "Clothing",
      "quantity": 20
    },
    {
      "category": "Books",
      "quantity": 15
    },
    {
      "category": "Home Decor",
      "quantity": 30
    }
  ];
  
  const modifiedItems = items.map(item => ({
    name: item.category,
    amount: item.quantity
  }));
  
  console.log(modifiedItems);

Answer 5

Answer №3

Perhaps this could be the solution you are seeking:

const updatedData = [];
data.forEach((item) => {
  updatedData.push({
    value: item.count,
    name: item.groupBy,
  });
});

Answer 6

Perhaps this could be the solution you are seeking:

const updatedData = [];
data.forEach((item) => {
  updatedData.push({
    value: item.count,
    name: item.groupBy,
  });
});

Answer 7

Answer №4

To complete the task, simply loop through the data array, renaming existing keys and removing old ones.

var data= [
    {
      "groupBy": "InvalidAuth",
      "count": 41
    },
    {
      "groupBy": "InvalidAuthEmpty",
      "count": 75
    },
    {
      "groupBy": "InvalidAuthSQL",
      "count": 75
    },
    {
      "groupBy": "Unsecured",
      "count": 75
    }
  ]
  
   data.forEach(function(elem){
    elem.name =elem.groupBy;
    elem.value =elem.count;
    delete elem['groupBy'];
    delete elem['count'];
  });
  console.log(data);

Answer 8

To complete the task, simply loop through the data array, renaming existing keys and removing old ones.

var data= [
    {
      "groupBy": "InvalidAuth",
      "count": 41
    },
    {
      "groupBy": "InvalidAuthEmpty",
      "count": 75
    },
    {
      "groupBy": "InvalidAuthSQL",
      "count": 75
    },
    {
      "groupBy": "Unsecured",
      "count": 75
    }
  ]
  
   data.forEach(function(elem){
    elem.name =elem.groupBy;
    elem.value =elem.count;
    delete elem['groupBy'];
    delete elem['count'];
  });
  console.log(data);

Tips on transforming the array of objects (changing from its original form to a new form) using TypeScript

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Change the date from Thu Jan 01 1970 01:00:00 GMT+010 to the format yyyy/mm/dd

Unable to transfer an array from getStaticProps method in Next.js

When attempting to parse a single string stored in a cookie with JSON.parse, it results in a "SyntaxError: Unexpected Number" error being thrown

There was a failure to retrieve any data when trying to send an ajax request to

How can I send data with ajax and then navigate to the page with the posted information?

Interacting with a JavaScript button using C# WebBrowser

Is there a way to make a class method accessible in V8?

Field types: Elements encased within square brackets

What is the best way to include headers in a jQuery.load function similar to ajax requests

How can Javascript or Jquery determine the specific event assigned to an object?

What is the best way to arrange elements in my DOM if they are not being repeated in AngularJS?

The generic does not validate the types of two properties

Creating interactive functionality for textareas and input fields in Vue: A beginner's guide

The data in a NodeJS-generated JSON file is incorrect

Why is the responseText of an AJAX request empty on Chrome?

What is preventing TypeScript from identifying the type of a parent based on its child?

JavaScript forEach: alter items

What could be causing my nested child component to fail to display the content?

The double click functionality does not seem to be functioning within the Backbone View

Angular error TS2322 arises when attempting to assign a type of 'Observable<{}>' with the share() operator