2

In my angular application, i am in the need to store the data to an array which will be empty at initial stage.

Example:

someFunction() {

 let array = [];

 console.log("step 1");

 this.service.getRest(url).subscribe(result => { 

   result.data.forEach(element => {

   console.log("step 2");

    array.push(element); // Pushing all the objects comes from res.data     

   });

   console.log("step 3");

 });

   console.log("step 4");

}

Here i have listed down the console.log() with step order.

In which the order while calling the function was,

Step 1 Step 4 Step 2 Step 3

Here after step 1, the step 4 calls and later the step 2.. So if i console.log(array) in place of step 4, it gives again empty array..

But in place of step 2 and 3 it gives value.. Coming out of the service the value is empty.

And hence always i am getting empty value in the array.

Kindly help me to store the data to the variable even though there is a time duration of service call and response coming back.

Tried by modifying code for a long time but couldn't get it worked..

Edit:

I have given below the real time application i am currently working with stackblitz link https://stackblitz.com/edit/angular-x4a5b6-ng8m4z

Here in this demo see the file https://stackblitz.com/edit/angular-x4a5b6-ng8m4z?file=src%2Fapp%2Fquestion.service.ts

Where i am using the service call.. If i put async getQuestions() {}, it is giving error of questions.forEach of undefined

In service.ts 

    jsonData: any = [
    {
      "elementType": "textbox",
      "class": "col-12 col-md-4 col-sm-12",
      "key": "project_name",
      "label": "Project Name",
      "type": "text",
      "value": "",
      "required": false,
      "minlength": 3,
      "maxlength": 20,
      "order": 1
    },
    {
      "elementType": "textbox",
      "class": "col-12 col-md-4 col-sm-12",
      "key": "project_desc",
      "label": "Project Description",
      "type": "text",
      "value": "",
      "required": true,
      "order": 2
    },
    {
      "elementType": "dropdown",
      "key": 'project',
      "label": 'Project Rating',
      "options": [],
      "order": 3
    }
  ];

  getQuestions() {

    let questions: any = [];

    //In the above JSON having empty values in "options": [],

    this.jsonData.forEach(element => {
      if (element.elementType === 'textbox') {
        questions.push(new TextboxQuestion(element));
      } else if (element.elementType === 'dropdown') {

        //Need to push the data that comes from service result (res.data) to the options

        questions.push(new DropdownQuestion(element));

        console.log("step 1");

      //The service which  i call in real time..

        // return this.http.get(element.optionsUrl).subscribe(res => {

        //res.data has the following array, Using foreach pushing to elements.options.

      //   [
      //   { "key": 'average', "value": 'Average' },
      //   { "key": 'good', "value": 'Good' },
      //   { "key": 'great', "value": 'Great' }
      // ],

        // res.data.forEach(result => {
          console.log("step 2");
        //   element.options.push(result);
        // });
        // console.log(element.options) give values as the above [
      //   { "key": 'average'...
        console.log("step 3");
                // console.log(element.options) give values as the above [
      //   { "key": 'average'...
        // });
        console.log("step 4");
      //But here console.log(element.options) gives empty 
      }
    });

    return questions.sort((a, b) => a.order - b.order);
  }
Maniraj Murugan
  • 8,868
  • 20
  • 67
  • 116
  • Not sure to understand the problem because it looks like you already have the solution: the service call is asynchronous so you'll get results in its callback (step 2 and 3). Here you can successfully fill `array`, so whatever you need to do with `array`, initiate it in the service callback. – Zim Nov 16 '18 at 13:34
  • I think this is basically just another duplicate of the old classic, https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call – misorude Nov 16 '18 at 13:34
  • @Zim, But if i console.log(array) in the place of step 4, then its giving empty array but in place of step 2 and 3, it giving value.. – Maniraj Murugan Nov 16 '18 at 13:37
  • @undefined: yes, because at the time you reach step 4, the asynchronous call has not been finished yet! – Zim Nov 16 '18 at 13:44
  • put your result inside setTimeout – Chellappan வ Nov 16 '18 at 15:16

5 Answers5

1

The first step if convert your function getQuestion in an Observable.

Why it is necesary? Because you need call to a this.http.get(element.optionsUrl). This is asyncronous (all http.get return observable). And you need wait to the called is finished to get the data. The good of observable is that inside "subscribe function" you have the data.

Therefore, we must thinking that the "services return observables, the component subscribe to the services".

Well, let the issue. The main problem is that we need several calls to http.get. As we know, all the calls to http are asyncronous, so how can be sure that we have all the data (remember that we only has the data into the subscribe function. As we don't want have several subscribe -the best is have no subscribe- in our service, we need use forkJoin. ForkJoin need an array of calls, and return an array of result.

So the fist is create an array of observable, then we return this array of observable. Wait a moment! we don't want return an array with the options, we want a observables of question. For this, in spite of return the array of observable, we return an object that use this array of observable. I put a simple example at bottom of the response

getQuestions():Observable<any[]> { //See that return an Observable

    let questions: any = [];

    //First we create an array of observables
    let observables:Observable<any[]>[]=[];
    this.jsonData.forEach(element => {
      if (element.elementType === 'dropdown') {
        observables.push(this.http.get(element.optionsUrl))
      }
    }
    //if only want return a forkjoin of observables we make
    //return forkJoin(observables)
    //But we want return an Observable of questions, so we use pipe(map)) to transform the response

    return forkJoin(observables).pipe(map(res=>
    {  //here we have and array like-yes is an array of array-
       //with so many element as "dowpdown" we have in question
       // res=[
       //      [{ "key": 'average', "value": 'Average' },...],
       //        [{ "key": 'car', "value": 'dog },...],
       // ],
       //as we have yet all the options, we can fullfit our questions
       let index=0;
       this.jsonData.forEach((element) => { //see that have two argument, the 
                                                  //element and the "index"
          if (element.elementType === 'textbox') {
             questions.push(new TextboxQuestion(element));
          } else if (element.elementType === 'dropdown') {
               //here we give value to element.options
               element.option=res[index];
               questions.push(new DropdownQuestion(element));
               index++;
          }
       })
       return question
    }))
 }

NOTE: of how convert a function that return a value in observable using "of": Simple example

import { of} from 'rxjs';

getData():any
{
   let data={property:"valor"}
   return data;
}
getObservableData():Observable<any>
{
   let data={property:"observable"}
   return of(data);
}
getHttpData():Observable<any>
{
    return this.httpClient.get("myUrl");
}
//A component can be call this functions as
let data=myService.getData();
console.log(data)
//See that the call to a getHttpData is equal than the call to getObservableData
//It is the reason becaouse we can "simulate" a httpClient.get call using "of" 
myService.getObservableData().subscribe(res=>{
     console.log(res);
}
myService.getHttpData().subscribe(res=>{
     console.log(res);
}

NOTE2: use of forkJoin and map

getData()
{
    let observables:Observables[];

    observables.push(of({property:"observable"});
    observables.push(of({property:"observable2"});

    return (forkJoin(observables).pipe(map(res=>{
        //in res we have [{property:"observable"},{property:"observable2"}]
        res.forEach((x,index)=>x.newProperty=i)
        //in res we have [{property:"observable",newProperty:0},
        //                {property:"observable2",newProperty:1}]
       }))
}

Update There are other way to do the things. I think is better has a function that return the fullfilled "questions".

//You have
jsonData:any=....
//So you can have a function that return an observable
jsonData:any=...
getJsonData()
{
   return of(this.jsonData)
}
//Well, what about to have a function thah return a fullFilled Data?
getFullFilledData()
{
   let observables:Observables[]=[];
   this.jsonData.forEach(element => {
      if (element.elementType === 'dropdown') {
         observables.push(this.http.get(element.optionsUrl))
      }
   })
   return forkJoin(observables).pipe(map(res=>
      let index = 0;
      this.jsonData.forEach((element) => {
      if (element.elementType === 'dropdown') {
         element.options = res[index];
         index++;
      }
   })
   return this.jsonData
   }))
}

In this way you needn't change the component. If you call to getFullfilledData you have (in subscribe) the data

see a stackblitz

Eliseo
  • 50,109
  • 4
  • 29
  • 67
  • Thanks Eliseo, You were too busy i think with your work.. I am in the need of in depth analysis in this solution i will have a go through it thoroughly.. – Maniraj Murugan Nov 17 '18 at 12:39
  • @undefined, I update the answer to make the things more "razonables". I think is better have a function that return an observable of fullfilled data and not touch the component – Eliseo Nov 17 '18 at 13:00
  • Can you try out https://stackoverflow.com/questions/53357556/grouping-elements-inside-json – Maniraj Murugan Nov 18 '18 at 05:11
  • @undefined, Updated my answer adding a stackblitz and correct some errros. In the stackblitz you have a service that return a fullfilled Questions. Please, read the "README" file of the stackblitz to understand better what I've try to do. (the stackblitz only show the part of how read the questions from a file) – Eliseo Nov 18 '18 at 12:32
  • Eliseo, I am having another doubt in our form.. If i need to generate another form with different set of JSON data, then do i need to create a new json variable and need to create another function (like questions) in ```service.ts```? Or else how can we manage any JSON data for form generated inside a single function?? – Maniraj Murugan Nov 18 '18 at 14:13
  • To be clear if i need another dynamic form in another component with different set of JSON data, then should i need to create another function or else can we do it in ```questions()``` function itself?? – Maniraj Murugan Nov 18 '18 at 14:16
  • @undefined, Your service has a function getQuestion(). The best aproach is that getQuestion has an argument, e.g. getQuestion(string formName), and use a swtich to return one or another json. Some like the function getOptions or getOptionFromUrl that there're in the stackblitz I attached to the answer to this question. – Eliseo Nov 18 '18 at 14:26
  • Eliseo, Are you saying need to do it as like you dis for options?? – Maniraj Murugan Nov 18 '18 at 14:37
  • I am unable to get you.. Here we are doing ```this.jsonData.foreach``` and doing things with only one json and building only one form.. How to build multiple form in multiple components with different form but one initializing.. It would be better if you post it as answer with stackblitz using our form currently builded for one component.. – Maniraj Murugan Nov 18 '18 at 14:45
  • Hello again,@undefined. Forget this.jsonDate. See my tackblitz, https://stackblitz.com/edit/angular-x4a5b6-muyhat?file=src%2Fapp%2Fapp.component.ts if you change this.service.getFullQuestion2("form2") by this.service.getFullQuestion2("form1") you can see as the Question changes – Eliseo Nov 18 '18 at 19:15
  • If you help me it would be better, https://stackoverflow.com/questions/53380789/how-to-combine-two-parts-of-single-form-in-angular – Maniraj Murugan Nov 19 '18 at 18:55
0

Your Step 4 is outside of the subscriptioon logic. Move it inside of it after Step 3 and it will be executed as last.

Observables send three types of notifications: next, error and complete. https://angular.io/guide/observables If you want to handle the positive Response, every logik has to be placed inside of the next notification.

myObservable.subscribe(
 x => console.log('Observer got a next value: ' + x),
 err => console.error('Observer got an error: ' + err),
 () => console.log('Observer got a complete notification')
);

Flattening Strategies like the concatMap might also interest you, if you get several observables and want to handle them one after another. https://medium.com/@shairez/a-super-ninja-trick-to-learn-rxjss-switchmap-mergemap-concatmap-and-exhaustmap-forever-88e178a75f1b

Severin Klug
  • 733
  • 5
  • 9
0

1-

Well, here you can achieve the same result using different ways once there is a concrete use case, however in general you can try using async await:

async someFunction() {
    this.asyncResult = await this.httpClient.get(yourUrl).toPromise();
    console.log("step 4");
  }

You do not need to subscribe anymore, once data is fetched from “yourUrl”, Observable will be converted to promise and promise is resolved, then the returned data is stored in “asyncResult” variable. At that point the last console will be executed, here you'll find a little use case.

PS: this.httpClient.get(yourUrl) is what is implemented in your this.service.getRest(url)

2-

Or merely move your console.log("step 4"); inside of the subscribe method scope to ensure the order. (Javascript has a famous asynchrounous behavior, google it for more details )

SeleM
  • 9,310
  • 5
  • 32
  • 51
  • In my real application, i am having a forEach inside that function.. Inside the forEach only i am going to make service call.. If i give the async before function, then it is showing ```'await' expression is only allowed within an async function. ``` but outside foreach i am not getting error for await.. But inside foreach only i will get the URL for the service.. – Maniraj Murugan Nov 16 '18 at 13:48
  • @undefined could you provide a little stackblitz please ? – SeleM Nov 16 '18 at 13:49
  • Give me seconds @undefined – SeleM Nov 16 '18 at 14:49
  • https://stackblitz.com/edit/angular-x4a5b6-ng8m4z The entire application flow i have explained.. Its working example.. – Maniraj Murugan Nov 16 '18 at 14:58
0

Your function is calling async API call so you will not able to get the value of array before or after your .subscribe() function. And you need to declare your array out of the function.

And after that Simply you need to call another function if you get your data.

let array = [];

someFunction() {


 this.service.getRest(url).subscribe(result => { 

   result.data.forEach(element => {

    array.push(element); // Pushing all the objects comes from res.data     

   });

   this.anotherFunction();

 });

  anotherFunction()
  {
     console.log(this.array)//you can access it here 
  }

}

Dipal
  • 184
  • 10
0

Look at the following timeline: exec timeline

There is no guarantee the service return will occur before step 4, hence no guarantee array will be filled in step 4. The recommended way to ensure working with a filled array is to move the array processing logic in the service callback, which will correspond to the second down arrow on the picture.

Zim
  • 1,457
  • 1
  • 10
  • 21