Utilize JavaScript to extract information from an HTTP Response and insert both values into a <div> element

As a novice in Javascript, I am currently grappling with the task of extracting two specific cell values from an HTTP Response provided by the Google Sheets API and inserting them into separate HTML Div elements. I am struggling with modifying my code to effectively parse the response into JS objects and assign them to variables for further manipulation in order to display them in their respective Divs.

Here is the snippet of code I have been working on:

var url = "https://sheets.googleapis.com/v4/spreadsheets/SPREADSHEET_ID/values/B2%3AC2?dateTimeRenderOption=FORMATTED_STRING&key=API_KEY";

var xhr = new XMLHttpRequest();
xhr.open("GET", url);

xhr.onreadystatechange = function(){
if (xhr.readyState === 4){
console.log(xhr.status);
console.log(xhr.responseText);
}};

xhr.send();

Please note that "SPREADSHEET_ID" and "API_KEY" are just placeholders.

The response from the server is structured like this:

{
"range": "Sheet1!B2:C2",
"majorDimension": "ROWS",
"values": [
[
  "Value 1",
  "Value 2"
]
]
}

My main objective is to extract "Value 1" and populate it in one specific Div, while "Value 2" should be displayed in a different Div.

I am seeking guidance on how to properly handle the HTTP response and when to store the retrieved values in variables for further processing.

Answer №1

To overcome the challenge, I approached it from a different angle. Instead of parsing the data, I opted to extract the necessary information by manipulating the HTTP string. By utilizing JavaScript's .substring and .slice methods, I successfully trimmed off the first 67 characters before pinpointing the ending character, achieving the desired outcome.

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

From SketchUp to Canvas

I've been trying to figure out how to display a 3D model created in SketchUp on a web page. After discovering three.js and exporting the model to a .dae file for use with ColladaLoader, I still can't get it to appear on my canvas. (I'm using ...

What could be the reason for encountering the error "logic is not defined" in this particular

Having recently started learning JS and React, I encountered an error that stated: "logic is not defined". class Keyboard extends React.Component { logic() { return false; } render() { return ( <div> <h1>{log ...

I am facing an issue where both curl and file_get_contents are not functioning properly after

When attempting to access a user's city information using coordinates, I have encountered an issue with the response not being displayed in my console. The process involves a javascript function that takes latitude and longitude data, sends it to a PH ...

The .env file is functioning properly for the current keys, but any new ones I include remain undefined

Recently, I took over a Vue application that utilizes axios. Within the dataService.js file, it retrieves URLs from a project's .env file using process.env.FOO_BAR for GET requests. The pre-existing key-value pairs such as VUE_APP_DATA_URL function p ...

The function causes changes to an object parameter once it has been executed

I've encountered an issue with a function that is supposed to generate a string value from an object argument. When I call this function and then try to use the argument in another function, it seems to be getting changed somehow. Here is the code fo ...

I am interested in using a loop in Angular to highlight my div element

Enhancing my comprehension regarding the mentioned images. If I don't select anything within the div property, the default style (css) should appear like this, at least when one div is selected. However, the issue arises when unable to select. This ...

Refreshing the page using AJAX in WooCommerce after executing my custom script

I am experiencing an issue with WooCommerce. I am trying to incorporate a custom jQuery script that executes after clicking the add to cart button. When I do not include my script, everything functions properly - the AJAX request triggers and the product i ...

Steps to creating an elliptical border using CSS

Is there a way to apply CSS styles specifically to the left border of a div to achieve an elliptical shape, while keeping other borders normal? I've managed to create a semi-ellipse with the following code, but the rest of the border remains unchanged ...

A comprehensive guide on making an AJAX call to a self-hosted servlet

I created a servlet in Eclipse IDE for Java EE that posts data as an XML page and hosted it on a Tomcat server. The servlet can be accessed at http://localhost:8080/Checkers/CheckersServlet. When I open this URL in Firefox, the XML loads correctly. Now, I& ...

Arranging pre-selected checkboxes in MUI Datatable

I noticed that the checked data is appearing at the top of MUI data tables without any sorting. Checkbox In this image you can see that all the checked boxes are mixed up without any order. I would like to have all the checked rows displayed together and ...

Obtain the dynamic $scope variable within the HTML structure

When creating numerous directives with dynamic scope variables initialized in the link functions, accessing these values within the directive templates can get tricky. For example: // link: function(scope, ele, attr){ scope.key = scope.somevar + 's ...

issue with AngularJS model not initially binding to select dropdown

I am facing an issue with a select dropdown in my code. I am using ng-repeat to populate the dropdown like this: <select ng-model="tstCtrl.model.value" required> <option ng-repeat="option in tstCtrl.myOptions" value="{{option.a}}">{{option.b ...

Develop a personalized conditional rendering directive in Vue.js

I am exploring how to create a custom Vue conditional directive. While I could simply use a global method and call it within a v-if, I prefer the idea of having a dedicated directive for clarity in my code. My objective is to apply this directive to an el ...

What methods can be used to modify the appearance of the cursor depending on its position?

Is there a way to change the cursor to a left arrow when on the left half of the screen and switch it to a right arrow when on the right half, using JavaScript? I am trying to achieve something similar to what is shown on this website. I attempted to acco ...

Show the cell data when the checkbox next to it is selected

I have a specific table setup and I am trying to display the content of the table cell if its corresponding checkbox is checked upon clicking a button. For example: If Row2 is checked, an alert box should display Row2 Below is my code snippet, Java ...

Discovering the final step of a for loop when working with JavaScript objects

Currently, my data consists of: {12: Object, 13: Object, 14: Object} I need help figuring out how to detect the final iteration in the for loop below: for (var i in objs){ console.log(objs[i]); } Does anyone have any solutions? ...

What is the best way to implement jQuery after new elements have been added to the DOM?

I'm currently working on a Sentence Generator project. The program is designed to take a list of words and retrieve sentences from sentence.yourdictionary.com based on those words. The first sentence fetched from the website is displayed using the cod ...

Guide to configuring browserify

After installing the modules (browserify, react, reactify), I attempted to process a JSX file using browserify. var React = require("react"); var App = React.createClass({ render: function () { return <h1>111</h1> } }); React ...

What is the best way to retrieve data from localStorage while using getServerSideProps?

I'm currently developing a next.js application and have successfully integrated JWT authentication. Each time a user requests data from the database, a middleware function is triggered to validate the req.body.token. If the token is valid, the server ...

Tips for updating an element in an array by using another element from a separate array

What is the objective? We have two arrays: orders and NewOrders We need to check for any orders with the same order_id in both arrays. If there is a match, we then compare the order status. If the order from the NewOrders array has a different status, w ...