Map JSON array to objects array

Question

I'm testing with a JSON data mock of this format:

   [
        {
            "_id": "5ea1c3e2f376f7887032bd44",
            "iso6393": "ara",
            "name": "Arabic"
        },
        {
            "_id": "5ea1c3e2f376f7887032bd41",
            "iso6393": "eng",
            "name": "English"
        }
    ]

My Angular code injects it into the Language[] array. I can access the object and have intelligence about the object in my IDE and pre-transpiling failure:

getLanguages(): Promise<Language[]> {
    const url = this.cfgSvc.composeURL(SettingsEnum.LANGS);
    return this.http.get<Language[]>(url).toPromise();
  }

Now, the webservice changed and wraps the JSON into a parent "languages" node:

{
    "languages": [
        {
            "_id": "5ea1c3e2f376f7887032bd44",
            "iso6393": "ara",
            "name": "Arabic"
        },
        {
            "_id": "5ea1c3e2f376f7887032bd41",
            "iso6393": "eng",
            "name": "English"
        }
    ]
}

However, this wont work any more with my code. How can I strip the languages parent node and map the elements to Language[] array again?

I failed to implement it with pipe and map. And I don't want to do it with verbose code and constructors on the Language object.

.then(({ languages }) => languages)? How exactly did you fail to do this with pipe and map? Have you updated the generic type of the response body to { languages: Language[] } so TypeScript can help you out? — jonrsharpe
– jonrsharpe, Commented Apr 24, 2020 at 8:16
Read up on destructuring. That's not specific to requests/Angular/TypeScript/RxJS, it's just (newer) JS syntax. The first step here is to update the generic type you're providing to http.get to reflect the actual shape of the response, the compiler can help to guide you from there. — jonrsharpe
– jonrsharpe, Commented Apr 24, 2020 at 8:56
Do you actually want to change what getLanguages returns a Promise of? My understanding was that you wanted to keep that the same, but the shape of the response was changing. A simplified example compiles just fine: typescriptlang.org/play/…. Otherwise give a minimal reproducible example. — jonrsharpe
– jonrsharpe, Commented Apr 24, 2020 at 11:02
No, thank you. Please edit the question if you still have a problem. — jonrsharpe
– jonrsharpe, Commented Apr 24, 2020 at 11:05

feder · Accepted Answer · 2020-04-25 05:02:25Z

I'd like to share the complete solution, which was led by @jonrsharpe. Thanks. I didn't know about destructuring. That will be part of my daily use now!

getLanguages(): Promise<Language[]> {
    const url = this.cfgSvc.composeURL(SettingsEnum.LANGS);
    return this.http.get<Languages>(url).toPromise().then(
      {languages} => languages);
  }

The arrow function in then receives the result of the get request (response body). Since that is the given variable, one may extract from it whatever you want and assign it to variable after the fat arrow. I my case I want to extract every language node without the root node languages.

({languages}) => languages

Amazingly concise. This can also be written verbose.

({languages: langs}) => { 
     return langs
}

Which results in the stripping of the parent node languages from the json response, entailing merely the array of Languages. In other words, I takes only the value of the languages node.

That's why I would not need to change the Promise<Language[]> generics of the method signature. However - as @jonrsharpe pointed out correctly - one needs to set the receiving generics of the http.get to Languages to represent the incoming structure.

Destructuring... amazing. Here is a solid tutorial about this new feature: https://www.youtube.com/watch?v=NIq3qLaHCIs

Collectives™ on Stack Overflow

Map JSON array to objects array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related