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.

CodePudding user response：

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.

CodePudding user response：

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));

CodePudding user response：

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);