Converting nested objects with different lengths into an array of objects

Question

Converting nested objects with different lengths into an array of objects

Hey everyone, I've encountered an interesting problem that I managed to solve. However, my solution is not elegant at all. I'm curious to see what creative solutions others can come up with :)

The challenge involves converting the provided response:

const response = {
        "device": {
            "name": "Foo",
            "type": "Bar",
            "telemetry": [
                {
                    "timeStamp": "2022-06-01T00:00:00.000Z",
                    "temperature": 100,
                    "pressure": 50
                },
                ...
            ]
        }
};

Using these selection criteria:

const fields = ['device/name', 'device/telemetry/timeStamp', 'device/telemetry/temperature']

The goal is to generate results like this:

[
  {"device/name": "Foo", "device/telemetry/timeStamp": "2022-06-01T00:00:00.000Z", "device/telemetry/temperature": 100},
  ...,
]

If you're interested, I'd love to hear your approach! Below is my somewhat messy code - still getting the hang of TypeScript, so bear with me :D

EDIT #1 Clarification: The response format can vary, including deeper levels of nesting or additional arrays like "superTelemetry". However, the selection criteria will only work with one array, never both.

Although the structure may change, we can rely on this rule to guide our implementation. Feel free to share any insights!

function createRecord(key: string, value: any){
  return new Map<string, any>([[key, value]])
}

function getNestedData (data: any, fieldPath: string, records: Map<string, any[]>=new Map<string, any[]>()) {
    let dataPoints: any = [];
    const paths = fieldPath.split('/')
    ...
  }

javascript typescript

Answer 1

Answer №1

It appears that you are seeking a solution to generate the desired output based on the provided information. If so, one approach is to utilize Array.map() in conjunction with the Array.forEach() method.

Here is an example for you to try:

const response = {
  "device": {
    "name": "Foo",
    "type": "Bar",
    "telemetry": [
      {
        "timeStamp": "2022-06-01T00:00:00.000Z",
        "temperature": 100,
        "pressure": 50
      },
      {
        "timeStamp": "2022-06-02T00:00:00.000Z",
        "temperature": 100,
        "pressure": 50
      },
      {
        "timeStamp": "2022-06-03T00:00:00.000Z",
        "temperature": 100,
        "pressure": 50
      },
      {
        "timeStamp": "2022-06-04T00:00:00.000Z",
        "temperature": 100,
        "pressure": 50
      },
      {
        "timeStamp": "2022-06-05T00:00:00.000Z",
        "temperature": 100,
        "pressure": 50
      }
    ]
  }
};

const fields = ['device/name', 'device/telemetry/timeStamp', 'device/telemetry/temperature'];

const res = response.device.telemetry.map(obj => {
  const o = {};
  fields.forEach(item => {
    const splittedItem = item.split('/');
    o[item] = (splittedItem.length === 2) ? response[splittedItem[0]][splittedItem[1]] : obj[splittedItem[2]];
  });
  return o;
})

console.log(res);

Answer 2

It appears that you are seeking a solution to generate the desired output based on the provided information. If so, one approach is to utilize Array.map() in conjunction with the Array.forEach() method.

Here is an example for you to try:

const response = {
  "device": {
    "name": "Foo",
    "type": "Bar",
    "telemetry": [
      {
        "timeStamp": "2022-06-01T00:00:00.000Z",
        "temperature": 100,
        "pressure": 50
      },
      {
        "timeStamp": "2022-06-02T00:00:00.000Z",
        "temperature": 100,
        "pressure": 50
      },
      {
        "timeStamp": "2022-06-03T00:00:00.000Z",
        "temperature": 100,
        "pressure": 50
      },
      {
        "timeStamp": "2022-06-04T00:00:00.000Z",
        "temperature": 100,
        "pressure": 50
      },
      {
        "timeStamp": "2022-06-05T00:00:00.000Z",
        "temperature": 100,
        "pressure": 50
      }
    ]
  }
};

const fields = ['device/name', 'device/telemetry/timeStamp', 'device/telemetry/temperature'];

const res = response.device.telemetry.map(obj => {
  const o = {};
  fields.forEach(item => {
    const splittedItem = item.split('/');
    o[item] = (splittedItem.length === 2) ? response[splittedItem[0]][splittedItem[1]] : obj[splittedItem[2]];
  });
  return o;
})

console.log(res);

Answer 3

Answer №2

My main focus will be on the implementation and runtime behavior, rather than the types involved. I have intentionally used loose typings like any and string instead of more specific generic object types. Here's a breakdown of the logic:

function getNestedFields(data: any, paths: string[]): any[] {

If the input data is an array, we need to apply the getNestedFields() function recursively to each element of the array and then combine all the results into a single array. This involves checking for an array and making a recursive call:

  if (Array.isArray(data)) return data.flatMap(v => getNestedFields(v, paths));

When data is not an array, our goal is to gather the required information. For example, with paths like

['foo/bar', 'foo/baz/qux', 'x/y', 'x/z']

, we make recursive calls to

getNestedFields(data.foo, ["bar", "baz/qux"])

and

getNestedFields(data.x, ["y", "z"])

. To achieve this, we split each path element at the first slash "/" and store the results in a new object structure where keys are before the slash and values are after it.

There are some edge cases to consider here. For paths without slashes, resulting in an empty value such as ["foo"], we handle them by calling

getNestedFields(data.foo, [""])

. Additionally, when a path is just an empty string "", indicating the base case for data itself, we handle it by directly returning [{"": data}] instead of another recursive call.

The structure looks something like this:

  const pathMappings: Record<string, string[]> = {};
  let emptyPathInList = false;
  paths.forEach(path => {
    if (!path) {
      emptyPathInList = true;
    } else {
      let slashIdx = path.indexOf("/");
      if (slashIdx < 0) slashIdx = path.length;
      const key = path.substring(0, slashIdx);
      const restOfPath = path.substring(slashIdx + 1);
      if (!(key in pathMappings)) pathMappings[key] = [];
      pathMappings[key].push(restOfPath);
    }
  })

For each entry in pathMappings (with keys and corresponding values), we perform recursive calls to getNestedFields(). The nested fields obtained have relative keys to data[key], which require modification by adding key and a slash as prefixes. Handling special cases like empty paths or nullish data to prevent runtime errors adds complexity to this step.

  const subentries = Object.entries(pathMappings).map(([key, restsOfPath]) =>
    (data == null) ? [{}] : // <-- Handle nullish data
      getNestedFields(data[key], restsOfPath)
        .map(nestedFields =>
          Object.fromEntries(Object.entries(nestedFields)
            .map(([path, value]) =>
              [key + (path ? "/" : "") + path, value])))
  )

After obtaining all sub-entries with modified keys, we may include an additional entry corresponding to data in cases where emptyPathInList is true. Finally, combining these sub-entries using the Cartesian product method allows us to create a unified object structure for each entry.

  return subentries.reduce((a, v) => v.flatMap(vi => a.map(ai => ({ ...ai, ...vi }))), [{}])
}

Testing the functionality reveals accurate results for both basic and complex scenarios, showcasing support even for different arrays being traversed within the function.

Answer 4

My main focus will be on the implementation and runtime behavior, rather than the types involved. I have intentionally used loose typings like any and string instead of more specific generic object types. Here's a breakdown of the logic:

function getNestedFields(data: any, paths: string[]): any[] {

If the input data is an array, we need to apply the getNestedFields() function recursively to each element of the array and then combine all the results into a single array. This involves checking for an array and making a recursive call:

  if (Array.isArray(data)) return data.flatMap(v => getNestedFields(v, paths));

When data is not an array, our goal is to gather the required information. For example, with paths like

['foo/bar', 'foo/baz/qux', 'x/y', 'x/z']

, we make recursive calls to

getNestedFields(data.foo, ["bar", "baz/qux"])

and

getNestedFields(data.x, ["y", "z"])

. To achieve this, we split each path element at the first slash "/" and store the results in a new object structure where keys are before the slash and values are after it.

There are some edge cases to consider here. For paths without slashes, resulting in an empty value such as ["foo"], we handle them by calling

getNestedFields(data.foo, [""])

. Additionally, when a path is just an empty string "", indicating the base case for data itself, we handle it by directly returning [{"": data}] instead of another recursive call.

The structure looks something like this:

  const pathMappings: Record<string, string[]> = {};
  let emptyPathInList = false;
  paths.forEach(path => {
    if (!path) {
      emptyPathInList = true;
    } else {
      let slashIdx = path.indexOf("/");
      if (slashIdx < 0) slashIdx = path.length;
      const key = path.substring(0, slashIdx);
      const restOfPath = path.substring(slashIdx + 1);
      if (!(key in pathMappings)) pathMappings[key] = [];
      pathMappings[key].push(restOfPath);
    }
  })

For each entry in pathMappings (with keys and corresponding values), we perform recursive calls to getNestedFields(). The nested fields obtained have relative keys to data[key], which require modification by adding key and a slash as prefixes. Handling special cases like empty paths or nullish data to prevent runtime errors adds complexity to this step.

  const subentries = Object.entries(pathMappings).map(([key, restsOfPath]) =>
    (data == null) ? [{}] : // <-- Handle nullish data
      getNestedFields(data[key], restsOfPath)
        .map(nestedFields =>
          Object.fromEntries(Object.entries(nestedFields)
            .map(([path, value]) =>
              [key + (path ? "/" : "") + path, value])))
  )

After obtaining all sub-entries with modified keys, we may include an additional entry corresponding to data in cases where emptyPathInList is true. Finally, combining these sub-entries using the Cartesian product method allows us to create a unified object structure for each entry.

  return subentries.reduce((a, v) => v.flatMap(vi => a.map(ai => ({ ...ai, ...vi }))), [{}])
}

Testing the functionality reveals accurate results for both basic and complex scenarios, showcasing support even for different arrays being traversed within the function.

Converting nested objects with different lengths into an array of objects

Answer №1

Answer №2

Similar questions

Enhance autocomplete suggestions by including supplementary information

What is the best way to change JSON into a string format?

Selecting and Uploading Multiple Files in Internet Explorer (less than version 9)

How to animate the needle image in a speedometer using jQuery

Using AJAX to upload an image and passing multiple parameters

Embarking on the GSAP journey

Issue 2339: Dealing with || and Union Types

Utilizing *ngIf for Showing Elements Once Data is Completely Loaded

Tips for targeting a specific div element within a webview using code in Android app development

Developing a Node.js API using Express and MySQL involves utilizing the WHERE IN clause and binding parameters with multiple comma-separated values

Favicon glitch occurred following the inclusion of Google Adsense

Tips on implementing href within HTML span tags while utilizing TSX syntax

Insert a new key/value pair into a designated object in Javascript

Utilizing Vue3: A guide to constructing an API URL and retrieving data upon route modification

Cypress has the ability to exclude certain elements from its testing

Expanding material UI theme choices through module augmentation is currently ineffective with TypeText

The Intellisense feature does not function properly when attempting to import the module from a Content Delivery Network in Visual Studio Code

Troubleshooting Firebase: How come my code is only accessing the initial document in my Collection?

Creating a Custom Select Option Component with Ant Design Library

Using TypeScript to Limit the Generic Type Parameter Passed into a Function