JSAPI Tutorial: Presenting a User's Profile

Level: Beginning

Prerequisite: JSAPI User Authentication

Example: Profile Example

Summary:This tutorial covers the basic JSAPI profile call, options for configuration, how to work with the returned object and present it in the browser. When you've completed the tutorial, you will have all the information you need to present profile information in your web application.

Note that all code samples in this document use jQuery, so that's the syntax being used.

Setup

First, authentication needs to be set up as explained in JSAPI User Authentication.

Setup Details

The framework is loaded with the instruction to let the user stay logged in:

And the authentication handler goes on the login button:

A <div> should be created where the output can be injected when it returns.


Basic Profile Call

You can learn more about this call on the IN.API.Profile() page. The profile call can be used to gather information about the logged in user. A very basic profile call gathers the default information about the user and returns it for you to process.

Output


Details about the Basic Call

The IN.API.Profile() method is called with ids.

Additional behaviors are chained on as additional methods using the "." format. So in the example above, the method is called with a ".result" function to tell the framework what to do when the result is returned. The .result method can be used with an anonymous function as it is above, or can be given a reference to a different function to call when the results are returned.

Methods which can be chained on general JSAPI methods:


Selecting Fields

The call given above returns the default fields for a Profile call, which are "headline","id","lastName","pictureUrl","firstName".
You can request any valid field in a profile call, however.

Output


Details about Fields

Fields are specified using the ".fields" method chained onto the Profile call.

The fields available for a profile request are documented on the Profile Fields page in the general REST API documentation. Note that that page presents the field names in a dashed manner ("first-name") while the JavaScript API expects them in a studly caps manner ("firstName") so you'll need to translate the fields you want to make them work. Also pay attention to the restrictions of the fields that can only be used for the logged in user versus connections or people outside their network.


Processing the Return Object

If you check the output for the calls above, you'll see what the returned objects look like. All we have done up until now is print the string version of the object in the browser, but processing those objects is relatively simple.

We'll use as an example the basic profile call.

Profile Call

Return value:

Results


Details about Processing Results

The results are returned as JavaScript objects, which can be operated on using standard JavaScript notation. Whether a single ID or multiple IDs are requested, the results are returned as a list, so you need to access the value you need by looping through the results or directly referencing the index: profile = result.values[0];

You can access each of the fields you requested (or the default fields) to build the HTML you want to inject into your page, and then inject it like any other AJAX content.



Example Code