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

Experiencing an issue with mui/material grid causing errors

The custom declaration file for the 'react-dates' module could not be located

Can we programmatically extract content from an Instagram page with the URL ending in ?__a=1?

Azure Function: Eliminate duplicate data in JSON from two many-to-many relationships into a single table

using javascript to initiate an ajax request

Module not found

Struggling to determine data type in Typescript

Exploring the world of third-party APIs

Validating a single field name with various DTO types based on conditions in a NestJS application

Instructions for adding a method to a prototype of a generic class in TypeScript

Pug: perform a task depending on the presence of an element within a variable

Instance of "this" is undefined in Typescript class

Having trouble with querying subdocuments in MongoDB? Encountering issues like the error message "Converting

Error message: The ofType method from Angular Redux was not found

Traversing a deeply nested array of objects, comparing it with a separate array of objects

What is the recommended strategy for handling and retrieving std::chrono::duration::milliseconds in cpprest?

Do we need to duplicate structured data when listing nested objects, or is it better to avoid doing so?

Why isn't useEffect recognizing the variable change?

What is the best way to verify that all elements within an object are 'false' except for one that is 'true'?

Javascript: Troubleshooting Unexpected Variable Behavior in HTML Code