SPFX rest call response seen in network tab but I cant read it on console

Question

I got an issue I'm doing a rest call to get columns of a list, the call success because I can see the response in the network tab of the developer tools, here is a picture: for some reason when I try to console it it looks like that with and without calling the .json() method : here is my method:

   export const getListFieldsByGuid = (guid: string, context: WebPartContext) 
 => {
  return context.spHttpClient
    .get(
  context.pageContext.web.absoluteUrl +
    `/_api/web/lists(guid'${guid}')/Fields?$filter=Hidden eq false and 
  ReadOnlyField eq false`,
  SPHttpClient.configurations.v1
)
.then(response => {
  console.log("fields without .json():", response);
  return response.json();
});
};

what am I doing wrong? Moreover, If anyone has a better way to get columns of out specific view of a list I would thank a lot!

Answer 1

Sample code for your reference.

private loadLists(): Promise<IPropertyPaneDropdownOption[]> {    
    return new Promise<IPropertyPaneDropdownOption[]>((resolve: (options: IPropertyPaneDropdownOption[]) => void, reject: (error: any) => void) => {      
      this.context.spHttpClient.get(`${this.context.pageContext.web.absoluteUrl}/_api/v2.1/drives?select=id,name,drivetype`,  
      SPHttpClient.configurations.v1)  
      .then((response: SPHttpClientResponse) => {  
        response.json().then((responseJSON: any) => {  
          var libraries=[];
          responseJSON.value.forEach(element => {
            libraries.push({key:element.id,text:element.name});
          });
          resolve(libraries);  
        });  
      });
    });
  }

Call the function.

this.loadLists()
      .then((listOptions: IPropertyPaneDropdownOption[]): void => {
        this.lists = listOptions;
        this.listsDropdownDisabled = false;
        this.context.propertyPane.refresh();
        this.context.statusRenderer.clearLoadingIndicator(this.domElement);        
        this.render();       
      });

Answer 2

Below are some methods using REST API which can be used to get View columns. Please note that this method is being written to be used using SharePoint hosted Add In, if you are using agains SPFx you just have to modify to use it against spHttpClient .But below code will give you logic an how to get columns against as List view.

If you already have view ID, you can ignore below methods

function getViews() {

    var finalurl = appweburl + baseurl + "/lists('" + ListId + "')/views?@target='" + hostweburl + "'"


    var executor = new SP.RequestExecutor(appweburl);

    var settings = {
        url: finalurl,
        method: "GET",
        headers: { "Accept": "application/json; odata=verbose" },
        success: successHandlergetView,
        error: errorHandlergetView
    };
    if (typeof payload != 'undefined') {
        ajaxOptions.data = JSON.stringify(payload);
        settings.data = JSON.stringify(payload);
    }
    executor.executeAsync(settings);
}

function successHandlergetView(data) {
    var jsonObject = JSON.parse(data.body);
    //var allviewjson = json.d.Items.results;

    var viewResult = jsonObject.d.results

    for (var i = 0; i < viewResult.length; i++) {

        if (viewResult[i].ServerRelativeUrl == ("/"+spSourceURL))
        {
            currentView = spSourceURL;
            currentViewID = viewResult[i].Id;
            currentViewQuery = viewResult[i].ViewQuery;
            break;
        }
    }
    if (currentViewQuery != "") {
        getViewColumns();

    }
}
function errorHandlergetView(data) {
    alert("Error - errorHandlergetView : " + data);
}



function getViewColumns() {
var currentViewID = "<ID of you view>"
    var url = appweburl + baseurl + "/lists('" + ListId + "')/Views('" + currentViewID + "')/ViewFields";
    var executor = new SP.RequestExecutor(appweburl);
    var finalurl = url + "?@target='" + hostweburl + "'";
    var settings = {
        url: finalurl,
        method: "GET",
        headers: { "Accept": "application/json; odata=verbose" },
        success: successHandlerViewcolumns,
        error: errorHandlerViewcolumns
    };
    if (typeof payload != 'undefined') {
        ajaxOptions.data = JSON.stringify(payload);
        settings.data = JSON.stringify(payload);
    }
    executor.executeAsync(settings);

    //return executeJson(url);
}

function successHandlerViewcolumns(data) {
    var json = JSON.parse(data.body);
    columnsArray = json.d.Items.results;
    console.log(columnsArray);

    //getListItems(currentViewQuery)
    getListData(currentViewQuery);
    //return data;
}
function errorHandlerViewcolumns(data) {
    alert("Error - errorHandlerViewcolumns : " + data);
}