Reorganizing JSON structures by incorporating unique identifiers into nested elements

Question

Reorganizing JSON structures by incorporating unique identifiers into nested elements

I am working on restructuring an incoming JSON object to utilize in a React component.

The JSON data that I'm receiving is stored in jsonData. This is the current structure of my code:

const jsonData = {
  "Jonas": {
    "position": "CTO",
    "employees": [{
      "Sophie": {
        "position": "VP Engineering",
        "employees": [{
            "Nick": {
              "position": "Team Lead",
              "employees": [{
                  "Pete": {
                    "position": "Backend Engineer",
                    "employees": []
                  }
                },
                {
                  "Barbara": {
                    "position": "Fronted Engineer",
                    "employees": []
                  }
                }
              ]
            }
          },
          {
            "Melissa": {
              "position": "Product Manager",
              "employees": []
            }
          }
        ]
      }
    }]
  }
}

const userList = [jsonData]

const formatData = list =>
  list.map(item => {
    let name, position, employees
    for (let key in item) {
      name = key
      position = item[key].position
      employees = item[key].employees ? item[key].employees : []
    }

    return {
      name,
      position,
      employees: employees ? formatData(employees) : employees
    }
  })

console.log(formatData(userList))

I am attempting to assign a new id to each object and transform the jsonData into an array. The desired output should include the following -

[
  {
    "id": 0,
    "name": "Jonas",
    "position": "CTO",
    "employees": [
      {
        "id": 1,
        "name": "Sophie",
        "position": "VP Engineering",
        "employees": [
          {
            "id": 2,
            "name": "Nick",
            "position": "Team Lead",
            "employees": [
              {
                "id": 3,
                "name": "Pete",
                "position": "Backend Engineer",
                "employees": []
              },
              {
                "id": 4,
                "name": "Barbara",
                "position": "Frontend Engineer",
                "employees": []
              }
            ]
          },
          {
            "id": 5,
            "name": "Melissa",
            "position": "Product Manager",
            "employees": []
          }
        ]
      }
    ]
  }
]

How can I incorporate an id for each object in the generated output?

javascript json

Answer 1

Answer №1

If you're looking to transform data using JavaScript, one approach is to utilize Object.assign along with a closure that maintains a counter for the unique identifiers.

function processData(input) {
    const processItem = obj => (name => Object.assign(
        { id: id++, name },
        obj[name],
        { children: obj[name].children.map(processItem)
    }))(Object.keys(obj)[0]);

    var id = 0;
    return processItem(input);
}

var initialData = { Alice: { role: "Manager", children: [{ Bob: { role: "Developer", children: [{ Charlie: { role: "Designer", children: [] } }] }, { Diana: { role: "Marketer", children: [] } }] } };
var processedResult = processData(initialData);

console.log(processedResult);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

If you're looking to transform data using JavaScript, one approach is to utilize Object.assign along with a closure that maintains a counter for the unique identifiers.

function processData(input) {
    const processItem = obj => (name => Object.assign(
        { id: id++, name },
        obj[name],
        { children: obj[name].children.map(processItem)
    }))(Object.keys(obj)[0]);

    var id = 0;
    return processItem(input);
}

var initialData = { Alice: { role: "Manager", children: [{ Bob: { role: "Developer", children: [{ Charlie: { role: "Designer", children: [] } }] }, { Diana: { role: "Marketer", children: [] } }] } };
var processedResult = processData(initialData);

console.log(processedResult);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 3

Answer №2

One way to dynamically generate IDs is by creating a variable called id and incrementing it inside a loop.

const jsonData = {
  "Jonas": {
    "position": "CTO",
    "employees": [{
      "Sophie": {
        "position": "VP Engineering",
        "employees": [{
            "Nick": {
              "position": "Team Lead",
              "employees": [{
                  "Pete": {
                    "position": "Backend Engineer",
                    "employees": []
                  }
                },
                {
                  "Barbara": {
                    "position": "Fronted Engineer",
                    "employees": []
                  }
                }
              ]
            }
          },
          {
            "Melissa": {
              "position": "Product Manager",
              "employees": []
            }
          }
        ]
      }
    }]
  }
}

const userList = [jsonData]
var id=-1;
const formatData = list =>
  list.map(item => {
    let name, position, employees
    for (let key in item) {
      name = key
      position = item[key].position
      employees = item[key].employees ? item[key].employees : []
    }
   id=id+1;
    return {
      id,
      name,
      position,
      employees: employees ? formatData(employees) : employees
    }
     
  })

console.log(formatData(userList))

Answer 4

One way to dynamically generate IDs is by creating a variable called id and incrementing it inside a loop.

const jsonData = {
  "Jonas": {
    "position": "CTO",
    "employees": [{
      "Sophie": {
        "position": "VP Engineering",
        "employees": [{
            "Nick": {
              "position": "Team Lead",
              "employees": [{
                  "Pete": {
                    "position": "Backend Engineer",
                    "employees": []
                  }
                },
                {
                  "Barbara": {
                    "position": "Fronted Engineer",
                    "employees": []
                  }
                }
              ]
            }
          },
          {
            "Melissa": {
              "position": "Product Manager",
              "employees": []
            }
          }
        ]
      }
    }]
  }
}

const userList = [jsonData]
var id=-1;
const formatData = list =>
  list.map(item => {
    let name, position, employees
    for (let key in item) {
      name = key
      position = item[key].position
      employees = item[key].employees ? item[key].employees : []
    }
   id=id+1;
    return {
      id,
      name,
      position,
      employees: employees ? formatData(employees) : employees
    }
     
  })

console.log(formatData(userList))

Answer 5

Answer №3

This method offers a more efficient and organized approach to handling nested arrays of employees.

const companyData = {
  "CEO": {
    "name": "Alice",
    "employees": [{
      "CTO": {
        "name": "Bob",
        "employees": [{
          "Team Lead": {
            "name": "Charlie",
            "employees": [{
              "Developer": {
                "name": "David",
                "employees": []
              }
            },
            {
              "Designer": {
                "name": "Eve",
                "employees": []
              }
            }
            ]
          }
        },
        {
          "Product Manager": {
            "name": "Frank",
            "employees": []
          }
        }
        ]
      }
    }]
  }
}

const employeeList = [companyData]

const reformatData = list => {

  updateEmployeeIds(list, 0, list.length)
  return list
}

const updateEmployeeIds = (item, count, parentNumber) => {
  if (item && Array.isArray(item)) {
    item.map((value, index) => {
      updateEmployeeIds(value, count + index, item.length)
    })
  } else if (item) {
    Object.keys(item).map(key => {
      let value = item[key]
      item.id = count
      item.name = key
      if (value.name) {
        item.name = value.name
      }
      if (value.employees) {
        item.employees = value.employees
      }
      delete item[key]
      if (item.employees) {
        updateEmployeeIds(item.employees, count + parentNumber)
      }
    })
  }
}

console.log(reformatData(employeeList))

Answer 6

This method offers a more efficient and organized approach to handling nested arrays of employees.

const companyData = {
  "CEO": {
    "name": "Alice",
    "employees": [{
      "CTO": {
        "name": "Bob",
        "employees": [{
          "Team Lead": {
            "name": "Charlie",
            "employees": [{
              "Developer": {
                "name": "David",
                "employees": []
              }
            },
            {
              "Designer": {
                "name": "Eve",
                "employees": []
              }
            }
            ]
          }
        },
        {
          "Product Manager": {
            "name": "Frank",
            "employees": []
          }
        }
        ]
      }
    }]
  }
}

const employeeList = [companyData]

const reformatData = list => {

  updateEmployeeIds(list, 0, list.length)
  return list
}

const updateEmployeeIds = (item, count, parentNumber) => {
  if (item && Array.isArray(item)) {
    item.map((value, index) => {
      updateEmployeeIds(value, count + index, item.length)
    })
  } else if (item) {
    Object.keys(item).map(key => {
      let value = item[key]
      item.id = count
      item.name = key
      if (value.name) {
        item.name = value.name
      }
      if (value.employees) {
        item.employees = value.employees
      }
      delete item[key]
      if (item.employees) {
        updateEmployeeIds(item.employees, count + parentNumber)
      }
    })
  }
}

console.log(reformatData(employeeList))

Reorganizing JSON structures by incorporating unique identifiers into nested elements

Answer №1

Answer №2

Answer №3

Similar questions

Fetching various data from MongoDB using NodeJS and presenting it in Jade(Pug) template

Having trouble turning off a multi-select drop down option

Problem with Safari: File downloaded with name "Unknown" due to Javascript issue

Retrieving the link to share for every video located in the Dropbox folder

Stop the event propagation when the back button is clicked

OBJ Raycasting in Three.js

What are the steps to integrate dynamic data into chartjs?

What could be causing the npm install command to not save packages in the /node_modules directory?

Functionality of jQuery Mobile Page

Place a Three.js scene within a jQuery modal dialogue box

When adding files through drag and drop, the FormData is including a blank file field in the sent

What are the pros and cons of using a piped connection for Puppeteer instead of a websocket?

JavaScript => Compare elements in an array based on their respective dates

The Java Optional class can be used to handle null JSON fields

What is the best way to simulate a constructor-created class instance in jest?

What is the best way to handle AJAX or XHR post requests in ExpressJs when JSON data is passed from the front-end to the back-end?

What are the advantages of polymer's inter-component data binding?

Dawn Break Alarm Timepiece - Online Platform

Tips for creating a personalized dialog box after logging in with React Admin based on the server's response

"Experiencing a problem with Next.js 13 where the User Context is not functioning properly outside of _app