CSS inside JSON | SpeakJS | Page 1

gusty owl Mar 22, 2023, 2:08 PM

#

Hey guys 👋

I've got a JSON file in which one of the values is a HTML, tough its kinda strange and I am not sure what is the best way to deal with it.

I'm attaching the value for your reference:

[{\"group_order\":0,\"group_name\":\"1\",\"option_text\":\"\\u003cdiv style=\\\"color: rgb(0, 0, 0); font-family: Arial, sans-serif; font-size: 14.6667px; font-style: normal; font-weight: 400; opacity: 1; vertical-align: baseline; top: auto; position: static;\\\"\\u003e\\u003cp\\u003e reduced visibility \\u0026gt; Heavy Rain\\u003c/p\\u003e\\u003c/div\\u003e\"},{\"group_order\":1,\"group_name\":\"1\",\"option_text\":\"\\u003cdiv style=\\\"color: rgb(0, 0, 0); font-family: Arial, sans-serif; font-size: 14.6667px; font-style: normal; font-weight: 400; opacity: 1; vertical-align: baseline; top: auto; position: static;\\\"\\u003e\\u003cp\\u003e reduced visibility \\u0026gt; Lighting\\u003c/p\\u003e\\u003c/div\\u003e\"},{\"group_order\":2,\"group_name\":\"1\",\"option_text\":\"\\u003cdiv style=\\\"color: rgb(0, 0, 0); font-family: Arial, sans-serif; font-size: 14.6667px; font-style: normal; font-weight: 400; opacity: 1; vertical-align: baseline; top: auto; position: static;\\\"\\u003e\\u003cp\\u003e reduced visibility \\u0026gt; Thunderstorm\\u003c/p\\u003e\\u003c/div\\u003e\"},{\"group_order\":3,\"group_name\":\"1\",\"option_text\":\"\\u003cdiv style=\\\"color: rgb(0, 0, 0); font-family: Arial, sans-serif; font-size: 14.6667px; font-style: normal; font-weight: 400; opacity: 1; vertical-align: baseline; top: auto; position: static;\\\"\\u003e\\u003cp\\u003e reduced visibility \\u0026gt; Windy \\u003c/p\\u003e\\u003c/div\\u003e\"}]

How would you guys suggest I convert this into this format:

[group order] [text] [text]

for example:
0 reduced visibility Heavy Rain
1 reduced visibility Lighting
2 reduced visibility Thunderstorm
3 reduced visibility Windy

keen island Mar 22, 2023, 2:10 PM

#

in what environment (browser or node)?

gusty owl Mar 22, 2023, 2:11 PM

#

I basically wanted to just strip this info out and just rebuild the JSON API

#

I don't usually touch CSS HTML, so I'm like really confused how I can go about dealing with this

keen island Mar 22, 2023, 2:13 PM

#

wanna answer the question?

gusty owl Mar 22, 2023, 2:13 PM

#

browser

gusty owl Mar 22, 2023, 2:13 PM

#

keen island wanna answer the question?

sorry 😅

keen island Mar 22, 2023, 2:14 PM

#

const data = JSON.parse(yourJSON);

const el = document.createElement('div');
el.innerHTML = data[0].option_text;
const text = el.textContent; // ' reduced visibility > Heavy Rain'

nasty and probably a better way, but it works. loop or reduce as necessary.

gusty owl Mar 22, 2023, 2:15 PM

#

wow

#

I'm blown, what was seeming like a nightmare to deal with

#

you just solved it in a giffy

#

thank you so much

#

@keen island would you know how can I go about achieving this in python?

#

@keen island apologies for the ping again, but I'm so confused because that code really looks like a mess to me, how can I beautify it for me to have a proper viewing of it to know whats going on

#

I tried some online tools, but they weren't able to comprehend whats going on in it

keen island Mar 22, 2023, 2:22 PM

#

what is a mess?

#

const el = document.createElement('div');
for (const entry of data) {
    el.innerHTML = entry.option_text;
    const optionText = el.textContent.trim();
    console.log(`${entry.group_order} ${optionText}`);
}

gusty owl Mar 22, 2023, 2:22 PM

#

[{\"group_order\":0,\"group_name\":\"1\",\"option_text\":\"\\u003cdiv style=\\\"color: rgb(0, 0, 0); font-family: Arial, sans-serif; font-size: 14.6667px; font-style: normal; font-weight: 400; opacity: 1; vertical-align: baseline; top: auto; position: static;\\\"\\u003e\\u003cp\\u003e reduced visibility \\u0026gt; Heavy Rain\\u003c/p\\u003e\\u003c/div\\u003e\"},{\"group_order\":1,\"group_name\":\"1\",\"option_text\":\"\\u003cdiv style=\\\"color: rgb(0, 0, 0); font-family: Arial, sans-serif; font-size: 14.6667px; font-style: normal; font-weight: 400; opacity: 1; vertical-align: baseline; top: auto; position: static;\\\"\\u003e\\u003cp\\u003e reduced visibility \\u0026gt; Lighting\\u003c/p\\u003e\\u003c/div\\u003e\"},{\"group_order\":2,\"group_name\":\"1\",\"option_text\":\"\\u003cdiv style=\\\"color: rgb(0, 0, 0); font-family: Arial, sans-serif; font-size: 14.6667px; font-style: normal; font-weight: 400; opacity: 1; vertical-align: baseline; top: auto; position: static;\\\"\\u003e\\u003cp\\u003e reduced visibility \\u0026gt; Thunderstorm\\u003c/p\\u003e\\u003c/div\\u003e\"},{\"group_order\":3,\"group_name\":\"1\",\"option_text\":\"\\u003cdiv style=\\\"color: rgb(0, 0, 0); font-family: Arial, sans-serif; font-size: 14.6667px; font-style: normal; font-weight: 400; opacity: 1; vertical-align: baseline; top: auto; position: static;\\\"\\u003e\\u003cp\\u003e reduced visibility \\u0026gt; Windy \\u003c/p\\u003e\\u003c/div\\u003e\"}]

#

This

keen island Mar 22, 2023, 2:22 PM

#

it's JSON

#

gusty owl Mar 22, 2023, 2:26 PM

#

So the actual JSON looks like this

{
  "qtext": "<div style=\"color: rgb(0, 0, 0); font-family: Arial, sans-serif; font-size: 14.6667px; font-style: normal; font-weight: 400; opacity: 1; vertical-align: baseline; top: auto; position: static;\"><p> Mist (BR) is defined as being:</p></div>",
  "choices": "[{\\\"group_order\\\":0,\\\"group_name\\\":\\\"1\\\",\\\"option_text\\\":\\\"\\\\u003cdiv style=\\\\\\\"color: rgb(0, 0, 0); font-family: Arial, sans-serif; font-size: 14.6667px; font-style: normal; font-weight: 400; opacity: 1; vertical-align: baseline; top: auto; position: static;\\\\\\\"\\\\u003e\\\\u003cp\\\\u003e reduced visibility \\\\u0026gt; Heavy Rain\\\\u003c/p\\\\u003e\\\\u003c/div\\\\u003e\\\"},{\\\"group_order\\\":1,\\\"group_name\\\":\\\"1\\\",\\\"option_text\\\":\\\"\\\\u003cdiv style=\\\\\\\"color: rgb(0, 0, 0); font-family: Arial, sans-serif; font-size: 14.6667px; font-style: normal; font-weight: 400; opacity: 1; vertical-align: baseline; top: auto; position: static;\\\\\\\"\\\\u003e\\\\u003cp\\\\u003e reduced visibility \\\\u0026gt; Lighting\\\\u003c/p\\\\u003e\\\\u003c/div\\\\u003e\\\"},{\\\"group_order\\\":2,\\\"group_name\\\":\\\"1\\\",\\\"option_text\\\":\\\"\\\\u003cdiv style=\\\\\\\"color: rgb(0, 0, 0); font-family: Arial, sans-serif; font-size: 14.6667px; font-style: normal; font-weight: 400; opacity: 1; vertical-align: baseline; top: auto; position: static;\\\\\\\"\\\\u003e\\\\u003cp\\\\u003e reduced visibility \\\\u0026gt; Thunderstorm\\\\u003c/p\\\\u003e\\\\u003c/div\\\\u003e\\\"},{\\\"group_order\\\":3,\\\"group_name\\\":\\\"1\\\",\\\"option_text\\\":\\\"\\\\u003cdiv style=\\\\\\\"color: rgb(0, 0, 0); font-family: Arial, sans-serif; font-size: 14.6667px; font-style: normal; font-weight: 400; opacity: 1; vertical-align: baseline; top: auto; position: static;\\\\\\\"\\\\u003e\\\\u003cp\\\\u003e reduced visibility \\\\u0026gt; Windy \\\\u003c/p\\\\u003e\\\\u003c/div\\\\u003e\\\"}]",
  "answer": "3"
}

keen island Mar 22, 2023, 2:28 PM

#

JSON.parse(data.choices)

gusty owl Mar 22, 2023, 2:28 PM

#

gusty owl ```html [{\"group_order\":0,\"group_name\":\"1\",\"option_text\":\"\\u003cdiv st...

the JSON parsers I used weren't able to authenticate this json, I'm not sure how its working in browser 😅

keen island Mar 22, 2023, 2:28 PM

#

ya, that JSON is invalid

#

the first one you gave isn't, but this is

gusty owl Mar 22, 2023, 2:29 PM

#

yeah thats the proper json but inside choices I was trying to extract
0 reduced visibility Heavy Rain
1 reduced visibility Lighting

#

but was really confused, as I shy away from HTML CSS personally

keen island Mar 22, 2023, 2:30 PM

#

without valid JSON, good luck

#

what API are you using?

gusty owl Mar 22, 2023, 2:31 PM

#

this is from the api, I checked many times

#

I scrapped it off from a mcq website

keen island Mar 22, 2023, 2:34 PM

#

scraping is not an API. if this data is your own creation, it's invalid.

gusty owl Mar 22, 2023, 2:34 PM

#

my end goal is to just scrape the questions and just make a pdf doc for me to quickly study on the go

keen island Mar 22, 2023, 2:35 PM

#

no idea what mcq is, but the string in choices is not valid JSON.

#

so, good luck parsing it.

gusty owl Mar 22, 2023, 2:35 PM

#

what do you think it is

#

I don't think its JSON

#

choices is probably smthn the site reads and displays the options

#

\\u003e reduced visibility \\u0026gt; Heavy Rain I am not sure what kind of data is this

keen island Mar 22, 2023, 2:39 PM

#

unicode

gusty owl Mar 22, 2023, 2:43 PM

#

I tried to decode this in unicode

#

but it didn't work

#

the option I'm seeing is using regex, but I just wanna keep that as last resort, I'm sure there's a cleaner way to go about this

keen island Mar 22, 2023, 2:45 PM

#

JSON.parse(data2.choices.replaceAll(/\\(?!\\)/g, '').replaceAll('\\\\', '\\'))

#

#

gusty owl Mar 22, 2023, 4:18 PM

#

Wow Agoknee, you really made it look so easy

#

I've been trying to parse the JSON, but I keep getting Syntax error

#

#

i've cross referenced many times, I'm not sure why its throwing that error at me

#

const data = 'JSONstring';
const el = document.createElement('div');
for (const choice of JSON.parse(data.choices.replaceAll(/\\(?!\\)/g, '').replaceAll('\\\\', '\\'))) {
    el.innerHTML = choice.option_text;
    const optionText = el.textContent;
    console.log(`${choice.group_order} ${optionText}`);
}

#

When I run that, I get this error

#

@keen island (sorry for the ping 😅 )

keen island Mar 22, 2023, 4:37 PM

#

data should be the JS object you were pasting above, not JSON

#

#1088101959308947528 message

gusty owl Mar 22, 2023, 4:39 PM

#

Ohh

#

I still get the replaceAll error tough

keen island Mar 22, 2023, 4:40 PM

#

because you're attempting to access a property of a string...

gusty owl Mar 22, 2023, 4:40 PM

#

😅

#

how did you get it working this

keen island Mar 22, 2023, 4:41 PM

#

I used an actual JS object, not a JSON string (like I just said)...

#

whatever you pasted above is already parsed...

gusty owl Mar 22, 2023, 4:41 PM

#

wouldn't this go into the json and look for choices?

gusty owl Mar 22, 2023, 4:42 PM

#

keen island I used an actual JS object, not a JSON string (like I just said)...

can you please share that with me, I'm a little weak when it comes to js

keen island Mar 22, 2023, 4:42 PM

#

once again, what you pasted is a JS object not a JSON string. yes, it will fail to parse because it's already parsed.

#

wherever you got that, already parsed it. stop trying to parse it again.

gusty owl Mar 22, 2023, 4:43 PM

#

Ohh got ya

#

I keep getting that error tough

keen island Mar 22, 2023, 4:48 PM

#

because you aren't listening

gusty owl Mar 22, 2023, 4:49 PM

#

I'm sorry 😅

keen island Mar 22, 2023, 4:49 PM

#

show how you are obtaining the data.

gusty owl Mar 22, 2023, 4:49 PM

#

keen island Mar 22, 2023, 4:49 PM

#

...

#

that is not the last set of data you provided

gusty owl Mar 22, 2023, 4:50 PM

#

gusty owl ```html [{\"group_order\":0,\"group_name\":\"1\",\"option_text\":\"\\u003cdiv st...

I copied this

keen island Mar 22, 2023, 4:50 PM

#

the string you're assigning to data is data.choices

gusty owl Mar 22, 2023, 4:50 PM

#

yeah

keen island Mar 22, 2023, 4:51 PM

#

why would you copy that, when you followed-it up saying that wasn't the actual data?

#

SHOW HOW YOU ARE OBTAINING THE DATA. NOT YOUR RANDOM PASTES INTO CONSOLE

gusty owl Mar 22, 2023, 4:52 PM

#

gusty owl So the actual JSON looks like this ```json { "qtext": "<div style=\"color: rg...

I was trying to parse this JSON, but you mentioned that this JSON is already parsed so I assumed to just put the choices string in it

keen island Mar 22, 2023, 4:52 PM

#

...

gusty owl Mar 22, 2023, 4:53 PM

#

What I have is a simple JSON file stored on my comp

#

not retrieving it from any api, as its dead

keen island Mar 22, 2023, 4:54 PM

#

I don't give a shit where you are getting it. I asked how you are getting it. I'm not going to keep prying answers out of you, though...

gusty owl Mar 22, 2023, 4:55 PM

#

ahh 😅 I'm really sorry to trouble you like this, I my self am not appreciating this

#

I don't follow, how am I getting it as in

#

I'm using chrome console

#CSS inside JSON