How to process and display records from tooling api query in a visualforce controller

Question

Why is the "broken code" throwing a 400 error? Ultimately the "working code" is not the approach that I am looking for. I am looking for a solution approach that leverages visualforce+controller (i am not looking for a js remoting solution approach). I seek a visualforce+controller approach because I want to perform custom apex processing on the SandboxInfo results and also display the results as <li> elements in a visualforce page in record.SandboxName format.. I know that I have to use the tooling api to query SandboxInfo but I am not sure how to setup a visualforce page and its controller to process and display records from the tooling api query: /services/data/v36.0/tooling/query/?q=select+id,SandboxName+from+SandboxInfo

Working code (as i stated this is not the approach i want to use):

<apex:page>
  <apex:includeScript value="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"/>
  <script>
    jQuery(document).ready(function($) {
      // Pull 10 Accounts via the REST API
      $.ajax('/services/data/v28.0/query?q=SELECT+Name+FROM+Account+LIMIT+10',
        {
          beforeSend: function(xhr) {
            // Set the OAuth header from the session ID
            xhr.setRequestHeader('Authorization', 'Bearer {!$Api.Session_ID}');
          },
          success: function(response) {
            // We got 'em - append our records to the HTML list
            $.each(response.records, function(index, record) {
              $('#accountList').append('<li>'+record.Name+'</li>');
            });
          },
          error: function(jqXHR, textStatus, errorThrown) {
            // Oops - what went wrong?
            alert(jqXHR.status + ': ' + errorThrown);
          }
        }
      );
    });
  </script>
  <h1>Test REST API Without Proxy</h1>
  <p>10 Accounts:</p>
  <ul id="accountList">
  </ul>
</apex:page>

Broken code (as i stated this is not the approach i want to use. However why do i get a 400 error? Ultimately I am seeking an apex controller solution, not js remoting..):

<apex:page>
      <apex:includeScript value="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"/>
      <script>
        jQuery(document).ready(function($) {
            /*id rather be doing this in a controller*/
            /*but even this non-controller approach gives me a 400 error*/
            $.ajax('/services/data/v36.0/tooling/query/?q=select+id,SandboxName+from+SandboxInfo',
            {
              beforeSend: function(xhr) {
                xhr.setRequestHeader('Authorization', 'Bearer {!$Api.Session_ID}');
              },
              success: function(response) {
                $.each(response.records, function(index, record) {
                    $('#sandboxList').append('<li>'+record.SandboxName+'</li>');
                });
              },
              error: function(jqXHR, textStatus, errorThrown) {
                alert(jqXHR.status + ': ' + errorThrown);
              }
            }
          );
        });
      </script>
      <h1>Test REST API Without Proxy</h1>
      <p>Sandboxes:</p>
        <ul id="sandboxList">
      </ul>
</apex:page>

Answer 1

Sounds like you're trying this in your Sandbox? That won't work, because sandboxes can't query SandboxInfo. You'll have to deploy your code to production to actually have it work correctly.

As far as actually processing it, I suggest you use JSON2Apex to build a wrapper class. At that point, you just need to write code like the following:

HttpRequest req = new HttpRequest();
req.setEndpoint(Url.getSalesforceBaseUrl().toExternalForm()+'/services/data/v36.0/tooling/query/?q=select+id,sandboxname+from+sandboxinfo');
req.setHeader('Authorization','Bearer '+UserInfo.getSessionId());
req.setMethod('GET');
HttpResponse res = new http().send(req);
SandboxInfoResponse info = SandboxInfoResponse.parse(res.getBody());