Parse script in string format to JSON

Question

I am trying to parse a string that comes from a database into useable JSON in Node.js

This is the string

"<script type=\"application/json\">\n[\n    {\n        \"id\": \"test1_label\",\n        \"variants\": [\n            {\n                \"name\": \"when-all\",\n                \"values\": [\n                    {\n                        \"main\": false,\n                        \"name\": \"test1_label\",\n                        \"type\": \"swatch\",\n                        \"property\": \"@background-color\",\n                        \"value\": \"primary-dark\",\n                        \"id\": \"34543\"\n                    }\n                ]\n            }\n        ]\n    }\n]\n</script>"

The data that is saved looks like this and I am trying to get it back to this original format once retrieved.

[
    {
        "id": "test1_label",
        "variants": [
            {
                "name": "when-all",
                "values": [
                    {
                        "main": false,
                        "name": "test1_label",
                        "type": "swatch",
                        "property": "@background-color",
                        "value": "primary-dark",
                        "id": "34543"
                    }
                ]
            }
        ]
    }
]

I've tried to use replace with regex to clean it up and then parse it but no luck.

Answer 1

That string isn't valid JSON. It's HTML. You could use the DOM parser and extract the JSON.

const html =
  '<script type="application/json">\n[\n    {\n        "id": "test1_label",\n        "variants": [\n            {\n                "name": "when-all",\n                "values": [\n                    {\n                        "main": false,\n                        "name": "test1_label",\n                        "type": "swatch",\n                        "property": "@background-color",\n                        "value": "primary-dark",\n                        "id": "34543"\n                    }\n                ]\n            }\n        ]\n    }\n]\n</script>';

const parser = new DOMParser();

const htmlElement = parser.parseFromString(html, 'text/html');

const json = htmlElement.firstChild.textContent;
const array = JSON.parse(json);
console.log(array);

parseFromString creates an HTML element containing the script element. firstChild is the script element. textContent is the JSON string inside the script element. You can parse the JSON string to an array and use it as usual.

This code doesn't work in the stack snippet, but I've tested it on my local machine.

Answer 2

Could you just remove the <script> wrapper and then parse the JSON data?

const dataStr = "<script type=\"application/json\">\n[\n    {\n        \"id\": \"test1_label\",\n        \"variants\": [\n            {\n                \"name\": \"when-all\",\n                \"values\": [\n                    {\n                        \"main\": false,\n                        \"name\": \"test1_label\",\n                        \"type\": \"swatch\",\n                        \"property\": \"@background-color\",\n                        \"value\": \"primary-dark\",\n                        \"id\": \"34543\"\n                    }\n                ]\n            }\n        ]\n    }\n]\n</script>";

function getData(dataStr) {
  JSON.parse(
    return dataStr
      .replace(/^<script type="application\/json"\>/, "")
      .replace(/<\/script>$/, "")
  );
}

console.log(getData(dataStr));

Answer 3

here is the solution. @AndyJamesN

let scriptData  = "<script type=\"application/json\">\n[\n    {\n        \"id\": \"test1_label\",\n        \"variants\": [\n            {\n                \"name\": \"when-all\",\n                \"values\": [\n                    {\n                        \"main\": false,\n                        \"name\": \"test1_label\",\n                        \"type\": \"swatch\",\n                        \"property\": \"@background-color\",\n                        \"value\": \"primary-dark\",\n                        \"id\": \"34543\"\n                    }\n                ]\n            }\n        ]\n    }\n]\n</script>"

let finalJSON =  JSON.parse(scriptData.substring(

    scriptData.indexOf("["), 

scriptData.lastIndexOf("]") + 1
));
console.log(finalJSON);

Answer 4

Since this is html and not valid JSON it needed an HTML parser as pointed out by @jabaa and his answer is perfect if doing this from a browser where the DOM Parser is available

In my case I was getting the data in a Node.js environment so I had to use a DOM Parser and opted for himalaya

Solution

import { parse } from 'himalaya';
const embed = "<script type=\"application/json\">\n[\n    {\n        \"id\": \"test1_label\",\n        \"variants\": [\n            {\n                \"name\": \"when-all\",\n                \"values\": [\n                    {\n                        \"main\": false,\n                        \"name\": \"test1_label\",\n                        \"type\": \"swatch\",\n                        \"property\": \"@background-color\",\n                        \"value\": \"primary-dark\",\n                        \"id\": \"34543\"\n                    }\n                ]\n            }\n        ]\n    }\n]\n</script>"
const dom = parse(embed);
JSON.parse(dom[0].children[0].content)