Transform a collection of objects into instances of a class

Question

Transform a collection of objects into instances of a class

I have a scenario where I am fetching an array of objects from PHP and my goal is to transform this data into instances of a class called ContentData.

The current solution that I have seems to work fine, but deep down I sense that there might be a more elegant way to achieve the same outcome.

return this.http.post("get-content.php", urlParams)
.map(this.extractData)
.map(array => {
    let newArray = Array<ContentData>();
    array.forEach(obj => {
        newArray.push(new ContentData().deserialize(obj));
    });
    return newArray;
})
.catch(this.handleError)

private extractData(res: Response): any {
    return res.json();
}

Is there a more efficient method rather than looping through the array data in this manner?

The response received from PHP looks like this:

[
{"id":"1","dock_id":"46","type":"TEXT","content":"{\"text\": \"<p>test<\/p>\"}","last_updated":"2017-08-09 03:10:28","json":null},
{"id":"2","dock_id":"46","type":"TEXT","content":"{\"text\": \"<p>test test<\/p>\"}","last_updated":"2017-08-09 03:10:28","json":null}
]

The desired output should be [ContentData, ContentData, ...] (a flat 1D array).

(2) [ContentData, ContentData]
0 : ContentData {content: "{"text": "<p>test</p>"}", dock_id: "46", type: 0, last_updated: "2017-08-09 03:10:28"}
1 : ContentData {content: "{"text": "<p>test test</p>"}", dock_id: "46", type: 0, last_updated: "2017-08-09 03:10:28"}
length : 2

angular typescript ecmascript-6

Answer 1

Answer №1

If I interpret your code correctly, there are multiple ways to enhance it:

Employing async functions for a more linear code structure
Utilizing .map() instead of using loops and pushing elements

An example implementation could look like this:

public async fetchAndProcess(/* arguments */) {
  try {
    const response = await this.http.post("get-content.php", urlParams); // Assuming fetch
    const jsonData = await response.json();
    return result = jsonData.map(item => new ContentData().deserialize(item));
  } catch (error) { this.handleError(error); }
}

Additionally, I recommend either creating a static method like ContentData.fromSerialized() or adjusting the constructor of ContentData to accept item. However, this falls more into the realm of code styling.

Answer 2

If I interpret your code correctly, there are multiple ways to enhance it:

Employing async functions for a more linear code structure
Utilizing .map() instead of using loops and pushing elements

An example implementation could look like this:

public async fetchAndProcess(/* arguments */) {
  try {
    const response = await this.http.post("get-content.php", urlParams); // Assuming fetch
    const jsonData = await response.json();
    return result = jsonData.map(item => new ContentData().deserialize(item));
  } catch (error) { this.handleError(error); }
}

Additionally, I recommend either creating a static method like ContentData.fromSerialized() or adjusting the constructor of ContentData to accept item. However, this falls more into the realm of code styling.

Transform a collection of objects into instances of a class

Answer №1

Similar questions

Leveraging components from external modules within sub-modules

Is there a way to retrieve the anticipated DOM structure prior to the initialization of the view?

Retrieve upcoming route details within canDeactivate guard in the updated Angular2 router

Typescript sometimes struggles to definitively determine whether a property is null or not

Implementing an overlay feature upon clicking a menu item - here's how!

parsing a TypeScript query

What is the best way to reference typescript files without using absolute paths?

The import component path in Angular 4/TypeScript is not being recognized, even though it appears to be valid and functional

Angular Dialog Component: Passing and Populating an Array with Mat-Dialog

The absence of color gradations in the TypeScript definition of MUI5 createTheme is worth noting

The functionality of PrimeNg TabView does not support observables

A guide on using tsc to build a local package

Leveraging Apostrophe CMS for building a decoupled single page application

Separate configurations for Webpack (Client and Server) to run an Express app without serving HTML files

Customize button appearance within mat-menu in Angular versions 2 and above

Is it possible to consistently show the placeholder in mat-select regardless of the item currently selected?

ES6 import of CSS file results in string output instead of object

substitute one item with a different item

Encountering a Nextjs hydration issue after switching languages

The issue of resolving NestJs ParseEnumPipe