Angular Observable returns Subscriber instead of JSON

Question

I have a function

async submit(form) {
    const selectedPackage = await this.packages.toPromise().then(result => {
    result.forEach(element => {
        if (element._id === form.package) {
            return element;
        }
     });
    });   


    const selectedCompany = await this.companies.toPromise().then(result => {
      result.forEach(company => {
        if (company._id === form.company) {
                return company;
            }
      });
    });

    console.log(selectedPackage);
    console.log(selectedCompany);

it returns :

Subscriber {closed: false, _parent: null, _parents: null, _subscriptions: Array(1), syncErrorValue: null, …}closed: truedestination: SafeSubscriber {closed: true, _parent: null, _parents: null, _subscriptions: null, syncErrorValue: null, …}isStopped: truesyncErrorThrowable: falsesyncErrorThrown: falsesyncErrorValue: null_parent: null_parents: null_subscriptions: null__proto__: Subscription addCredit-c.ts:76
Subscriber {closed: false, _parent: null, _parents: null, _subscriptions: Array(1), syncErrorValue: null, …}

Now, what I want is to get the selected package as JSON format from packages list, but it returns Subscriber

The same thing goes for the company.

Any idea how to solve this problem?

Fabio Carpinato · Accepted Answer · 2017-11-06T11:04:54.810

2

You are getting the subscription in the assignment, to get the value you should do something like.

let selectedPackage;
await this.packages.subscribe(result => {
    result.forEach(element => {
        if (element._id === form.package) {
            selectedPackage = element;
        }
     });
    });

UPDATE

This code actually works but when you console.log the values you are not sure that the subscription has already setted the value into the variable, so you need to convert the observable into a promise so that you can continue using the async-await keywords and be sure that you have the value at the console.log time

const p = this.packages.toPromise(); 
let selectedPackage; 
await p.then(result => { 
 result.forEach(element => { 
  if (element._id === form.package) { 
   console.log('debgu'); 
   selectedPackage = element; 
  } 
 }); 
});

edited Nov 06 '17 at 11:04

answered Nov 06 '17 at 10:18

Fabio Carpinato

1,121
6
13

It returns `undefined` – Nimatullah Razmjo Nov 06 '17 at 10:24
Maybe you are missing something else, you are pushing data into the observable? – Fabio Carpinato Nov 06 '17 at 10:27
Yes, It is observable. – Nimatullah Razmjo Nov 06 '17 at 10:28
I mean, are sure that you are emitting data into the observable? – Fabio Carpinato Nov 06 '17 at 10:29
Yes, I am 100% sure. – Nimatullah Razmjo Nov 06 '17 at 10:30
Add a debugger inside the if statement to check if the condition is working. – Fabio Carpinato Nov 06 '17 at 10:31
Okay, I got it, the code that I wrote is working, but at the time of your console.log you are not sure that the subscription has populated your variables. – Fabio Carpinato Nov 06 '17 at 10:35
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/158308/discussion-between-nimatullah-razmjo-and-fabio-carpinato). – Nimatullah Razmjo Nov 06 '17 at 10:36

score 0 · Answer 2 · answered Nov 06 '17 at 10:37

You must convert the result of the suscribe to json before start working with the object.

const selectedPackage = await this.packages.subscribe(result => {
  let resultJson= result.json();// or let resultJson= JSON.parse(result);
  let elementsSelected= resultJson.filter(element => element._id === form.package);
    return elementsSelected;
 });
});

"elementsSelected" is an array.

I hope it helps!

Angular Observable returns Subscriber instead of JSON

2 Answers2