What is the process for using the GitHub API to access a repository's README document?

For my project, I'm utilizing the GitHub API to access the raw README.md file using /repos/{owner}/{repo}/readme. I've successfully executed the call using Thunderclient in VSCode and retrieved the raw file. https://i.sstatic.net/FtkfW.png

However, when attempting the same call from within my React application, I receive a JSON object structured like this:

{
  "name": "README.md",
  "path": "README.md",
  "sha": "...",
  "size": 9,
  "url": "https://api.github.com/repos/anubhavadarsh/Litaci/contents/README.md?ref=master",
  "html_url": "https://github.com/anubhavadarsh/Litaci/blob/master/README.md",
  "git_url": "https://api.github.com/repos/anubhavadarsh/Litaci/git/blobs/592c92302634be24522f96f3ed6649f389f1aa0d",
  "download_url": "https://raw.githubusercontent.com/anubhavadarsh/Litaci/master/README.md",
  "type": "file",
  "content": "IyBMaXRhY2kK\n",
  "encoding": "base64",
  "_links": {
    "self": "https://api.github.com/repos/anubhavadarsh/Litaci/contents/README.md?ref=master",
    "git": "https://api.github.com/repos/anubhavadarsh/Litaci/git/blobs/592c92302634be24522f96f3ed6649f389f1aa0d",
    "html": "https://github.com/anubhavadarsh/Litaci/blob/master/README.md"
  }
}

Just to note, I tested with a public repository not owned by me and successfully obtained the raw readme. However, my own repository continues to return the JSON object.

javascriptajaxapigithub

Answer №1

The GitHub API provides file content encoded in base64 according to their official documentation. To access this content, you will need to decode it from base64:

  1. Start by installing the js-base64 package (simply run npm i js-base64)

  2. Then, add the following code snippet to your file handling the GET request:

const base64 = require('js-base64').Base64;
// Your existing code
const decodedContent = base64.decode(response.content);

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

What could be causing spacing problems with fontawesome stars in Vue/Nuxt applications?

Currently, I am working on implementing a star rating system in Nuxt.js using fontawesome icons. However, I have encountered an issue where there is a strange whitespace separating two different stars when they are placed next to each other. For instance, ...

javascriptcssvue.jsnuxt.jsfont-awesome

Breaking the website with an HTML comment

Upon clicking a link to another page, I encountered the error message "Failed to execute 'insertBefore' on 'Node." Here is the code snippet that was causing the issue: <template name="reminderPage"> <a href="/newRemind">New! ...

javascripthtmljquery-uimeteoriron-router

How to handle Object data returned asynchronously via Promises in Angular?

Upon receiving an array of Question objects, it appears as a data structure containing question categories and questions within each category. The process involves initializing the object with board: JeopardyBoard = new JeopardyBoard();. Subsequently, popu ...

javascriptarraysangular

Simple solution for storing key-value pairs temporarily in a form using JQuery

Is there an elegant method to temporarily store an array of string values in a form? In my article editing form, users can add tags as string values. I don't want these tags to be persisted until the user saves the entire article, so I require a way ...

javascriptjquery

Issue with JQuery autocomplete

I am encountering an issue with the JQuery Autocomplete plugin where it is not providing autocomplete suggestions when I enter text. Any thoughts on why this might not be working for my code? The basic example works fine, but mine does not seem to functio ...

javascriptjqueryautocomplete

Track WordPress Post Views on Click using AJAX

Is there a way to track the number of post views on my WordPress site using AJAX when a button is clicked? Currently, the view count only updates when the page is refreshed. I want to be able to trigger this function with an AJAX call. Here is the code I ...

javascriptphpjqueryajaxwordpress

Changing a variable in an HTML file using a JavaScript file

I am working with JavaScript code that has been imported from another file containing a variable that I need to update in my HTML file. Is there a way to update the variable without directly inserting the JavaScript code into my HTML document? JavaScript ...

javascripthtml

Instructions on including a directory in the package.json file for publication on npm

I am facing an issue when attempting to publish a module in the npm repository as it is not recognizing the 'lib' folder. Even though I have included it in the package.json file as shown below, the 'lib' folder contents are not being re ...

javascriptnode.jsgitgithubnpm

Issues with clicking on the ion-tab icon in AngularJS are hindering the functionality

I'm currently facing a challenge with an ion-tab icon in my AngularJS project. I've been attempting to add a click action using the code below, but unfortunately, nothing is displaying as expected. HTML <ion-tab title="Share" icon="icon ion- ...

javascripthtmlangularjs

Guide to creating a vertical handler that can be resized

Did you know that you can resize tables in http://www.jsfiddle.net? I'm curious about how to resize just the "Vertical Handler". Could someone share the source code with me? If possible, please provide an example on http://www.jsfiddle.net. ...

javascripthtmlcss

Tips for adjusting the progress bar to 100% and back to 0%

My goal is to increase the progress bar percentage with each click. Currently, it only goes up to 75%. When saving, it should show 100%, but it's not displaying that properly. On clicking the back button, it should reset to 0% on the third click. HTM ...

javascripthtmlcss

Converting SHA1 function from JavaScript to Python

Can you help with translating this Javascript code to Python? def sha1(str1, raw): hexcase = 0 chrsz = 8 str1 = utf16to8(str1) def utf16to8(str): out = "" len = len(str) i = 0 while i < len: ...

javascriptpython

What is the method for triggering the output of a function's value with specified parameters by clicking in an HTML

I am struggling to display a random number output below a button when it is clicked using a function. <!DOCTYPE html> <html> <body> <form> <input type="button" value="Click me" onclick="genRand()"> </form> <scri ...

javascripthtmlfunctiononclick

Preventing long int types from being stored as strings in IndexedDB

The behavior of IndexedDB is causing some unexpected results. When attempting to store a long integer number, it is being stored as a string. This can cause issues with indexing and sorting the data. For instance: const data: { id: string, dateCreated ...

javascripttypescriptindexeddb

Utilize JavaScript to retrieve data from a JSON document

To extract information from a .json file in node.js, the require function is used. I'm currently developing an Artificial Neural Network that utilizes this code to fetch data from the data.json file. const fs = require('fs'); const json = ...

javascriptbrowser

Is there a way to sequentially load two iframes, with the second one loading only after the first one is fully loaded

Having two different links that trigger ajax calls can be tricky if only one request is allowed per load. This may result in both iframes displaying the same data. Is there a way to work around this issue? Perhaps loading one iframe first and then triggeri ...

javascriptjqueryhtmlajaxiframe

Duplicate the identical data retrieval query, this time utilizing a JavaScript Ajax post method

To enhance the data request query, implement a JavaScript Ajax post method to avoid page refresh when the button is pressed. This will allow for requesting another page and displaying it in a designated section on the webpage. Here's the code snippet ...

javascriptphpmysqlajax

conceal a division beneath a YouTube video frame upon clicking

I need to hide the 'div .blind' element when a YouTube video (inside 'div #player') is clicked. How can I achieve this? Here's an example: JS: ... var player; function onYouTubeIframeAPIReady() { player = new YT.Player('pl ...

javascripthtmlcssyoutube

Exploring Frontend Package Dependencies in Different Versions

As I develop the React frontend for a library package, I want to clearly display to users the specific version of the library being utilized. Apart from manual methods or relying on Node.js, I am unsure of alternative approaches to achieve this. I am curi ...

javascriptnpmpackage.json

Update the icon within the expandable display

Is there a way to change the plus sign to a minus sign in an expandable table view on click? (changing fa fa-plus to fa fa-minus) The goal is to have the plus sign displayed when the view is compressed and the minus sign displayed when it is expanded. If ...

javascriptjquerycss