Load and access data sequentially within functions in a JavaScript class

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.”