Get top navigation of Host Web in SharePoint Hosted app

Question

I need to render the global navigation (top navigation) of host site (Site collection) in SharePoint Hosted App. Since I am using SharePoint Hosted App, can only use ECMA Script. I have tried both REST API and JSOM as below.

REST API:: error

$.ajax({
    url: "<host site url>" + "/_api/web/navigation/TopNavigation",
    method: "GET",
    headers: { "Accept": "application/json; odata=verbose" },
    success: function (data) {
        success(data.d.results);
    },
    error: function (data) {
        alert(data.statusText);
    }
});

JSOM: Unexpected response data from server

var context = new SP.ClientContext("<host site site url>");
var web = context.get_web();
var nav = web.get_navigation();
var quickLaunch = nav.get_quickLaunch();
context.load(quickLaunch);
context.executeQueryAsync(
   function() { 
      var nodes = [];
      var nodesCount = quickLaunch.get_count();
      for(var i = 0; i < nodesCount;i++){
          var node = quickLaunch.getItemAtIndex(i);
          nodes.push(node);
      }
      success(nodes);
   },
   function(sender, args){alert(args.get_message());}
);

Please provide response with respect to above examples or any different approach to retrieve global navigation of host site.

Answer 1

Change your url to appWebUrl + "/_api/SP.AppContextSite(@target)/Web/Navigation/TopNavigationBar?@target='" + encodeURIComponent(hostUrl) + "'". Your current url is checking the app web's top navigation, which will not work. You may have to use SP.RequestExecutor.js instead of $.ajax() as well.