Get User Profile using REST in SharePoint hosted App (JSOM)

We can get current user Profile like Display name , Email ,Picture Url etc using REST.

REST :

$.ajax({

  url: "http://<site url>/_api/sp.userprofiles.peoplemanager

    /getmyproperties",

  type: "GET",

  headers: { "accept": "application/json;odata=verbose" },

  success: successHandler,

  error: errorHandler

});

Refer msdn Link

Html code in ContentPlaceHolderID of my .aspx page

Before go further, kindly ensure "SP.UserProfiles.js" should load.

 <script type="text/javascript" src="/_layouts/15/SP.UserProfiles.js"></script> 

<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">

    <div>

        <p id="message">

            <!-- The following content will be replaced with the user name when you run the app - see App.js -->

            initializing...

        </p>

         <p id="Email"></p>       

        <img id="profileimg" alt="profile image"/>

    </div>

</asp:Content>

App.JS

//'use strict';

var hostweburl;

var appweburl;

// Get the URLs for the add-in web the host web URL from the query string.

$(document).ready(function () {

    hostweburl = decodeURIComponent(getQueryStringParameter("SPHostUrl"));

    appweburl = decodeURIComponent(getQueryStringParameter("SPAppWebUrl"));

    alert(hostweburl);

    var scriptbase = hostweburl + "/_layouts/15/";

    SP.SOD.executeOrDelayUntilScriptLoaded(testfunction, 'SP.UserProfiles.js');

});

function testfunction() {

    $.ajax({

        url: appweburl + "/_api/SP.UserProfiles.PeopleManager/GetMyProperties",

        // url: hostweburl + "/_api/sp.userprofiles.peoplemanager/getmyproperties",

        type: "GET",

        headers: { "accept": "application/json;odata=verbose" },

        success: successHandler,

        error: errorHandler

    });

}

function successHandler(data) {

    var pictureURL = data.d.PictureUrl;

   // alert(pictureURL);

    $('#message').text('Name:'  + data.d.DisplayName);

    $('#Email').text('Email:' + data.d.Email);

    $('#profileimg').attr('src', data.d.PictureUrl);

}

function errorHandler(data, ajaxOptions, thrownError) {

    alert('Failed');

}

function getQueryStringParameter(paramToRetrieve) {

    var params = document.URL.split("?")[1].split("&");

    var strParams = "";

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

        var singleParam = params[i].split("=");

        if (singleParam[0] == paramToRetrieve) return singleParam[1];

    }

}

OutPut :