I need to load data from json into a function within a class. The data loads but the sequence is off as shown below. How can I get the data 1st before the process continues?
”’
"use strict";
customElements.define('myexample', class extends HTMLElement {
constructor() {
super();
…
}
connectedCallback() {
….
this.paths = [];
let go=this;
go.loaditems ();
}
loaditems(){
…
this.getimage();
}
//problem area: data is
getimage(){
…
this.pic=[]
let retpic= this.processpic();
alert(“returned in place: “ + retpic”);
this.pic=retpic;
… (other processes that require reference with “.this”)
}
alert(“after returned pic”);
processpic(){
$.get("pics.json", function(data){
let ds = data.pics[0].pic1 + “.jpg”;
return ds;
})
}
});
”’
Problem: the alert(“after returned pic”) fires before the image is loaded. Putting a callback with processpic() and wrapping getimage() within the callback makes it impossible to properly reference “this.”