Question T6769
Visible to All Users

Loading dependent choices restfully and setting survey model data

created 4 years ago

Hello awesome people at SurveyJS,

Need urgent help!!!

So I need to load 2 different restful dropdown questions but these 2 dropdown question can only load when a parent dropdown(restful again) selected. So these selected parent id need to pass to api to fetch and load those 2 dependent dropdown. Now these entire setup should run inside a dynamic panel.

I have achieved this by using

Step 1 - onAfterRenderQuestion => fetch the data for parent dropdown and set it.
Step 2 - onValueChanged => get the parent id and fetch the child data and set accordingly

We have a draft functionality in our application(so you can partially fill the survey and later you can complete it, to achieve that we have the surveyModel.onComplete handler and we set the string data in data base and later we can fetch it and set it again in the surveyModel.data property).

Now my problem is when I set the surveyModel.data next time because the parent dropdown is a restful choice is not loaded yet and the correct data is not set.

Note: To load all the dropdown questions I am using choicesByUrl

Code
question.choicesByUrl.url = environment.baseUrl + '/api/definitions?type=whatever; question.choices = []; question.choicesByUrl.updateResultCallback = ((request, server) => {   return server; }); question.choicesByUrl.run();

Any example code will be highly appreciated.
Thanks in advance.

Answers approved by surveyjs Support

created 4 years ago

Hello,
It should work out of the box. Here is the example.

Thank you,
Andrew
SurveyJS Team

    Show previous comments (1)

      Hello,
      The code with choicesByUrl should work out of the box. I could not find a good restful API that I can use as example of binding two dropdown questions. If you fill it yourself, then please use the following code (I use setTimeout function instead of promises) :

      JavaScript
      survey.onQuestionCreated.add((sender, options) => {     if (options.question.name == 'region') {         var question = options.question;         setTimeout(() => {             question.choices = [                 'Africa',                 'Americas',                 'Asia',                 'Europe',                 'Oceania',             ];             //Update UI             var oldValue = question.value;             question.value = undefined;             question.value = oldValue;         }, 500);     } });

      I have update the example.

      Thank you,
      Andrew
      SurveyJS Team

        Hi Andrew,

        Thanks for the simplified example it worked as you said but it worked in standalone. However did not worked in my code. I spent some time to understand why but failed miserable. Basically the "onQuestionCreated" event is not firing at all.
        So now I am sending my angular component code with sample json(its in the bottom of the attached file). Please help me implement it in here.

        Thanks as always for helping us out.

          Hello,
          I created an example in Angular, trying to understand what is going on. I save it here, so we can reuse it later ;-)

          The problem is the following. In my initial examples panels created by setting the data. You create panels by loading the JSON. After you load the JSON and panels in model were created, only after that you are adding the event handler.
          The code should be the following:

          Code
          //create an empty model this.surveyModel = new Survey.Model(); // Add event handler here //this.surveyModel.onQuestionCreated.add((survey, options) => {.... //now load JSON and create model elements. It will call onQuestionCreated event. this.surveyModel.fromJSON(this.viewJson);

          Thank you,
          Andrew
          SurveyJS Team