Convert an array into a JSON object for an API by serializing it

Question

Convert an array into a JSON object for an API by serializing it

Currently, I am working with Angular 12 within my TS file and have encountered an array response from a file upload that looks like this-

[
  {
    "id": "7",
    "name": "xyz",
    "job": "doctor",
    "preference": "1"
  },
  ...
]

My goal is to convert this array into a JSON object structure as follows-

[
  {
    "id": "7",
    "name": "xyz",
    "array1": [
      {
        "date": "today's Date,",
        "endDate": "somedate",
        "lastUpdatedBy": "someuser",
        "array2": [
          {
            "job": "doctor",
            "preference": "1"
          },
          ...
        ]
      }
    ]
   }
]

I am struggling to achieve this transformation using map or arrays nesting due to the challenge of avoiding duplicate keys for the same id and name combination. Your assistance in tackling this issue would be highly appreciated.

Below is a snippet of the code I have been attempting to modify:

let object = {
        id: data[i].id,
        name: data[i].name,
        array1:[ 
          {
          date: dateParam,
          endDate: '',
          lastUpdatedBy: 'me',
          array2: [
            {
            job: data[i].job,
            preference: data[i].preference
          }
        ]
        }
      ]
      };

javascript arrays json angular typescript

Answer 1

Answer №1

I suggest breaking this down into two separate steps:

First, group the items using id + name as the key
Next, transform the grouped structure to achieve the desired output

For a practical demonstration, visit this live sandbox

Here is the code snippet for reference:


function groupBy<T, TKey>(list: T[], keyGetter: (arg: T) => TKey) {
  const map = new Map<TKey, T[]>();
  list.forEach((item) => {
    const key = keyGetter(item);
    const collection = map.get(key);
    if (!collection) {
      map.set(key, [item]);
    } else {
      collection.push(item);
    }
  });
  return map;
}

const groupedInput = groupBy(input, (x) => x.id + x.name);

const output = Array.from(groupedInput.entries()).map(([key, value]) => ({
  id: value[0].id,
  name: value[0].name,
  array1: value.map((x) => ({ job: x.job, preference: x.preference }))
}));

console.log(output);

To use it with your provided data, consider the following:

const input = [
  {
    id: "7",
    name: "xyz",
    job: "doctor",
    preference: "1"
  },
  {
    id: "7",
    name: "xyz",
    job: "nurse",
    preference: "2"
  },
  // Additional data entries here
];

The expected output will be structured like this:


[{
        "id": "7",
        "name": "xyz",
        "array1": [{
                "job": "doctor",
                "preference": "1"
            }, 
            // Additional mapped entries here
        ]
    }
]

Answer 2

I suggest breaking this down into two separate steps:

First, group the items using id + name as the key
Next, transform the grouped structure to achieve the desired output

For a practical demonstration, visit this live sandbox

Here is the code snippet for reference:


function groupBy<T, TKey>(list: T[], keyGetter: (arg: T) => TKey) {
  const map = new Map<TKey, T[]>();
  list.forEach((item) => {
    const key = keyGetter(item);
    const collection = map.get(key);
    if (!collection) {
      map.set(key, [item]);
    } else {
      collection.push(item);
    }
  });
  return map;
}

const groupedInput = groupBy(input, (x) => x.id + x.name);

const output = Array.from(groupedInput.entries()).map(([key, value]) => ({
  id: value[0].id,
  name: value[0].name,
  array1: value.map((x) => ({ job: x.job, preference: x.preference }))
}));

console.log(output);

To use it with your provided data, consider the following:

const input = [
  {
    id: "7",
    name: "xyz",
    job: "doctor",
    preference: "1"
  },
  {
    id: "7",
    name: "xyz",
    job: "nurse",
    preference: "2"
  },
  // Additional data entries here
];

The expected output will be structured like this:


[{
        "id": "7",
        "name": "xyz",
        "array1": [{
                "job": "doctor",
                "preference": "1"
            }, 
            // Additional mapped entries here
        ]
    }
]

Convert an array into a JSON object for an API by serializing it

Answer №1

For a practical demonstration, visit this live sandbox

Similar questions

Converting an array of ByteArray into a MemoryStream

React app's compilation is failing due to non-compliant ES5 code generation of the abab module, resulting in errors on IE

Is there a way to use jQuery to enable multiple checkboxes without assigning individual IDs to each one?

What is the method for including a class in the anchor element that is the closest sibling of the containing ul element in the HTML structure?

Executing Angular2 application within Docker container

Determine the presence of a Facebook user by using JavaScript

Typescript's intriguing concept of objects containing arrays inside other objects

Using React.js to create a modal that includes ExpansionPanelDetails with a Checkbox feature

What is the best way to present a unique page overlay specifically for iPhone users?

When an empty array is returned from a catch statement in an async/await method, TypeScript infers it as never

Tips for mapping complex JSON structures to Java objects with the Jackson API

Issue: $injector:unpr Unknown Provider (app.js is appearing to be properly defined)

How to serialize a subclass using Json.NET

Is there an easy method for importing, modifying and saving JSON files?

Conceal elements and offspring in D3.js through the utilization of JavaScript or jQuery

What is the best way to send data to PHP while moving objects between different div elements?

Is it possible to utilize the map method to extract objects that are nested multiple layers deep?

Toggle the hamburger menu using JavaScript

Using Volley to display a ListView

Creating a server that is exclusive to the application in Node.js/npm or altering the response body of outgoing requests