Parse HTTP Response with JS and pass its two values into a div

Question

I'm currently trying to process an HTTP Response from the Google Sheets API and pass two specific cell values into an HTML Div each. Unfortunately, I'm a beginner with Javascript and can't quite modify my code to parse the request into usable JS objects and pass them to a value so I can use functions to write the values into their respective Div.

My Code so far:

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();

Spreadsheet_ID and API_Key are placeholders.

The server returns an answer formatted like this:

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

My goal is to get Value 1 in a specific Div and Value 2 into a different one.

How do I process the HTTP response and at which point can I transfer the values into a variable?

Answer 1

I solved the problem by changing the way to get there. Parsing wasn't necessary, I simply cut the HTTP string to the characters I needed and used the JS .substring and .slice to first remove 67 characters before, then defining the limiting character at the end.