[Vuejs]-How to populate vuejs data variable with json from function?

by

2👍

✅

Your GetJSON() function doesn’t return anything.

var CommonFunctions = {
    GetJSON(whichOne)  {
      return $.getJSON("../Scripts/" + whichOne + "JSON.json");
//    ^^^^^^
    }
}

Now it returns the request/promise (and uses jQuery's shorthand method for retrieving json).

In your component you’d write

async GetUserDetails() {
  this.persons = await CommonFunctions.GetJSON("Person");
}

Or if you don’t like async/await:

 CommonFunctions.GetJSON("Person").then(data => {
   this.persons = data;
 });
👤Bob Fanger

1👍

As my understanding, ajax function is asynchronous, so it doesn’t return directly

There is a simple workaround:

   methods: {
        GetUserDetails() {
            this.persons = CommonFunctions.GetJSON("Person", this);
        }
    }

and in helper function:

var CommonFunctions = {
    GetJSON: (whichOne, self) => {
        $.ajax({
            type: "GET",
            url: "../Scripts/" + whichOne + "JSON.json",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                self.persons = data
                return data;
            }
        });
    }
}
👤ittus

Leave a comment