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.