Get the HTML code for the ReadMe file

Hey there, so I'm diving into the world of APIs for the first time and I stumbled across some interesting information on the GitHub API:

It seems that READMEs can be accessed in custom media types to retrieve raw content or rendered HTML.

Check it out here:

If my understanding is correct, this means we can get an HTML-formatted version of the README contents. How would one go about retrieving this using AJAX instead of curl, which most tutorials seem to focus on? My goal is to display part of it on my website, and having it in HTML format would make things a lot simpler compared to markdown.

The documentation mentions using: application/vnd.github.VERSION.html

I'm a bit lost on how to actually implement this. Any guidance would be appreciated!

Thanks in advance!

javascriptajaxgithub-api

Answer №1

To retrieve the HTML content from GitHub's API, you must include the Accept header in your HTTP request with a value of application/vnd.github.html.

$.ajax({
  url: 'https://api.github.com/repos/just95/toml.dart/readme',
  headers: { 'Accept': 'application/vnd.github.html' }
}).done(function(data) {
  alert(data);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer №2

To include the Accept header in your HTTPS request, you can use tools like cURL:

curl -i -H "Accept: application/vnd.github.v3.html" https://api.github.com/repos/github/developer.github.com/readme

If you prefer working with JavaScript:

var apiRoot = 'https://api.github.com';
var myUser = YOUR_USER_HERE;
var myRepo = YOUR_REPO_HERE;
var request = new XMLHttpRequest();
request.open('GET', apiRoot + '/repos/' + myUser + '/' + myRepo + '/readme');
request.setRequestHeader('Accept','application/vnd.github.v3.html');
/* add event listeners... */
request.onreadystatechange = function() {
  if (request.readyState === 4 && request.status === 200) {
    document.body.innerHTML = request.response;
  }
};
request.send();

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring the integration of query parameters in Postman using mongoose

In my code, I have a driver.js file that holds a driver schema, and a driverController.js file with REST methods including GET, POST, DELETE, and PUT. What I want to achieve is to send a GET request to http://localhost:3000/drivers?available=true This re ...

javascriptnode.jsmongodbrestexpress

Is there a more effective approach to managing an array of objects retrieved from an API call?

I'm attempting to extract an array of names from a JSON response that contains an array of objects, but I'm running into issues. When I try to print the array, it shows up empty. Is this the correct way to go about it? There don't seem to be ...

javascriptreactjs

What is preventing me from retrieving the data stored in my JSON?

My PHP code snippet involves checking if POST data is not empty and the action is 'edit'. If this condition is met, it fetches data from the database based on the selected IDs and prepares a JSON response. if(!empty($_POST)&&($_POST[&apo ...

javascriptphpjqueryjson

Should the article ID be sent to the ajax file, or should the ajax file retrieve the article ID directly? This dilemma arises in a

I am trying to pass the current article ID to an ajax file. The URL of the ajax file is something like www.web.com/plugins/system/ajax.php, so using JRequest::getInt(id) always returns 0 integer. However, in a non-ajax file, I can get the ID the same way. ...

javascriptphpajaxpluginsjoomla

Is it feasible to indent lines in a template without affecting the content alignment?

Creating a string with newlines that will be included in an email later. if (action) { description = ` Git pull request action: ${action} Git pull request for repo: ${req.body.repository.full_name} Git pull request for repo URL: ${re ...

javascriptnode.jsecmascript-6

I'm encountering an issue when trying to build a React application

Unable to perform EPERM operation, the command "mkdir c:" is not found when trying to create a React app using npx create-react-app myapp ...

javascriptnode.jsreactjs

Tips for fetching AJAX response when sending a POST method

Currently, I am dealing with a situation where I have an html <input type="file" and I am using ajax to send the chosen file. On the server side, I have set a limit of 2MB for file size. If the file exceeds this limit, a message is sent back to the clie ...

javascriptjavajqueryajaxmultipartconfig

How can you customize the output buffer size (known as highWaterMark) for child_process.spawn() in node.js?

I'm currently working on adjusting the buffer size (highWaterMark) for the stdout coming from a child_process.spawn() function, but I'm encountering difficulties in achieving this successfully. The code snippet provided below demonstrates my obje ...

javascriptnode.js

The Alert Component fails to display when the same Error is triggered for the second time

In the midst of developing a Website using Nuxt.js (Vue.js), I've encountered an issue with my custom Alert Component. I designed a contact form on the site to trigger a specialized notification when users input incorrect data or omit required fields ...

javascripthtmlcssvue.jsnuxt.js

Importing a JSON file into a React component

I have a JSON file that I am importing in my React project: import React from 'react'; import Test1 from './test1.jsx'; import data from './data.json'; class TestWrapper extends React.Component { render () { return ( ...

javascriptjsonreactjs

Python Mechanization Problems

I recently started delving into the world of Mechanize, beginning my learning journey just yesterday. Just to clarify, my motives are purely educational, with no intention of causing harm. I selected this particular site due to its use of AJAX/Javascript ...

javascriptajaxpostmechanize-python

Receiving the error "Undefined chart type" when using $q.all with Google Chart API Promise

I am currently working on implementing angular-google-charts using the $http service to retrieve data and display it on charts. I found a helpful tutorial on this blog post: since the GitHub README for angular-google-charts lacks examples of backend data ...

javascriptangularjschartsgoogle-visualization

The class 'ConsoleTVsChartsCharts' could not be located

Attempting to implement Laravel charts using the package consoletvs/charts:6.*, Utilizing service providers ConsoleTVs\Charts\ChartsServiceProvider::class, With an alias: 'Charts' => ConsoleTVs\Charts\Charts::class, ...

javascriptphplaravelcharts

Error: Unable to access the currentTime property as it is not defined

Incorporating Videojs into my react application has presented a challenge. I am attempting to set the current time of the videojs player, but keep encountering an error that reads "cannot read property currentTime of undefined". Below is my approach: var ...

javascriptreactjsvideo.js

Having trouble implementing a custom font family in a React Native Text component

Struggling to integrate a custom font into my react native app, I've gone through various solutions from SO and Google but nothing seems to work. I attempted to inform react native about the font by adding "rnpm": { "assets": [ "./assets/fonts/" ...

javascriptreactjsreact-nativefontsexpo

I want the navigation bar to appear only upon scrolling, but when I refresh the page it is already visible, and then vanishes as I start scrolling

I'm working on a project where I want the navigation bar to only appear after scrolling a certain distance down the page. However, I've noticed that when I refresh the browser, the navigation bar appears immediately and then disappears once I sta ...

javascripthtmlcssnavigationbar

Using jQuery to retrieve a file that has been uploaded through an input field with the type of 'file'

I am looking to extract the file that has been uploaded using an <input type='file'> tag. Currently, when I use $('#inputId').val(), it only retrieves the name of the file, not the actual content of the file itself. I came acros ...

javascriptjquery

Utilize the Power of React.js and Express.js to Send Emails

After building a web app using React.js in ES6, I found myself wanting to add a "Contact Us" page that allows users to send an email. However, as a newcomer to React, I discovered that React itself cannot directly send emails. Following tutorials with node ...

javascriptnode.jsemailexpressreactjs

The value of type 'X' cannot be assigned to type 'Y' or 'undefined'

In my code, there is a component that requires a prop with an enum value: export enum AType { some = "SOME", word = "WORD", } const MyComponent = (arg: AType) => {} When I try calling this component like so: <MyComponent ar ...

javascriptreactjstypescript

"Troubleshooting a Stream Problem with the JSON HTTP Module

I have a custom HTTP Module that I utilize to sanitize the JSON response from my web service. This is particularly useful when making cross-domain JSON web service calls from JavaScript. You can check out an example of this implementation at this link. Th ...

asp.netajaxjson