Get surveyjs questions from db

Question

I am using surveyjs in vue, and I am trying to get my var json questions from my API.

Using vue-resource, I make a GET request to the API, and save the response in questions and put it on var json

export default {
    components: {
           Survey
    },
    data(){
           this.$http.get('api')
           .then(res => res.json())
           .then(questions => {
               this.questions = questions;
           });
           var json = this.questions;
           var model = new SurveyVue.Model(json);
           return {
               survey: model,
               questions:''
           }
    }
}

Using console.log(json), I get undefined. So, what´s the correct way to access API response in this case?

score 1 · Accepted Answer · edited Jul 15 '22 at 22:40

1

I think you could use something like this :

export default {
    components: {
           Survey
    },
    data() {
        return {
            survey: {},
            questions: ''
        }
    },
    mounted() {
        let self = this;
        this.$http.get('api')
           .then(questions => {
               self.questions = questions;
           });
        this.survey = new SurveyVue.Model(this.questions);
    }
}

You can learn more about the mounted method here. You now should be able to access your survey data.

edited Jul 15 '22 at 22:40

tony19

125,647
18
229
307

answered Apr 03 '19 at 13:25

Takachi

701
4
14

now I can see the "There is no visible page or question in the survey." message from surveyjs, but i am getting the error `TypeError: Cannot read property 'root' of undefined"` in the console. – victor Apr 03 '19 at 14:33
So your problem goes too far for me, I think this could be a problem with SurveyJS and my method, but I never worked with SurveyJS, so I can't help you on this point. If I solved your primary problem, don't hesitate to tell me. :) – Takachi Apr 03 '19 at 14:58
I made some debug, and `this.questions` is blank in `this.survey = new SurveyVue.Model(this.questions)`. If i put a `console.log(this.questions)` just after `this.questions = questions`, i can see the API response with no problem. – victor Apr 03 '19 at 15:48
Ok I'm just bad. Using `this` in your http request doesn't refers to the right element. Can you add `let self = this;` at the beginning of your `mounted()` method ? Then you can refer to `self.questions` in your callback, which will become `self.questions = questions`. – Takachi Apr 04 '19 at 06:52
Another debug, and `this.questions` show as `{__ob__: Observer}` without the properties my API sent. If I use `console.log(self.questions)` in vue resource callback, I can see the API response. I tried `Object.assign({}, this.questions)` and `JSON.parse(JSON.stringify(this.questions))`, but no success. – victor Apr 04 '19 at 13:07
What about using your `console.log()` in a method ? It looks like your API call isn't finish when the `console.log()` is called. If you have the Vue Developer Tool, can you see that your variable `question` is modified ? – Takachi Apr 04 '19 at 13:18
I put it on a method, and all surveyjs config and function in the vue resource callback and now it works. Thank you very much for your help. – victor Apr 04 '19 at 13:52
No problem victor. Don't hesitate to mark as answer above, I edited my post. :) – Takachi Apr 04 '19 at 13:58

Get surveyjs questions from db

1 Answers1