How to Fetch and Display User Organizations in the Resume GitHub Application

The Resume GitHub application fetches user organizations by parsing the URL username, calling the GitHub API endpoint /users/{username}/orgs via JSONP, and rendering the results using a Mustache template injected into the DOM.

The resume.github.com project generates dynamic résumé pages entirely within the browser using client-side JavaScript. When you want to fetch and display user organizations, the application follows a specific pipeline that transforms a GitHub username into a rendered list of organizational memberships without requiring any server-side processing.

Parsing the Username from the URL

The process begins in js/githubresume.js, where the script extracts the target username from the query string. The code grabs the first parameter after the ? delimiter and stores it in a username variable (lines 1–22). Once validated, the run() function initiates the data-fetching sequence (line 21).

Fetching Organization Data from the GitHub API

Inside the run() function, the application calls github_user_orgs(username, callback) to retrieve organizational data (lines 11–12). This helper function constructs a JSONP request to GitHub’s public API.

The github_user_orgs Helper Function

The implementation sends an asynchronous GET request to the endpoint:

var github_user_orgs = function(username, callback) {
  $.getJSON('https://api.github.com/users/' + username + '/orgs?callback=?', callback);
};

This request returns a JSONP response containing an array of organization objects under the data property.

Processing and Sorting the API Response

When the API responds, the callback function processes response.data to build a sorted array of organization objects. The code iterates through each entry, validating that org.login exists before pushing an object containing the position index and organization info into a sorted array (lines 11–20).

Rendering Organizations with Mustache Templates

After sorting the data, the application loads the presentation layer through an Ajax request to views/org.html (line 21). This file contains a Mustache template that defines the HTML structure for each organization entry.

The org.html Template Structure

The template uses double-brace placeholders for dynamic content:

<div class="org {{last}}">
  <h2>{{name}}</h2>
  <h3>Member</h3>
  <h4>{{now}}</h4>
  <p>If you would like more information about this organization, please visit
    <a href="https://github.com/{{name}}">the organization page</a> on GitHub.</p>
</div>

The {{name}} variable displays the organization name (falling back to the login if no display name exists), while {{now}} renders the current year.

DOM Injection and Conditional Display

For each organization in the sorted list, the script creates a view object containing name and now properties, then renders it using Mustache.to_html(tpl, view). The resulting HTML fragment is appended to the #orgs container element (lines 30–49).

If the user belongs to no organizations, the application removes the entire organizations section from the DOM by targeting #organizations (line 52), ensuring clean presentation without empty headers.

Summary

• Entry point: js/githubresume.js parses the URL username and triggers run().
• API call: github_user_orgs() fetches from https://api.github.com/users/{username}/orgs via JSONP.
• Data processing: The response is sorted into an array of organization objects with validated login data.
• Template rendering: views/org.html provides the Mustache template rendered via Mustache.to_html().
• DOM insertion: Results inject into #orgs; empty states trigger removal of #organizations.

Frequently Asked Questions

How does the Resume GitHub app authenticate with the GitHub API?

The application does not use authentication. It relies on GitHub’s public API endpoints and JSONP callbacks to fetch organization data anonymously. This approach works within browser security constraints but is subject to unauthenticated rate limits imposed by GitHub.

What happens if a user is not a member of any organizations?

If the API returns an empty array, the callback function detects the zero-length sorted array and removes the #organizations element from the DOM entirely. This prevents displaying empty section headers or broken layout elements on the résumé page.

Can the organization display template be customized?

Yes. The HTML structure lives in views/org.html and uses Mustache syntax. You can modify the template to change the layout, add additional fields from the GitHub API response (such as description or avatar_url), or adjust the styling classes without touching the JavaScript logic in js/githubresume.js.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}