CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-component
Chris
Chris

Reputation: 3129

Not able to access data variable in script after populating it with json from an ajax call

Today I been trying out Vue, and have been trying to run before I can walk, so I have been running into walls once in a while. I asked a couple questions earlier and am back with another one.

The last question I asked was 'Not able to access data variable in script but can in html', and the issue was a typo. Once that typo was fixed then I was able to access the data variable that I populated with an array in the script, but now I am running into an issue with populating the data variable by using ajax and a promise, while I can access it in the html, I can't access the variable's data in the script now and I double checked that I have no typo's.

What I am not understanding is why if the json string is in a local variable then I can access the said data variable, but not after its populated by using ajax

Now I get errors and can't access the variable...

Here is my ajax call:

GetItemPriceListByID: (whichOne) => {
    return $.ajax({
        type: "GET",
        url: "../Scripts/" + whichOne + "JSON.json",
        dataType: "json"
    });
}

Here is a copy of the JSON being returned

[
  {
    "CatalogName": "Retro Doors",
    "ItemName": "French Doors",
    "ItemListPrice": "$461.00",
    "ItemType": "Oak",
    "ItemFeatures": [
      {
        "Features": "Door Quantity",
        "QTY": 2
      },
      {
        "Features": "Door Hinges",
        "QTY": 4
      },
      {
        "Features": "Door Knobs",
        "QTY": 1
      },
      {
        "Features": "Door Looks",
        "QTY": 1
      },
      {
        "Features": "Glass Panes",
        "QTY": 2
      }
    ]
  }
]

The HTML: {{ item.CatalogName }} {{ items.Features }}

the script:

new Vue({
        el: '#app',
        beforeCreate: function () {
            console.log("Before Created");
        },
        created: function () {
            console.log("Created");
            this.GetItemsList();
        },
        beforeMount: function () {
            console.log("Before Mount");
        },
        data: {
            itemPriceList: []
        },
        methods: {
            GetItemsList() {
                this.itemPriceList = CommonFunctions.GetItemPriceListByID("ItemList")
                    .done(data => {
                        this.itemPriceList = data;
                        console.log("Completed")
                    }); //result;
            }
        },
        mounted: function () {
            console.log("Mounted");
            console.log(this.itemPriceList[0].CatalogName);
        }
    });

Errors that I am getting with this (if ran then CatalogName does show up in the HTML)

Error Image

** EDIT **

console.log

Upvotes: 0

Views: 173

Answers (2)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

In your data object add a property called itemPromise

   GetItemsList() { 
          this.itemPromise = CommonFunctions.GetItemPriceListByID("ItemList").done(); 
     }

in the mounted hook add this :

    this.itemPromise.then((res)=>{this.itemPriceList=res})

UPDATE

in the created hook we had created a Promise object by calling the GetItemsList() and assigning that promise to itemPromise property, in the mounted hook we use the itemPromise.then(res=>{...}) to assign the result to our itemPriceList property

Upvotes: 2

HMilbradt
HMilbradt

Reputation: 4639

this.GetItemsList() is being called in created, but is an asynchronous method, so Vue continues to call the rest of the lifecycle hooks.

Whats happening is "mounted" is being called before the Ajax call returns, so the list is empty.

Try this:

GetItemsList() {
            this.itemPriceList = CommonFunctions.GetItemPriceListByID("ItemList")
                .done(data => {
                    this.itemPriceList = data;
                    console.log("Completed")

                    console.log(this.itemPriceList)
                    // Additional logic here

                }); //result;
        }

Any logic dependant on itemPriceList being set should be added inside the arrow function, or as additional methods that are called inside the arrow function.

Upvotes: 3

Related Questions