how to loop on JSON result & show it to user using jquery?

You can easily loop on your JSON data using jquery $.each(), so your code would be something like this

                 $.ajax({
                     url: "/Test/TestMethod",
                     type: 'GET',//type of request
                   
                     success: function (data) {
                         //Check if Profiles have data using .length function
                         if (data.Profiles.length > 0) { 
                             //Create a string to be appneded as html in table
                             var tableBody = "";
                             $.each(data.Profiles, function (i, item) {

                       tableBody = tableBody + "<tr><td>" + item.CustomerName + "</td><td>" + item.Distance + "</td></tr>";
                             });
                             //Show TablBody html as above created string
                             $("#TablBody").html(tableBody);
                             
                         }
                         else
                         {
                             alert("No data")
                         }
                         
                     },
                     error: function () {
                         alert("Error");
                     }

                 });

You can also use javascript for loop instead of $.each if needed, hope this helps.

You can also use the javascript approach, you can loop over the JSON Result array like this:

for(var i = 0; i < json.length; i++) {
    var obj = json[i];
    console.log(obj.Distance); // 4978.96
}

Or Suppose you multi-dimensional JSON result, you can loop it using jQuery like

$.each(data, function() {
  $.each(this, function(k, v) {
    // code here
  });
});

If you have an array of objects/maps so the outer loop iterates over those. The inner loop iterates over the properties on each object element.