A guide to compacting JSON data in Typescript or Angular: A step-by

Question

A guide to compacting JSON data in Typescript or Angular: A step-by

Looking for help with formatting JSON in Typescript or JavaScript. Which approach would be better?

var data = {
"value 1" : [
    {
        type : String,
        Dicription : "abc"
    },
    {
        type : int,
        Dicription : "xyz"
    },
    {
        type : String,
        Dicription : "pqr"
    },
    ]
"value 2" : [
    {
        type : String,
        Dicription : "abc"
    }
    ]
"value 3" : [
    {
        type : String,
        Dicription : "abc"
    },
    {
        type : int,
        Dicription : "xyz"
    }
}

Desired Output:

{
    {
       value : value1,
       type : String,
       Description : "abc"
    },
    {
       value : value1,
       type : int,
       Dicription : "xyz"
    },
    {
       value : value1,
       type : String,
       Dicription : "pqr"
    },
    {
        value : value2,
        type : String,
        Description : "abc"
    },
    {
        value : value3,
        type : String,
        Description : "abc"
    },
    {   
        value : value3,
        type : int,
        Description : "xyz"
    }
}

I attempted to iterate through the data but couldn't achieve the desired output. I tried to flatten it, but got objects like {value : value, {type: String, Description : abc}}. Any suggestions on how to solve this?

javascript arrays json angular typescript

Answer 1

Answer №1

To transform the object into an array, use the Object.entries() method and then map the entries to create an array of objects:

const result = Object.entries(data) // retrieve the object's key-value pairs
  .flatMap(([key, value]) =>  // map and flatten the sub-arrays
    value.map(obj => ({ // map each sub-array and merge with the key
      key,
      ...obj
    }))
  )

Answer 2

To transform the object into an array, use the Object.entries() method and then map the entries to create an array of objects:

const result = Object.entries(data) // retrieve the object's key-value pairs
  .flatMap(([key, value]) =>  // map and flatten the sub-arrays
    value.map(obj => ({ // map each sub-array and merge with the key
      key,
      ...obj
    }))
  )

Answer 3

Answer №2

In order to tackle the problem, I separate the keys and values and then loop through the first object to create a new object where I store the values.

Here is how I approached the solution:

var keys = Object.keys(data);
var values = Object.values(data);
var length = Object.values(data).length;
keys.forEach(function (key, index){
  values.forEach(function (obj, i) {
    if(index == i){
      var innerValue = Object.values(obj);
      for(i=0 ; i<=innerValue.length; i++)
       {
        new.push({
          'value': key,
          'type': innerValue[i].type,
          'Description': innerValue[i].abc,
         });
       }
     }
   });
});

Answer 4

In order to tackle the problem, I separate the keys and values and then loop through the first object to create a new object where I store the values.

Here is how I approached the solution:

var keys = Object.keys(data);
var values = Object.values(data);
var length = Object.values(data).length;
keys.forEach(function (key, index){
  values.forEach(function (obj, i) {
    if(index == i){
      var innerValue = Object.values(obj);
      for(i=0 ; i<=innerValue.length; i++)
       {
        new.push({
          'value': key,
          'type': innerValue[i].type,
          'Description': innerValue[i].abc,
         });
       }
     }
   });
});

A guide to compacting JSON data in Typescript or Angular: A step-by

Answer №1

Answer №2

Similar questions

How can I retrieve a Long Integer and store it in a Byte Array using VBA

What is the best way to start an array with each element running on its own thread?

Can tap and drag on mobile devices be accurately detected?

Establish a connection to the ActiveMQ broker utilizing STOMP protocol in an Ionic application

Execute the cucumber cli programmatically in the index.js file of a node application

The NestJS HttpService is encountering issues with API calls when an Interceptor is implemented

Insert a comment prior to a function with the TypeScript Compiler API

Failure in converting a JSON file to a QR-Code

Is there a "hasContent" function available in webdriverjs?

Creating a wrapper component to enhance an existing component in Vue - A step-by-step guide

Incorporating a discreet progress bar into traditional file uploading processes

Changing a string into a multi-dimensional array using javascript

Issue with mouse movement in Selenium and Protractor not functioning as expected

Using Vue.js data with an erb link_to tag

Ways to customize the Angular Form Directive for universal autocomplete="off" functionality

How can I correctly parse JSON data?

Limit the length of long strings in JSON using Python

Guide to integrating a Custom Font into live data on a PDF file with the help of jsPDF

How to properly pass data between parent and child components in VueJS without using provide/inject

Leveraging node.js to power mobile applications along with an administration panel built using angular