Retrieve the complete paths for the keys within a deeply nested object in real-time

Question

Retrieve the complete paths for the keys within a deeply nested object in real-time

Trying to dynamically retrieve the keys of a nested object is proving to be quite challenging. Take for instance this sample object:

{
    ts: "2021-05-06T11:06:18Z",
    pr: 94665,
    pm25: 5,
    co2: 1605,
    hm: 32,
    m: {
      isConnected: true,
      wifidBm: 0,
    },
    pm1: 5,
    s: {
      "0": {
        runningTime: 0,
        sn: "05064906137109790000",
        wearRate: 0,
        enabled: true,
        co2: 1605,
      },
      "1": {
        enabled: false,
        sn: "125630092251006",
      },
      "2": {
        enabled: false,
        sn: "05064906137109450000",
      },
      "3": {
        fanStatus: 0,
        pm25: 5,
        pm1: "5",
        e: {
          rawSensorError: 0,
        },
        pm10: 5,
        runningTime: 0,
        sn: "125630100924141",
        wearRate: 0,
        enabled: true,
      },
    },
    id: "avo_jggv6bsf211",
    tp: "20.6",
    pm10: 5,
    type: "monitor",
  }

An example of the desired output would be:

str = 'ts, pr, pm25, co2, hm, "m.isConnected, m. wifiBm, pm1, s.0.runningTime, s.0.sn, ...'

The current code snippet in use:

guessHeader(object: MeasurementModel | any, parentKey?: string): string[] {
    // Looping on object's keys
    Object.keys(object).forEach(key => {
      if (typeof object[key] === 'object' && key !== 'ts') {
        // If the object is an array recurse in it
        return this.guessHeader(object[key], key)
      } else {
        // If we have a parentKey keep header as
        if (parentKey)
          this.header.push(`${parentKey}.${key}`)
        else
          this.header.push(key)
      }
    })
    return this.header
  }

While it works for the key "m," providing "m.isConnected" and "m.wifiBm," there are issues with keys like "s.0.runningTime," where only "0.runningTime" is returned. Given that the object structure may change and become even more complex, it is crucial to find a solution that accommodates all scenarios. Attempts to save the keys in an array for later parsing have thus far been unsuccessful.

javascript typescript object data-structures

Answer 1

Answer №1

The problem lies right here:

// If the object is an array, iterate through it
return this.guessHeader(object[key], key)

Instead, it should be:

this.header.push(...this.guessHeader(object[key], parentKey === undefined ? key : `${parentKey}.${key}`))

It's worth noting that typeof null === 'object', so ensure to check if object[key] is not null (e.g.

typeof object[key] === 'object' && object[key]

) before passing it to guessHeader.

Additionally, MeasurementModel | any is equivalent to any. It's better to avoid using any and follow this advice from using unknown instead, as it provides type safety.

An example implementation of guessHeader could resemble the following code snippet:

guessHeader(object: object, parentKey?: string): string[] {
  Object.keys(object).forEach(key => {
    const newKey = parentKey === undefined ? key : `${parentKey}.${key}`
    const value = (object as Record<string, unknown>)[key]
    if (typeof value === 'object' && value && key !== 'ts')
      this.header.push(...this.guessHeader(value, newKey))
    else
      this.header.push(newKey)
  })
  return this.header
}

Personally, leveraging Object.entries and adopting a method like shown below might prove advantageous:

const guessHeader = (object: object, acc = ''): string =>
  Object.entries(object)
    .map(([key, value]: [string, unknown]) =>
      // To prevent recursion into the ts key,
      // compared for key !== 'ts'
      // Speculating that ts could be associated with Date; you could exclude recursion into all Dates by validating
      // typeof value == 'object' && value && !(value instanceof Date)
      key !== 'ts' && typeof value === 'object' && value
        ? guessHeader(value, `${acc}${key}.`)
        : acc + key
    )
    .join(', ')

const input = {ts: '2021-05-06T11:06:18Z', pr: 94665, pm25: 5, co2: 1605, hm: 32, m: {isConnected: true, wifidBm: 0}, pm1: 5, s: {0: {runningTime: 0, sn: '05064906137109790000', wearRate: 0, enabled: true, co2: 1605}, 1: {enabled: false, sn: '125630092251006'}, 2: {enabled: false, sn: '05064906137109450000'}, 3: {fanStatus: 0, pm25: 5, pm1: '5', e: {rawSensorError: 0}, pm10: 5, runningTime: 0, sn: '125630100924141', wearRate: 0, enabled: true}}, id: 'avo_jggv6bsf211', tp: '20.6', pm10: 5, type: 'monitor'}

// same as above code block
const guessHeader = (object, acc = '') => Object.entries(object).map(([key, value]) => key !== 'ts' && typeof value === 'object' && value ? guessHeader(value, `${acc}${key}.`) : acc + key).join(', ')

console.log(guessHeader(input))

Answer 2

The problem lies right here:

// If the object is an array, iterate through it
return this.guessHeader(object[key], key)

Instead, it should be:

this.header.push(...this.guessHeader(object[key], parentKey === undefined ? key : `${parentKey}.${key}`))

It's worth noting that typeof null === 'object', so ensure to check if object[key] is not null (e.g.

typeof object[key] === 'object' && object[key]

) before passing it to guessHeader.

Additionally, MeasurementModel | any is equivalent to any. It's better to avoid using any and follow this advice from using unknown instead, as it provides type safety.

An example implementation of guessHeader could resemble the following code snippet:

guessHeader(object: object, parentKey?: string): string[] {
  Object.keys(object).forEach(key => {
    const newKey = parentKey === undefined ? key : `${parentKey}.${key}`
    const value = (object as Record<string, unknown>)[key]
    if (typeof value === 'object' && value && key !== 'ts')
      this.header.push(...this.guessHeader(value, newKey))
    else
      this.header.push(newKey)
  })
  return this.header
}

Personally, leveraging Object.entries and adopting a method like shown below might prove advantageous:

const guessHeader = (object: object, acc = ''): string =>
  Object.entries(object)
    .map(([key, value]: [string, unknown]) =>
      // To prevent recursion into the ts key,
      // compared for key !== 'ts'
      // Speculating that ts could be associated with Date; you could exclude recursion into all Dates by validating
      // typeof value == 'object' && value && !(value instanceof Date)
      key !== 'ts' && typeof value === 'object' && value
        ? guessHeader(value, `${acc}${key}.`)
        : acc + key
    )
    .join(', ')

const input = {ts: '2021-05-06T11:06:18Z', pr: 94665, pm25: 5, co2: 1605, hm: 32, m: {isConnected: true, wifidBm: 0}, pm1: 5, s: {0: {runningTime: 0, sn: '05064906137109790000', wearRate: 0, enabled: true, co2: 1605}, 1: {enabled: false, sn: '125630092251006'}, 2: {enabled: false, sn: '05064906137109450000'}, 3: {fanStatus: 0, pm25: 5, pm1: '5', e: {rawSensorError: 0}, pm10: 5, runningTime: 0, sn: '125630100924141', wearRate: 0, enabled: true}}, id: 'avo_jggv6bsf211', tp: '20.6', pm10: 5, type: 'monitor'}

// same as above code block
const guessHeader = (object, acc = '') => Object.entries(object).map(([key, value]) => key !== 'ts' && typeof value === 'object' && value ? guessHeader(value, `${acc}${key}.`) : acc + key).join(', ')

console.log(guessHeader(input))

Retrieve the complete paths for the keys within a deeply nested object in real-time

Answer №1

Similar questions

Replace the value of a react-text attribute using an external JavaScript file

Is it beneficial to utilize jQuery ahead of the script inclusions?

Error encountered with Firebase when integrating Firestore into a NextJS application

React-beautiful-dnd does not function properly when used with the overflow auto property

Issue with JavaScript variables (I presume) - there seems to be a conflict when one variable is used alongside another

Tips for transferring a variable from Next.js to a plain JavaScript file

Dealing with Restangular errors: a guide on sending a custom object to a controller unaware of Restangular

Error encountered while utilizing Array.find with a specific data type

Having trouble figuring out what is causing non-serializable error in Redux (Redux error)

The Ajax response is not providing the expected HTML object in jQuery

How can I prevent Chrome from constantly prompting for permission to access the camera?

Is there a secure method to create a Bitcoin private key directly through a web browser?

Guide to including configuration settings in locals for Sails.js

Executing form validation upon submission of a form from the view in BackboneJS

sending the express application to the route modules

When is the AbortSignal in the TanStack useQuery function considered as undefined?

Combining various data entries within a unified form

Error encountered when trying to generate a collection from JSON using Backbone framework

Steps to Transform String Array into Prisma Query Select Statement

Trick to trigger a redraw in reactJS?