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>

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; — J nui, Apr 25 '22 at 17:55
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. — bivvo, Apr 25 '22 at 17:59
rechecked page - global variable is drupalSettings.blutgruppen.default.blood_barometer_a_plus — J nui, Apr 25 '22 at 18:01
ok, i misunderstood. Regular ajax stuff, look up xhr.open (jquery is easier) — J nui, Apr 25 '22 at 18:09
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. — bivvo, Apr 26 '22 at 09:29

score 1 · Accepted Answer · answered Apr 25 '22 at 18:19

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)

answered Apr 25 '22 at 18:19

user17517503

155
11

Thx. I assume the website should be loaded into the document variable before? With xhr.open, which was proposed above? – bivvo Apr 25 '22 at 21:24
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(). – user17517503 Apr 25 '22 at 21:27
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. – bivvo Apr 26 '22 at 09:26
1

Change the obj to `JSON.parse()` – user17517503 Apr 26 '22 at 10:18
Ok, so I first have to, somehow, extract the JSON part out of the string variable. – bivvo Apr 26 '22 at 11:53
yesss, that works well. thank you very much! – bivvo Apr 26 '22 at 22:06

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

1 Answers1