JSON from website with "pure" JavaScript > exract and put into variables

Question

I want to create a new Scriptable widget for iOS, showing a so called "blood groups barometer", meaning the current status of blood reserves at the German Red Cross.

I have found this website, where the status is given in the source code, in the form of JSON:

<script type="application/json" data-drupal-selector="drupal-settings-json">
{"path":{"baseUrl":"\/","scriptPath":null,"pathPrefix":"","currentPath":"node\/3","currentPathIsAdmin":false,"isFront":false,"currentLanguage":"de"},"pluralDelimiter":"\u0003","blutgruppen":{"default":{"blood_barometer_a_plus":"1","blood_barometer_b_plus":"2","blood_barometer_ab_plus":"4","blood_barometer_zero_plus":"2","blood_barometer_a_neg":"1","blood_barometer_b_neg":"1","blood_barometer_ab_neg":"2","blood_barometer_zero_neg":"1"},"blood_barometer_changed":"2022-04-22"},"user":{"uid":0,"permissionsHash":"09f524fbefd35c1e3e7cc2b74fe2992115d7821527911825e868534003f88b7a"}}
</script>

Formatted into a readable JSON format:

{
 "path":{
 "baseUrl":"\/",
 "scriptPath":null,
 "pathPrefix":"",
 "currentPath":"node\/3",
 "currentPathIsAdmin":false,
 "isFront":false,
 "currentLanguage":"de"
 },
 "pluralDelimiter":"\u0003",
 "blutgruppen":{
 "default":{
 "blood_barometer_a_plus":"1",
 "blood_barometer_b_plus":"2",
 "blood_barometer_ab_plus":"4",
 "blood_barometer_zero_plus":"2",
 "blood_barometer_a_neg":"1",
 "blood_barometer_b_neg":"1",
 "blood_barometer_ab_neg":"2",
 "blood_barometer_zero_neg":"1"
 },
 "blood_barometer_changed":"2022年04月22日"
 },
 "user":{
 "uid":0,
 "permissionsHash":"09f524fbefd35c1e3e7cc2b74fe2992115d7821527911825e868534003f88b7a"
 }
}

From that, I want to read the following values into JS variables:

 "blutgruppen":{
 "default":{
 "blood_barometer_a_plus":"1",
 "blood_barometer_b_plus":"2",
 "blood_barometer_ab_plus":"4",
 "blood_barometer_zero_plus":"2",
 "blood_barometer_a_neg":"1",
 "blood_barometer_b_neg":"1",
 "blood_barometer_ab_neg":"2",
 "blood_barometer_zero_neg":"1"
 },
 "blood_barometer_changed":"2022年04月22日"
 }

The point is, that Scriptable is not working with jQuery, so I cannot use the following script, which is linked on the above mentioned website (extract):

 jQuery('.blutbeutel-wrapper').each(function () {
 let bestand = drupalSettings.blutgruppen.default[jQuery(this).data('id')];
 var prozent = 11 + (12 * bestand);
 jQuery(this).find('.blut').css({'height': prozent + '%'});
 animationDone = true;
 });

Any hints, how I can a) read the JSON with "pure JS" from the website's source code and b) extract its values into variables?

Update 1

const url = `https://www.blutspende-leben.de/blut-spenden`; 
let request = new Request(url)
let payload = await request.loadString()
let stack = widget.addStack()
const infoText = stack.addText(payload);

Relevant text part of the full string:

<script type=\"application/json\" data-drupal-selector=\"drupal-settings-json\">{\"path\":{\"baseUrl\":\"\\/\",\"scriptPath\":null,\"pathPrefix\":\"\",\"currentPath\":\"node\\/3\",\"currentPathIsAdmin\":false,\"isFront\":false,\"currentLanguage\":\"de\"},\"pluralDelimiter\":\"\\u0003\",\"blutgruppen\":{\"default\":{\"blood_barometer_a_plus\":\"1\",\"blood_barometer_b_plus\":\"2\",\"blood_barometer_ab_plus\":\"4\",\"blood_barometer_zero_plus\":\"2\",\"blood_barometer_a_neg\":\"1\",\"blood_barometer_b_neg\":\"1\",\"blood_barometer_ab_neg\":\"2\",\"blood_barometer_zero_neg\":\"1\"},\"blood_barometer_changed\":\"2022年04月22日\"},\"user\":{\"uid\":0,\"permissionsHash\":\"09f524fbefd35c1e3e7cc2b74fe2992115d7821527911825e868534003f88b7a\"}}</script>\n<script src=\"/sites/default/files/js/js_XYyrLSwI4XKIZtjKBiSeUOL1F_2b9VOK6r4ZEqc1CSQ.js\"></script>

• J nui: it appears that the blutgruppen is a global variable, if so, you can just access it with javascript. let myvar1 = blutgruppen.default.blood_barometer_a_plus
• bivvo: Thank you. My point is, that I do not want to access it from the same page, but remotely loading it locally, then processing the variables from the remote hosted website.
• J nui: rechecked page - global variable is drupalSettings.blutgruppen.default.blood_barometer_a_plus
• J nui: ok, i misunderstood. Regular ajax stuff, look up xhr.open (jquery is easier)
• bivvo: I've managed to grab the full HTML as String. How can I extract the JSON part and put it into JS values? I've added my current code into the body above.

Answer 1

let obj=JSON.parse(document.querySelector('script[type="application/json"]').innerHTML);
let result={};
result.blutgruppen=obj.blutgruppen;
result.blood_barometer_changed=obj.blood_barometer_changed;
console.log(result)

• bivvo: Thx. I assume the website should be loaded into the document variable before? With xhr.open, which was proposed above?
• user17517503: I tought at your html document the JSON file. You should use some variable named blutJSONData (the document variable is reserved). Yes, you can use xhr.open().
• bivvo: I've managed to grab the full HTML as String. How can I extract the JSON part and put it into JS values? I've added my current code into the body above.
• user17517503: Change the obj to JSON.parse(<name of the variable that stores the json string>)
• bivvo: Ok, so I first have to, somehow, extract the JSON part out of the string variable.