Overhauling JSON Data Output in Angular Version 2 and beyond

Question

Overhauling JSON Data Output in Angular Version 2 and beyond

Currently, I am dealing with a complex web API JSON response that contains nested data. I would like to simplify the structure by extracting only the necessary information.

How can I achieve this using Angular 2+/Typescript?

I would greatly appreciate any guidance.

Imagine I have the following data:

"O1": {
    "P1": "Something",
    "A1": [{
       "P2": "Something",
       "A2": [{
         "P3": "Something"
        }]
    }],
    "P4": "Something"
}

and my goal is to restructure it as follows:

"O1": {
    "P1": "Something",
    "P2": "Something",
    "P3": "Something"
}

Is it possible to reconstruct the model within a class constructor? I haven't had any luck finding relevant resources online so far.

Please let me know if you need more information from me.

Thank you.

json angular typescript

Answer 1

Answer №1

We can utilize a method to flatten the original object based on a suggested code snippet. Following that, we can refine our selection by filtering out specific properties for inclusion in the finalized object:

 function filterObj(obj: any, propsForFilter: string[]) {
  const result = {};
  for (let prop in obj) {
    const filteredProp = propsForFilter.find(p => prop.includes(p));
    if (filteredProp) {
      result[filteredProp] = obj[prop];
    }
  }
  return result;
}
const flattened = flattenObject(obj);
console.log(flattened, filterObj(flattened, ['P1', 'P2']));

The filterObj function allows for specifying an array of properties to be included in the final outcome. I trust this approach proves beneficial to your requirements.

Answer 2

We can utilize a method to flatten the original object based on a suggested code snippet. Following that, we can refine our selection by filtering out specific properties for inclusion in the finalized object:

 function filterObj(obj: any, propsForFilter: string[]) {
  const result = {};
  for (let prop in obj) {
    const filteredProp = propsForFilter.find(p => prop.includes(p));
    if (filteredProp) {
      result[filteredProp] = obj[prop];
    }
  }
  return result;
}
const flattened = flattenObject(obj);
console.log(flattened, filterObj(flattened, ['P1', 'P2']));

The filterObj function allows for specifying an array of properties to be included in the final outcome. I trust this approach proves beneficial to your requirements.

Answer 3

Answer №2

Just stumbled upon this code snippet on GitHub: https://gist.github.com/penguinboy/762197

function convertObjectToFlat(ob) {
    let flatObj = {};

    for (let key in ob) {
        if (!ob.hasOwnProperty(key)) continue;

        if ((typeof ob[key]) === 'object') {
            let nestedFlatObj = convertObjectToFlat(ob[key]);
        
            for (let nestedKey in nestedFlatObj) {
                if (!nestedFlatObj.hasOwnProperty(nestedKey)) continue;

                flatObj[key + '.' + nestedKey] = nestedFlatObj[nestedKey];
            }
        } else {
            flatObj[key] = ob[key];
        }
    }
    
    return flatObj;
}

Answer 4

Just stumbled upon this code snippet on GitHub: https://gist.github.com/penguinboy/762197

function convertObjectToFlat(ob) {
    let flatObj = {};

    for (let key in ob) {
        if (!ob.hasOwnProperty(key)) continue;

        if ((typeof ob[key]) === 'object') {
            let nestedFlatObj = convertObjectToFlat(ob[key]);
        
            for (let nestedKey in nestedFlatObj) {
                if (!nestedFlatObj.hasOwnProperty(nestedKey)) continue;

                flatObj[key + '.' + nestedKey] = nestedFlatObj[nestedKey];
            }
        } else {
            flatObj[key] = ob[key];
        }
    }
    
    return flatObj;
}

Overhauling JSON Data Output in Angular Version 2 and beyond

Answer №1

Answer №2

Similar questions

Chart Subscription Established but Alerts Not Being Dispatched

Prepending the emulated prefix to Angular 6-7 ViewEncapsulation

Extract information from a complex nested structure within an array

Protected class, yet not transferable

Setting up the cypress-grep plugin version 3.1.0 on Cypress v11.01: A Step-by-Step Guide

Having trouble launching my angular application in the development environment

Parsing JSON data with white space in resource objects

How to effectively utilize JSON responses with jQuery Mobile?

Sending an Ajax request with JSON data to a PHP script to receive multiple values in

Angular: Incorporating a custom validation function into the controller - Techniques for accessing the 'this' keyword

Leveraging Cereal for parsing a JSON string

What is the relationship between an odd number and the value 1 in JavaScript that results in a 'true' outcome?

The guard check may not be enough to prevent the object from being null

Deleting and inserting an element in the Document Object Model

Creating a model and assigning values in TypeScript

angular contains vulnerabilities of a moderate severity level

the value of properrty becomes undefined upon loading

Steps for writing code to append and execute code snippets using values from a JSON dataset

npm is asking for a peer to be installed, but none was found

I'm having trouble viewing the unique Google Map design on my application