How can i create an Object from an Observable which returns Array of Objects

Question

I have an Observable which pulls some data from a Webservice and returns a Array of Objects back which looks like this.

The observable is created like this

contactFields$: Observable<IServerDropdownOption[]>;
this.contactFields$ = this.mailTemplateService.templateLookup(this.guids.MAIL_TEMPLATE_CONTACT_FIELDS);

Which returns something like this

[
     {value: "{{ first_name | fallback: "" }}", name: "First Name", selected: undefined},
     {value: "{{ last_name | fallback: "" }}", name: "Last Name", selected: undefined}
]

I need to be able to transform this Array of object into a object which will at the end look like this.

{
 "{{ first_name | fallback: "" }}" : "First Name",
 "{{ last_name | fallback: "" }}" : "Last Name"
}

Revised ngOnInit() Code

  ngOnInit() {
    this.contactFields$ = this.mailTemplateService.templateLookup(this.guids.MAIL_TEMPLATE_CONTACT_FIELDS);
    this.contactFields$.subscribe(res => console.log(res));
    this.transformArr();
    this.initForm();
    // Custom button
    FroalaEditor.DefineIcon('my_dropdown', {NAME: 'cog', SVG_KEY: 'cogs'});
    FroalaEditor.RegisterCommand('my_dropdown', {
    title: 'User Fields',
    type: 'dropdown',
    focus: false,
    undo: false,
    refreshAfterCallback: true,
    options: this.result,

    callback(cmd, val) {
        console.log (val);
    },
    // Callback on refresh.
    refresh($btn) {
        console.log ('do refresh');
    },
    // Callback on dropdown show.
    refreshOnShow($btn, $dropdown) {
        console.log ('do refresh when show');
    }
    });

TransformArray Code

transformArr() {
    console.log('Calling Transform');
    this.contactFields$.subscribe(res => {

    this.result = new Object() as { [key: string]: string; };

    for (const each of res) {
        console.log('Looping');
        this.result[each.value] = each.name;
        console.log(this.result);
  }
});
 }

export interface IServerDropdownOption<V = any> { value: V; name: string; selected: boolean; } — MisterniceGuy
– MisterniceGuy, Commented Dec 6, 2019 at 0:57
So after receiving the data, you want to create another observable by transforming the received data, right? — Plochie
– Plochie, Commented Dec 6, 2019 at 0:59
Whatever works best, Originally i used a control which i was able to take the array of objects. The new control requires an Object to get the values for dropdown. So either we create new one or take the original Observable and map the data into object — MisterniceGuy
– MisterniceGuy, Commented Dec 6, 2019 at 1:05

Chris Chen · Accepted Answer · 2019-12-06 01:06:43Z

1

const transformArr = (arr) => {
   let result = {}
   arr.map(each => {
      result[each.value] = each.name;
   })
   return result;
}

Should work based on your description.

Based on your update, you should try to use this function with map operator

this.contactFields$.pipe(map(x => transformArr(x)));
// ...later when you subscribe
this.contactFields$.subscribe(x => console.log(x));

edited Dec 6, 2019 at 1:06

answered Dec 6, 2019 at 0:35

Chris Chen

1,3039 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

MisterniceGuy Over a year ago

How would i use this then with the observable ? i updated the question above to show the actual observable

Chris Chen Over a year ago

Understand the array is attached to this.contactFields$, then you should use map operator rxjs-dev.firebaseapp.com/api/operators/map to transform it.

Plochie · Accepted Answer · 2019-12-06 09:04:29Z

1

I would subscribe to the observable in the required component, rather than using pipe as it will affect your IServerDropdownOption return type.

Component where you have subscribed the observable

contactFields$;
result: { [key: string]: string; };

someFunction() {

    this.contactFields$.subscribe(res => {

      this.result = new Object() as { [key: string]: string; };

      for (const each of res) {
        this.result[each.value.replace('"', '\"')] = each.name;
      }
    });
}

Now you can use result variable wherever required, in your case dropdown values.

edited Dec 6, 2019 at 9:04

answered Dec 6, 2019 at 1:19

Plochie

4,1171 gold badge20 silver badges34 bronze badges

4 Comments

MisterniceGuy Over a year ago

Ok, that code got me somewhat closer but i have 2 issues. I see that we created object from the array but the the first field the key is cut off after the "" i need the key to be the full {{ first_name | fallback: "" }}. Also as the result is empty when my component init it is empty which means i dont get any values is there a way to fix that ?

Plochie Over a year ago

@MisterniceGuy you need to escape the inner ". updated the ans.

MisterniceGuy Over a year ago

When i try manually the object of {'{{ first_name | fallback: \"\" }}': 'First Name'} it still cuts it off at {{ first_name | fallback: . Also i am still have no values in the options because it is assigned the this.result before it has any values

MisterniceGuy Over a year ago

Ok i see it works in your code but it doesn't work in mine.. look at my stackblitz, if you look at the second icon (star), that dropdown should show the list but it doesnt. The console logs the this.result and shows data. stackblitz.com/edit/angular-froala-v3-custombutton-dynamic. Also the issue with the double quote is still present

Collectives™ on Stack Overflow

How can i create an Object from an Observable which returns Array of Objects

2 Answers 2

2 Comments

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Related