100%

Requesting data from the Github API

✓ Published1🌍 Public

Last edited Feb 4, 2020

Created on Feb 3, 2020

This example demonstrates the complete workflow of fetching repository data from the GitHub API and rendering it as an HTML list. It uses a raw XMLHttpRequest to request JSON from `https://api.github.com/users/razpudding/repos`, parses the response with `JSON.parse`, and then dynamically creates a `<ul>` element with `<li>` items for each repository name using the DOM methods `document.createElement` and `appendChild`. The visualization highlights the data pipeline from an asynchronous API call to interactive webpage content.

AI-generated description

Requesting data from the Github API

Concept

An example showing how to go from an API request to html element.

MIT Licensed

Similar vizzes

Loading thumbnail…

Requesting data from the Github API

This example demonstrates a simple user-driven data request to the Wikipedia API. It shows how a text input and submit button trigger a `fetch` call to the opensearch endpoint, retrieving and displaying search results based on the submitted subject. The code uses the browser’s built-in `fetch` API to request JSON data, then logs the response and result titles to the console via chained `.then()` promises. The interface includes a loader placeholder and a result article, though the visible rendering of the results is minimal, focusing on the request-response flow.

LLaurens

70% match

Loading thumbnail…

fetching data

This example shows a bare-bones HTML page that fetches data from a remote URL. It demonstrates the basic Fetch API workflow in JavaScript, where a `fetch()` call is made to a GitHub Gist URL and a promise is created to handle the response. The page includes a static "Hello HTML!" message and sets up the foundation for asynchronous data loading, though the response handling is incomplete. The example uses plain HTML, CSS for styling, and JavaScript's built-in `fetch()` function, with no external libraries or visualization components yet.

Sshre1310

68% match

Loading thumbnail…

Gist 7a408ae6b97507c83e6613316e32a9c7

This example contrasts two JavaScript approaches for fetching GitHub user data from the GitHub REST API. It uses the Fetch API to request `https://api.github.com/users/mistyblunch` and logs the resulting JSON. The first method chains `.then()` callbacks in a Promise-based function, while the second defines an `async` function that uses `await` to handle the response and return the parsed JSON object. Neither function performs any visualization or rendering—only console output.

MMistyBlunch

68% match

Loading thumbnail…

Fetching data

This example demonstrates how to fetch and log a remote CSV file using the browser’s Fetch API. It defines an asynchronous helper function that retrieves text from a given URL, then calls it on a GitHub-hosted dataset of boxers, outputting the raw contents to the console. The visualization is minimal, focusing on the data-fetching step rather than rendering, and uses no external libraries—only plain JavaScript within a single HTML file.

CCesar R Castillo

65% match

Loading thumbnail…

BA 401 LOADING DATA

This example demonstrates fetching remote data from a GitHub gist using the Fetch API within a plain HTML and JavaScript setup. The code initializes a URL pointing to a raw text file and calls `fetch(url)` inside a `console.log`, which will output a Promise object to the browser console. It shows the beginning of a data-loading workflow, with React and the Vite development environment as potential context, but does not render any visualization or process the response. The page relies on standard web APIs, with no external visualization libraries included.

NNeetu-Shah

63% match

Loading thumbnail…

Preparing and Loadinng data

This example demonstrates how to fetch and prepare a CSV dataset for visualization, using the Fetch API with async/await to load a list of CSS named colors from a GitHub Gist. The code shows the modern asynchronous pattern of await fetch() and response.text() to retrieve raw text data, replacing the older nested Promise approach often called the "pyramid of doom." The example logs the data to the console, illustrating a clean template for later parsing and visualization with a library like D3.

MMarcus Vinicius da Silveira Richa

62% match

Loading thumbnail…

Fork of HTML Starter-2

This example demonstrates fetching a CSV file and logging its contents to the browser console. It uses the JavaScript `fetch` API within an async function to retrieve a color dataset from a GitHub Gist URL, then converts the response to text with `response.text()`. The code shows both a modern async/await approach and a commented-out promise-chain alternative. No data visualization is rendered; the focus is on establishing a data-loading pattern for a future visual.

Aalexfox

61% match

Loading thumbnail…

Colors

This example demonstrates a color palette visualization, fetched dynamically from a GitHub Gist URL. The page uses a bare HTML structure with embedded JavaScript, relying on the browser’s native `fetch` API to retrieve the data. The code logs the fetch response to the console, showing the raw data payload as it arrives. No CSS styling or rendering logic is yet implemented, leaving the visual output undefined. The example serves as a minimal starter for displaying color-related data using standard web technologies.

OOrvybr0wn1

61% match