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

141 views Asked by At

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>
1

There are 1 answers

6
user17517503 On BEST ANSWER
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)