Обратный вызов с функцией jQuery .get ()

Question

Я делаю функцию, которая получает HTML-код другой страницы с URL-адресом iurl, используя функцию jQuery .get().

У меня есть этот код

var data1, data2, data3;
var iurl = 'example.com'; //url to get data from

$.get(iurl, function(response){
    let parser = new DOMParser();
    let parsedHtml = parser.parseFromString(response, 'text/html');
    data1 = parsedHtml.getElementById('id1').value;
    data2 = parsedHtml.getElementById('id2').value;
    data3 = parsedHtml.getElementById('id3').value;

   $(".table-main").append("\<tr\>\<td\>" + data1 + "\<\/td\>\<td\>" + data2 + "\<\/td\>\<td\>" + data3 + "\<\/td\>\<\/tr\>"); //displays the data in a table

    console.log("first data1 is " + data1 + " data2 is " + data2 + " data3 is " + data3);
})

alert("something");
console.log(" second data1 is " + data1 + " data2 is " + data2 + " data3 is " + data3);

И, Я получаю вывод как

second data1 is <data1> data2 is undefined data3 is undefined
first data1 is <data1> data2 is <data2> data3 is <data3>

, но требуемый вывод

first data1 is <data1> data2 is <data2> data3 is <data3>
second data1 is <data1> data2 is <data2> data3 is <data3>

Я знаю, что должен использовать обратный вызов здесь, но я не могу понять это в этомcase.

Спасибо за любую помощь.