How to populate vuejs data variable with json from function?

Question

I have a project that uses jQuery, and I have a lot of functions that return json, and I am trying to populate a data variable with some test data but when I loop through the data I am getting nothing.

I have checked to make sure that my ajax call is returning the json data and it is, and I am kind of at a loss on why nothing is being returned

<div id="app">
   <template v-for="person in persons">
       <div>
           {{ person.FirstName }}
       </div>
   </template>
</div>

<script>
    new Vue({
        el: '#app',
        created: function () {
            this.GetUserDetails();
        },
        data: {
            persons: []
        },
        methods: {
            GetUserDetails() {
                this.persons = CommonFunctions.GetJSON("Person");
            }
        }
    });
</script>

Here is some of the Person json,

[{
    "id": 1,
    "FirstName": "Auroora",
    "LastName": "Kosel",
    "gender": "Female"
  },
  {
    "id": 2,
    "FirstName": "Nevins",
    "LastName": "Rulf",
    "gender": "Male"
  },
  {
    "id": 3,
    "FirstName": "Silvana",
    "LastName": "Cragoe",
    "gender": "Female"
 }]

** EDIT ** Here is the GetJSON function

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

If you put console.log(this.persons) in GetUserDetails, do you get proper value? — ittus
– ittus, Commented Oct 28, 2018 at 12:14

Bob Fanger · Accepted Answer · 2018-10-28 12:44:37Z

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;
 });

edited Oct 28, 2018 at 12:44

answered Oct 28, 2018 at 12:29

Bob Fanger

30k7 gold badges68 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Chris Over a year ago

If I add a console.log(data) into the success of the GetJSON it returns the data

Bob Fanger Over a year ago

Weird, place a console.log(this.persons) below the this.persons = CommonFunctions.GetJSON("Person"); line, what does it log?

Chris Over a year ago

returns undefined

Bob Fanger Over a year ago

Exactly, because the GetJSON doesn't return anything/undefined. I'll update my answer with working GetJSON method...

Bob Fanger Over a year ago

I've updated my answer with a GetJSON implementation that returns the request/promise.

|

ittus · Accepted Answer · 2018-10-28 12:36:10Z

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;
            }
        });
    }
}

answered Oct 28, 2018 at 12:36

ittus

22.5k5 gold badges62 silver badges59 bronze badges

Collectives™ on Stack Overflow

How to populate vuejs data variable with json from function?

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related