Looping JSON Success data fetched from webmethod

Question

I'm trying to call a webmethod using ajax call as shown:

<script type="text/javascript">
$(document).ready(function () {
   $("#getdetails").click(function () {
       $.ajax({
          type: "POST",
          url: "Default.aspx/Gettext",
          data: JSON.stringify({SampleText: $('#sampletext').val(), FontType: $('#fonttype').val() }),
          contentType: "application/json; charset=utf-8",
          dataType: "json",
          success: function (response) {
          $("#Result").html(response.d);
          }//success
      });//ajax call
   });//button click

  $("#FontLists").change(function () {
  $('#fonttype').val($('#FontLists option:selected').text());
  });
});//document

Webmethod:

<WebMethod()> _
<ScriptMethod(ResponseFormat:=ResponseFormat.Json)>
Public Shared Function Gettext(ByVal SampleText As String, ByVal FontType As String) As String
    Dim List1 As New ArrayList()
    List1.Add(SampleText)
    List1.Add(FontType)
    For Each Str As String In List1
        Return Str
    Next
End Function

Now the problem is when I click button the response is showing only the text and not the selected font.But when I see by placing a breakpoint at List1 it shows me as in the screenshot below:

Answer 1

I have found a way to do this:

  success: function (response) {
           var result1 = (response.d.SampleText), result2 =(response.d.FontType),
           result = "SampleText: " + result1 + " FontType: " + result2;
           $("#Result").html(result);
  }

Before this I have followed this way to achieve