Is it possible to use Google API to fetch specific sections of a document by referencing headings?

I have a document that I extract text from to insert into my webpage. This document is getting larger as it covers more areas, so I want to streamline the process for my single-page application. Currently, I retrieve the entire document using the code snippet below:

async function printGoogleDoc(docID, apiKey){
await fetch(`https://www.googleapis.com/drive/v3/files/${docID}/export?mimeType=text/plain&key=${apiKey}`)
.then(function(res) {
    return res.text();
}).then(function(text) {
    console.log(text);
}).catch(function() {
    console.log("error");
});
}

After retrieving the document, I use JavaScript to sort and display the content on the webpage.

To enhance performance, I would like to extract specific sections of text based on their headings using the Google API, like so:

async function printGoogleDoc(docID, apiKey, heading)

This function would return the text under the specified heading and stop at the next heading.

My question is, how can I achieve this functionality? Is it possible?


Here is a sample layout of the potential Google Doc for further clarification:

h1 Some Title

h2 sub title

content
...
end of content

h2 second sub title

other content

I am using fetch for this task as there is no need for user authentication or authorization since the content is fetched and displayed on the webpage. Is there a way to selectively retrieve only the content under "h2 sub title" and ignore the rest?

Answer №1

It is recommended by Google to utilize their provided libraries in order to access the Google Docs Service.

We advise using the client libraries provided by Google.

If you are not using Google code to interact with the Docs Service, you are likely utilizing the standard REST API.

If you choose to use the REST API, there is a concept of a document that is returned, which differs from the Document Object Model (DOM) document. This Google-created "document" is detailed in the Google documentation and includes a header property. However, this header pertains to header and footer sections of a page, not heading-styled content (or HTML header elements H1-H6).

In conclusion, it is feasible to "download as" a webpage from Google Docs using the REST API by setting the mimetype to text/html in your REST call.

Afterwards, you can utilize a simple tool like JSDOM's CSS selectors (by using document.querySelectorAll) to access headings and adjacent content, perhaps through nextSibling.

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

Looping through each combination of elements in a Map

I have a Map containing Shape objects with unique IDs assigned as keys. My goal is to loop through every pair of Shapes in the Map, ensuring that each pair is only processed once. While I am aware of options like forEach or for..of for looping, I'm s ...

Instead of leaving an Enum value as undefined, using a NONE value provides a more explicit

I've noticed this pattern in code a few times and it's got me thinking. When you check for undefined in a typescript enum, it can lead to unexpected behavior like the example below. enum DoSomething { VALUE1, VALUE2, VALUE3, } f ...

Utilize the capabilities of the Dropbox Core API in Javascript to effortlessly transfer and store files on

I am currently developing a chrome-extension that has the ability to upload files to the user's Dropbox folder. I have implemented AJAX requests in my code to handle file uploads, and it is working fine for text-based file extensions such as .txt, .js ...

Tips for nesting multiple Promise.all: Ways to organize and manage multiple

I am working with multiple arrays of promises Each array is enclosed in a Promise.all() function The then() method of each Promise.all() adds data to a temporary object named tempObject After all the then() functions of the Promise.all() are executed, I ...

Is it possible for an object filter to allow the object to pass through without a designated name?

In the javascript code below, I have managed to achieve the desired outcome by returning the 3rd and 4th objects in objectsArray since they both have the maximum distance. However, I am curious if there is a way to avoid repeating the name of the array whe ...

The share-modal.js file is throwing an error because it is unable to read properties of null, particularly the 'addEventListener' property, at

I encountered an error that I want to resolve, but it's proving to be quite challenging. Despite extensive searching on Google, I haven't found a solution yet. Uncaught TypeError: Cannot read properties of null (reading 'addEventListener&apo ...

Determining the width of a window using JavaScript

My website is experiencing some mysterious issues with $(window).width(). When I open my site in the Chrome Device Toolbar with a window size of 320xXXX, then run $(window).width() in Google Chrome's JavaScript console, it returns 980. As a result, n ...

Executing multiple setTimeout calls simultaneously can result in greater delays than anticipated

During my exploration of Node performance, I encountered an unexpected issue where an example involving 50 concurrent calls to setTimeout took over 4 seconds instead of the anticipated 500ms. The scenario involves a basic express server that waits for all ...

Unable to upload file on ReactJS platform

I'm facing an issue while trying to upload a file and text using a form. The file doesn't get uploaded, although it works fine with Postman. Can anyone identify the problem? Thank you Axios function : postArticles : (content, attachment, header ...

Display a standard chart using the Chart.js library, along with customizable options

I have successfully generated charts from a database using JSON script. However, I am facing an issue where the chart only displays when I click on an option value. What I want to achieve now is setting a default value option so that when the website ope ...

The child's styling is conflicting with the parent's styling

Issue with Parent and Child Component Margins import "../src/App.css"; import CardComponent from "./components/CardComponent"; function App() { return ( <div className="App"> <div className="card"></div> <CardCompon ...

The printout of the webpage is not aligning properly on an A4 page

Currently, I have been utilizing the JavaScript function window.print() to print a webpage that contains a header and footer. The height of this webpage is dynamic, as it is dependent on the content of an HTML table within the page. However, I have encou ...

How can I insert a item into an Array using JavaScript code?

My instructor set up an array in my JavaScript file that is off limits for me to modify. My task is to add new objects to it through code without directly manipulating the existing array. Here's a snapshot of what my array contains: const words = [{ ...

Encountering difficulties while attempting to convert JSON to XML resulting in an error being

I can't seem to figure out how to successfully convert the JSON result into XML format. I've tried the code below but it's not working as expected. Any help would be greatly appreciated. Here is the code snippet: <script src="../Jquery ...

What is the best way to display the tabcontent when clicking on a menu tab in this code, as neither method seems to work?

Take a look at my JSFiddle demo: <http://jsfiddle.net/xrtk9enc/2/> I suspect that the issue lies within the javascript section. My html code includes an Unordered List that serves as the tab menu. Each href of the menu corresponds to a tab content, ...

Displaying 'N/A' in the chart if the data is missing

I have a chart that displays data, but when data does not exist it shows "undefined%". https://i.sstatic.net/Fm3Tl.png Is there a way to remove the "undefined%" and simply display nothing on the graph if no data exists? Here is the code snippet: import { ...

Is there a way to showcase the output of the <div id="height"> on the height of the rectangle?

My Current Project Currently, I am in the process of developing a picture framing calculator using a combination of HTML, CSS, and JavaScript. Functionality of the Calculator For this calculator, users will input values such as: Frame Width (wf): 16 ...

What are your thoughts on the size of a React component being 500 lines long?

Currently, I am in the process of constructing a Table component that includes filters and requires an extensive amount of logic. Additionally, I have incorporated material UI which tends to add multiple lines of code. Despite these elements, I feel that ...

Failure to showcase AJAX JSON data on DataTable

Issue with DataTable and AJAX JSON Data I have been encountering an issue while working on a project that involves using DataTable to display POST data via AJAX. The problem I am facing is that all the records are being displayed without pagination, even ...

Is it possible to transfer a Mongo connection to JQuery code using socket.io?

I'm currently working on setting up a global MongoDB connection in my node.js web app. Here is what I have so far: var MongoClient = require('mongodb').MongoClient; var mconn = null; MongoClient.connect('mongodb://myHost:27017/users&a ...