Enhancing JSON data: Transforming basic JSON structure into more complex format

Question

Enhancing JSON data: Transforming basic JSON structure into more complex format

I am currently working on a typescript file that is receiving a JSON response from an external API. I am in need of assistance to convert the received JSON into a different format. Could someone please help me with this JSON conversion task?

Sample JSON data received from the API:

type here
Employees: [
    { empid : 12345 },
    { empName: "John Doe" },
    { gender: "Male" },
    { hobbie: "Book" },
    { empid : 12347 },
    { gender: "Male" },
    { hobbie: "Gym" },
    { empid : 12346 },
    { empName: "Jill Doe" },
    { gender: "Female" },
    { hobbie: "Sport" },
    .
    .
    .
]

The desired JSON format for conversion is as follows:

type here
finalEmployee: [
    {
       empName : "John Doe",
       empDetails: [
        {
          serialNo : 1, 
          empid: 12345,
          gender : "Male",
          hobbie : "Book"
        },
        {
          serialNo : 2, 
          empid: 12347,
          gender : "Male",
          hobbie : "Gym"
        }
     ]
    },
    {
       empName : "Jill Doe",
       empDetails: [
        {
          serialNo : 2,
          empid: 12346,
          gender : "Female",
          hobbie : "Sport"
        }
     ]
    },
    .
    .
    .
]

I am having difficulty splitting the data into the required format.

arrays json typescript

Answer 1

Answer №1

The API response might not be ideal, but if necessary, you can try the following:

const Employees = [
  { empid: 12345 },
  { empName: 'John Doe' },
  { gender: 'Male' },
  { hobbie: 'Book' },
  { empid: 12346 },
  { empName: 'Jill Doe' },
  { gender: 'Female' },
  { hobbie: 'Sport' },
]

function getFinalEmpItem(serialNo, { empName, empid, gender, hobbie }) {
  return {
    empName,
    empDetails: {
      serialNo,
      empid,
      gender,
      hobbie,
    },
  }
}

function convertFinalEmp(emp) {
  const final = emp
    .reduce((acc, current) => {
      const [[key, value]] = Object.entries(current)
      const lastObj = acc[acc.length - 1]

      if (key === 'empid') {
        acc.push({
          [key]: value,
        })
      } else {
        lastObj[key] = value
      }

      return acc
    }, [])
    .map((el, index) => getFinalEmpItem(index + 1, el))

  return final
}

console.log(convertFinalEmp(Employees))

/* Output
[
  {
    "empName": "John Doe",
    "empDetails": {
      "serialNo": 1,
      "empid": 12345,
      "gender": "Male",
      "hobbie": "Book"
    }
  },
  {
    "empName": "Jill Doe",
    "empDetails": {
      "serialNo": 2,
      "empid": 12346,
      "gender": "Female",
      "hobbie": "Sport"
    }
  }
]
*/

The text initially attempted to start the empDetails as an Array, so it was interpreted as follows.
If the empName is the same, group them in the details array within the same Object.

const Employees = [
  { empid: 12345 },
  { empName: 'John Doe' },
  { gender: 'Male' },
  { hobbie: 'Book' },
  { empid: 12346 },
  { empName: 'Jill Doe' },
  { gender: 'Female' },
  { hobbie: 'Sport' },
  { empid: 12346 },
  { empName: 'John Doe' },
  { gender: 'Female2' },
  { hobbie: 'Sport2' },
]

function getFinalEmpItem(serialNo, { empName, empid, gender, hobbie }) {
  return {
    empName,
    empDetails: {
      serialNo,
      empid,
      gender,
      hobbie,
    },
  }
}

function convertFinalEmp(emp) {
  const final = emp
    .reduce((acc, current) => {
      const [[key, value]] = Object.entries(current)
      const lastObj = acc[acc.length - 1]

      if (key === 'empid') {
        acc.push({
          [key]: value,
        })
      } else {
        lastObj[key] = value
      }

      return acc
    }, [])
    .map((el, index) => getFinalEmpItem(index + 1, el))
    .reduce((acc, cur) => {
      const findObj = acc.find(el => el.empName === cur.empName)

      if (!findObj) {
        acc.push({
          empName: cur.empName,
          empDetails: [cur.empDetails],
        })
      } else {
        findObj.empDetails.push(cur.empDetails)
      }

      return acc
    }, [])

  return final
}

console.log(convertFinalEmp(Employees))

/* Output
[
  {
    "empName": "John Doe",
    "empDetails": [
      {
        "serialNo": 1,
        "empid": 12345,
        "gender": "Male",
        "hobbie": "Book"
      },
      {
        "serialNo": 3,
        "empid": 12346,
        "gender": "Female2",
        "hobbie": "Sport2"
      }
    ]
  },
  {
    "empName": "Jill Doe",
    "empDetails": [
      {
        "serialNo": 2,
        "empid": 12346,
        "gender": "Female",
        "hobbie": "Sport"
      }
    ]
  }
]
*/

It appears that there are entries without an empName in the additional content provided.
To rectify this issue, I made the following adjustment

const Employees = [
  { empid: 12345 },
  { empName: 'John Doe' },
  { gender: 'Male' },
  { hobbie: 'Book' },
  { empid: 12347 },
  { gender: 'Male' },
  { hobbie: 'Gym' },
  { empid: 12346 },
  { empName: 'Jill Doe' },
  { gender: 'Female' },
  { hobbie: 'Sport' },
]

function getFinalEmpItem(serialNo, { empName, empid, gender, hobbie }) {
  return {
    empName,
    empDetails: {
      serialNo,
      empid,
      gender,
      hobbie,
    },
  }
}

function convertFinalEmp(emp) {
  const final = emp
    .reduce((acc, current) => {
      const [[key, value]] = Object.entries(current)
      const lastObj = acc[acc.length - 1]

      if (key === 'empid') {
        acc.push({
          [key]: value,
        })
      } else {
        lastObj[key] = value
      }

      return acc
    }, [])
    .map((el, index) => getFinalEmpItem(index + 1, el))
    .reduce((acc, cur) => {
      const lastObj = acc[acc.length - 1]

      if (!lastObj || cur.empName) {
        acc.push({
          empName: cur.empName,
          empDetails: [cur.empDetails],
        })
      } else {
        lastObj.empDetails.push(cur.empDetails)
      }

      return acc
    }, [])

  return final
}

console.log(convertFinalEmp(Employees))
/* Output
[
  {
    empName: 'John Doe',
    empDetails: [
      { serialNo: 1, empid: 12345, gender: 'Male', hobbie: 'Book' },
      { serialNo: 2, empid: 12347, gender: 'Male', hobbie: 'Gym' },
    ],
  },
  {
    empName: 'Jill Doe',
    empDetails: [
      { serialNo: 3, empid: 12346, gender: 'Female', hobbie: 'Sport' },
    ],
  }
]
*/

Answer 2

The API response might not be ideal, but if necessary, you can try the following:

const Employees = [
  { empid: 12345 },
  { empName: 'John Doe' },
  { gender: 'Male' },
  { hobbie: 'Book' },
  { empid: 12346 },
  { empName: 'Jill Doe' },
  { gender: 'Female' },
  { hobbie: 'Sport' },
]

function getFinalEmpItem(serialNo, { empName, empid, gender, hobbie }) {
  return {
    empName,
    empDetails: {
      serialNo,
      empid,
      gender,
      hobbie,
    },
  }
}

function convertFinalEmp(emp) {
  const final = emp
    .reduce((acc, current) => {
      const [[key, value]] = Object.entries(current)
      const lastObj = acc[acc.length - 1]

      if (key === 'empid') {
        acc.push({
          [key]: value,
        })
      } else {
        lastObj[key] = value
      }

      return acc
    }, [])
    .map((el, index) => getFinalEmpItem(index + 1, el))

  return final
}

console.log(convertFinalEmp(Employees))

/* Output
[
  {
    "empName": "John Doe",
    "empDetails": {
      "serialNo": 1,
      "empid": 12345,
      "gender": "Male",
      "hobbie": "Book"
    }
  },
  {
    "empName": "Jill Doe",
    "empDetails": {
      "serialNo": 2,
      "empid": 12346,
      "gender": "Female",
      "hobbie": "Sport"
    }
  }
]
*/

The text initially attempted to start the empDetails as an Array, so it was interpreted as follows.
If the empName is the same, group them in the details array within the same Object.

const Employees = [
  { empid: 12345 },
  { empName: 'John Doe' },
  { gender: 'Male' },
  { hobbie: 'Book' },
  { empid: 12346 },
  { empName: 'Jill Doe' },
  { gender: 'Female' },
  { hobbie: 'Sport' },
  { empid: 12346 },
  { empName: 'John Doe' },
  { gender: 'Female2' },
  { hobbie: 'Sport2' },
]

function getFinalEmpItem(serialNo, { empName, empid, gender, hobbie }) {
  return {
    empName,
    empDetails: {
      serialNo,
      empid,
      gender,
      hobbie,
    },
  }
}

function convertFinalEmp(emp) {
  const final = emp
    .reduce((acc, current) => {
      const [[key, value]] = Object.entries(current)
      const lastObj = acc[acc.length - 1]

      if (key === 'empid') {
        acc.push({
          [key]: value,
        })
      } else {
        lastObj[key] = value
      }

      return acc
    }, [])
    .map((el, index) => getFinalEmpItem(index + 1, el))
    .reduce((acc, cur) => {
      const findObj = acc.find(el => el.empName === cur.empName)

      if (!findObj) {
        acc.push({
          empName: cur.empName,
          empDetails: [cur.empDetails],
        })
      } else {
        findObj.empDetails.push(cur.empDetails)
      }

      return acc
    }, [])

  return final
}

console.log(convertFinalEmp(Employees))

/* Output
[
  {
    "empName": "John Doe",
    "empDetails": [
      {
        "serialNo": 1,
        "empid": 12345,
        "gender": "Male",
        "hobbie": "Book"
      },
      {
        "serialNo": 3,
        "empid": 12346,
        "gender": "Female2",
        "hobbie": "Sport2"
      }
    ]
  },
  {
    "empName": "Jill Doe",
    "empDetails": [
      {
        "serialNo": 2,
        "empid": 12346,
        "gender": "Female",
        "hobbie": "Sport"
      }
    ]
  }
]
*/

It appears that there are entries without an empName in the additional content provided.
To rectify this issue, I made the following adjustment

const Employees = [
  { empid: 12345 },
  { empName: 'John Doe' },
  { gender: 'Male' },
  { hobbie: 'Book' },
  { empid: 12347 },
  { gender: 'Male' },
  { hobbie: 'Gym' },
  { empid: 12346 },
  { empName: 'Jill Doe' },
  { gender: 'Female' },
  { hobbie: 'Sport' },
]

function getFinalEmpItem(serialNo, { empName, empid, gender, hobbie }) {
  return {
    empName,
    empDetails: {
      serialNo,
      empid,
      gender,
      hobbie,
    },
  }
}

function convertFinalEmp(emp) {
  const final = emp
    .reduce((acc, current) => {
      const [[key, value]] = Object.entries(current)
      const lastObj = acc[acc.length - 1]

      if (key === 'empid') {
        acc.push({
          [key]: value,
        })
      } else {
        lastObj[key] = value
      }

      return acc
    }, [])
    .map((el, index) => getFinalEmpItem(index + 1, el))
    .reduce((acc, cur) => {
      const lastObj = acc[acc.length - 1]

      if (!lastObj || cur.empName) {
        acc.push({
          empName: cur.empName,
          empDetails: [cur.empDetails],
        })
      } else {
        lastObj.empDetails.push(cur.empDetails)
      }

      return acc
    }, [])

  return final
}

console.log(convertFinalEmp(Employees))
/* Output
[
  {
    empName: 'John Doe',
    empDetails: [
      { serialNo: 1, empid: 12345, gender: 'Male', hobbie: 'Book' },
      { serialNo: 2, empid: 12347, gender: 'Male', hobbie: 'Gym' },
    ],
  },
  {
    empName: 'Jill Doe',
    empDetails: [
      { serialNo: 3, empid: 12346, gender: 'Female', hobbie: 'Sport' },
    ],
  }
]
*/

Enhancing JSON data: Transforming basic JSON structure into more complex format

Answer №1

Similar questions

Redirecting with response headers in Next.js

Tips for running batch files prior to debugging in VS Code

What is the process of displaying events from components within ng2 submodules?

A guide to retrieving a JSON Object using Python within the Flask Framework

Fetching an item from Local Storage in Angular 8

How can a JSON string be assigned to a variable for use in a Google pie chart?

Setting up Webpack to compile without reliance on external modules: A step-by-step guide

Adding nested JSON data to MySQL using NodeJS

Using Node.js and Angular to Access Google Spreadsheet JSON Data Across Different Origins

Converting to JSON format by utilizing MemoryStream and including line breaks in C#

Python code to transform an integer array into a binary array

Navigating the parent scope in Angular using TypeScript

What is the process of playing blob videos (avi, mov) in Angular14?

Exploring ways to query a struct array in Hive using either the `get_json_object` function or the JSON

Issue with CollectionView not displaying images after JSON parsing

JavaScript - changing object into a string (not functioning properly)

What sets Import apart from require in TypeScript?

In Typescript, what sets apart a generic written before a function compared to after a type declaration?

Getting elements with a distinct number from a JSON array within PostgreSQL

Gson transforms objects into JSON structures similar to Firebase