Home Using javascript to select values in a JSON object within a script tag in an HTML email file

Questions

Using javascript to select values in a JSON object within a script tag in an HTML email file

January 19, 2023

I need to pull values from a JSON object that’s within a script tag in an HTML file. The HTML is actually an email (.eml) file.

I am using node’s "fs" module to read the file and that works fine. And, generally, I know how to select HTML elements (using document.getElementById, innerHTML, etc) and how to work my way through JSON object hierarchies to select values (using JSON.parse and dot notation, etc). But, I’m not sure how to go about selecting values from within code like this.

X-Account-Key: account31
X-UIDL: 00001b5f073425
X-Mozilla-Status: 0000
X-Mozilla-Status2: 00000000
X-Mozilla-Keys:
... more email header info ...
<html lang=3D"en-US"> <head> </head> <body> <div>  <script data-scope=3D"in=
boxmarkup" type=3D"application/json">{
  "api_version": "1.0",
  "publisher": {
    "api_key": "67892787u2cfedea31b225240gg3423t9",
    "name": "Google Alerts"
  },
  "cards": [ {
    "title": "Google Alert - \"search keywords\"",
    "subtitle": "Highlights from the latest email",
    "actions":
... and so on with JSON object, then closing script tag...
... email body wrapped in DIV tag ...

What if I want to grab publisher.name or any other property’s value from this code?

Any and all pointers appreciated.

>Solution :

Assuming you’ve parsed the HTML into a DOM (you’ve said you know how to do that and use document.getElementById and such), then you need to:

Select the script element
Get its text content
Parse it via JSON.parse
Access the property from the resulting object

You can select the script element from that DOM by using:

const script = document.querySelector("script[type='application/json']");

If there are several, you may need to add more attributes to narrow it down, for instance:

const script = document.querySelector("script[type='application/json'][data-scope='data-scope='inboxmarkup']");

Once you have the script element, you can access its text content via .textContent.

Once you have the text, you can parse it with JSON.parse.

Once you have the object, obj.publisher.name should give you the value you’re looking for.

So:

const script = document.querySelector("script[type='application/json']");
const text = script.textContent;
const obj = JSON.parse(text);
const name = obj.publisher.name;