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

> Learn how the Resume GitHub app fetches and displays user organizations. It parses usernames, queries the GitHub API, and renders results with Mustache.

- Repository: [GitHub resume generator/resume.github.com](https://github.com/resume/resume.github.com)
- Tags: how-to-guide
- Published: 2026-03-04

---

**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`](https://github.com/resume/resume.github.com/blob/main/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:

```javascript
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`](https://github.com/resume/resume.github.com/blob/main/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:

```html
<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`](https://github.com/resume/resume.github.com/blob/main/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`](https://github.com/resume/resume.github.com/blob/main/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`](https://github.com/resume/resume.github.com/blob/main/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`](https://github.com/resume/resume.github.com/blob/main/js/githubresume.js).