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

Conceal the React button once it has been pressed

What is the recommended return type in Typescript for a component that returns a Material-UI TableContainer?

Combining data types to create a unified set of keys found within a complex nested structure

Tips for arranging elements in proper order following a rotation

Using MappingJacksonValue with Spring Boot for JSONP response and handling strict MIME type errors

A guide to swapping text in a jQuery DOM component

Vue's intelligent element loading feature ensures that elements that are not displayed are delayed

The state is failing to initiate a re-render despite a change in its state

Italian calendar conversion for the react-multi-date-picker library

Utilizing AngularJS and ADAL.JS to Define Resource ID (Audience)

When I test my jQuery scripts in jsfiddle, they run smoothly. However, they do not seem to work properly when I

The partition.nodes(root) function in d3.js does not assign values to the x or dx properties of the nodes

Initial position of jQuery slider

What are the steps to generating and sharing 'npm create' scripts?

Tips for determining the width of an image and utilizing that measurement as the height in order to create a balanced square image

Sinon - observing the constructor function

Circular graphs displaying percentages at their center, illustrating the distribution of checked checkboxes across various categories

animations are not triggering when using ng-click inside ng-repeat, is there a reason why the event is not firing?

Angular auto-suggest components in material design

Withdrawal of answer from AJAX request