#Visualize JSON with Typescript

1 messages · Page 1 of 1 (latest)

gilded furnace
#

Continuation of this discussion: #bots message

summer fernBOT
#

<@&987246964494204979> please have a look, thanks.

spring lintel
# 
import "jjsontree.js/src/ts/api.ts";
import "jjsontree.js/dist/jsontree.js.min.css";
import "jjsontree.js";

window.$jsontree.render(document.getElementById("app")!, {
  data: {
    hey: "there",
    you: [1, 2, 3, 4],
  },
});
#

Not the most beautiful thing in the world

#

but the api.ts file contains only type declarations

#

For some reason they do not put those in the d.ts files which are made for this purpose

gilded furnace
#

cool. im currently running another include version, results in a second

#

well, at least it shows sth

#

its spamming this one

#

ill retry with ur imports now, minute

spring lintel
#

And you might want to cast the types

# 
import { BindingOptions } from "jjsontree.js/src/ts/type.ts";

window.$jsontree.render(document.getElementById("app")!, {
  data: {
    hey: "there",
    you: [1, 2, 3, 4],
  },
} as BindingOptions);
#

Don't ask me why that is not the default type for it

#

But then you can auto-complete the options

gilded furnace
#

👍

#

mhh

#

oh the imnport

spring lintel
#

Yea, just throw it in there too, I guess

gilded furnace
#

TS5097: An import path can only end with a .ts extension when allowImportingTsExtensions is enabled.

#

is that in the package.json? i cant find it

#

or can i just import { BindingOptions } from "jjsontree.js/src/ts/type"; instead

spring lintel
#

No idea, that sounds like build system stuff

turbid laurel
#

I think its an eslint thing

#

check the config

gilded furnace
#

it does find it now though

#

but

spring lintel
#

Oh god

#

okay, maybe any is easier to work with then

gilded furnace
#

😄

#

okay the app started, its building now

#

mh, still broken

spring lintel
#

Intl

#

Oh god

gilded furnace
#

oh frick

spring lintel
gilded furnace
#

is it one of these things that works in firefox but not in my custom game cef thing

#

😄

spring lintel
#

it works everywhere since ~2017

gilded furnace
#

yeah but not in this one i guess

spring lintel
#

Apparently

turbid laurel
#

lmao

spring lintel
#

So you either patch out intl support (or monkey-patch your own Intl)

#

Or you use sth else

gilded furnace
#

lets try this guy instead

#

i feel like i was very close to getting it working

#

ill set it up quickly

#

so, sniping from their website the vanilla js code to get it working is:

# 
var _visualizer = new visualizer($("#visual-tab"));
_visualizer.visualize(json);
#

their definition for this is some weird js prototype thing

#

instead of a proper class/module or whatever

#

so

#

ill try with this

spring lintel
#

And where is the problem?

gilded furnace
# 
import "../visualizer/visualizer.css"
import "../visualizer/visualizer.js"
#

"allowJs": true

#

and this guy

#

lets see what happens

#

last time i had different imports and tried to declare the type

#

and then it said it cant find the visualizer

spring lintel
#

Surely works copium

gilded furnace
#

seems it has no idea how to load that png

spring lintel
#

You can put that png in the public folder

gilded furnace
#

public folder? whats that

spring lintel
#

Might be enough

#

Some build tools treat it specially

gilded furnace
#

actually, ill try to load the css differently

spring lintel
gilded furnace
#

ill try it with that

#

that other css there works

#

so perhaps telling it to load it like that will work as well

#

it smells like a more vanilla style load

spring lintel
#

:D

#

It likely won't serve the image though, but the 404 on the image might be acceptable

gilded furnace
#

ill be happy if it just works

#

its just for internal debugging

#

protip: dont ever mention to ur boss that u have some frontend knowledge

spring lintel
#

xD

gilded furnace
#

would have been too nice

#

so yeah, this line here fails const json_visualizer = new visualizer(node);

spring lintel
#

If that is a proper module, you can assign the result of the import a name?

gilded furnace
#

its not a module

#

its just shit

#

line 6 is the guy im trying to invoke here

spring lintel
#

I mean

#

This is prime copy-paste material

gilded furnace
#

yeah, i could patch the source into sth working

#

i suppose

#

problem is that im not comfortable enough with the source

spring lintel
#

Slap an export before that and save it as a .js file and you should be done, I guess

gilded furnace
#

ive never done this, do u have it at hand somewhere?

spring lintel
#

function visualizer($node) {
-> export function visualizer

gilded furnace
#

what i dont understand is, why do we write new visualizer(...)

#

its a function isnt it

#

why new

spring lintel
#

Basically it creates a "class" out of it, using it as the constructor

#

Old old style

gilded furnace
#

and is that compatible with typescripts new?

#

cause im technically writing typescript

#

like, this is from their js-only website:

#

which im trying to mimic

#

but im in ts

spring lintel
#

I wonder if Copilot can translate that file xD

gilded furnace
#

so ur saying i should try it like this?

spring lintel
#

Yea, but that seems to fail at the type check

gilded furnace
#

import { visualizer} from "../visualizer/visualizer.js";

#

i really have no problem rewriting the visualizer.js. i just struggle understanding this non-common way of doing js

#

like they have this function-style object

#

and then slap methods on it via prototype or sth

#

ill try to add a helper function

spring lintel
#

To be quite honest, writing that debugger thing yourself sounds easier

#

There is details in HTML which gives you collapsible content for free

spring lintel
spring lintel
gilded furnace
#

wtf yeah it uses jquery

#

perhaps thats in the npm base dependency already

spring lintel
#

Not in a raw new project afaik

gilded furnace
#

i meant in the one this json thing relies on, which is node-json2html

spring lintel
#

Ah, maybe

gilded furnace
#

its the underlying base api. their actual product

#

for which the visualizer is just a demo

#

😄

spring lintel
#

it only needs Intl for a collator

#

Just commit sins tbh

gilded furnace
#

so possibly it could be hacked out. just not sure how to do this

spring lintel
# 
class Collator {
  function compare(a: string, b: string) -> number {
    return a.localCompare(b);
  }
}
window.Intl = {
  Collator: Collator
}

might be enough

gilded furnace
#

made progress

#

my ts call now goes into the js

#

but crashes here

#

smells like its aaaalmost done

#

😄

#

ive added this guy here as vanilla js entry point

#

and thats what im invoking in ts now

spring lintel
#

.empty() sounds like jq?

#

No, I did not

gilded furnace
#

perhaps the node im passing is the wrong type

spring lintel
gilded furnace
#

yeah i think they expect it to be a jquery node

#

yeah its full of it

#

ill try to patch it to $(base.node)

spring lintel
#

or just pass in a jquery node at the start?

gilded furnace
#

ah yeah, in my fake method

#

new visualizer($(node));

spring lintel
#

Yea

gilded furnace
#

fingers crossed it actually has jquery somewhere down the line

#

seriously these amateurs cant produce proper libs for people to use

#

okay. im out of time for today

#

sorry to end it on SUCH a cliffhanger haha

spring lintel
#

I think you either monky-patch intl or you build your own (or find a different one)

gilded furnace
#

ill add jquery tomorrow and then report back

spring lintel
#

or that

#

:P

gilded furnace
#

😬

spring lintel
#

In the time you spent getting it to work you could have written three crude libraries already!!

gilded furnace
#

hehe

#

its just not a nice environment to produce new content in, having to wait 10min on each edit.
would have to move it out into some more traditional website demo before i integrate it into the real thing

summer fernBOT
#

@gilded furnace

Your question has been closed due to inactivity.

If it was not resolved yet, feel free to just post a message below
to reopen it, or create a new thread.

Note that usually the reason for nobody calling back is that your
question may have been not well asked and hence no one felt confident
enough answering.

When you reopen the thread, try to use your time to improve the quality
of the question by elaborating, providing details, context, all relevant code
snippets, any errors you are getting, concrete examples and perhaps also some
screenshots. Share your attempt, explain the expected results and compare
them to the current results.

Also try to make the information easily accessible by sharing code
or assignment descriptions directly on Discord, not behind a link or
PDF-file; provide some guidance for long code snippets and ensure
the code is well formatted and has syntax highlighting. Kindly read through
https://stackoverflow.com/help/how-to-ask for more.

With enough info, someone knows the answer for sure 👍

gilded furnace
#

progress. im still battling with the visualizer

#

it seems its using a jquery version of the json2html library

#

which isnt compatible with the node.js variant

#

lol

#

but ive now just copy pasta all dependencies straight into the js file

#

that is, the jquery.min

#

and json2html.min

#

all in one file

#

and now its doing sth

#

looks like only the css is missing now

#

its definitely there now

#

but its not updating itself in-place so i probably need to add a refresh button or sth

#

which is annoying cause i cant view it expanded live then

#

i also had to replace some deprecated jquery they were using, lol

#

👐

spring lintel
#

Ay

gilded furnace
#

time to blast some big json into it and see if i even have a scrollwheel, LOL

spring lintel
#

Watch yourself rewrite this with virtual scrolling in a minute

gilded furnace
#

;_;

#

search function would also be nice

#

seriously. we already have all this debugging stuff working with IMGUI for another environment we had to work with.
the sad part is that this environment has imgui as well but doesnt expose it

#

so now i have to rewrite the existing debugging stuff as website

spring lintel
#

Just having firefox would solve everything too

#

xD

#

Even has ctrl+f

gilded furnace
#

yeah

#

i mean, its embedded into a game. its rendered on some ingame "tablet" thing

#

im glad it even supports mouse clicking out of the box

spring lintel
#

Oh well

#

Sounds great

#

ctrl+f doesn't sound too easy, but expanding everything and then using ctrl+f might be fast enough

#

browsers are surprisingly good at rendering text

gilded furnace
#

the good thing is that i dont expect us doing heavy debugging sessions in that environment anyways. we have the other environment with working and existing debugging tools. so if sth is wrong with our logic we would debug it there instead.
for this one its acceptable if its a bit bare bones

#

as long as i can inspect all data

gilded furnace
#

frick. no scrollwheel out of the box. but another page on the tablet has scrollwheel. so perhaps its just the css

#

this one has a scrollwheel

#

overflow-y:auto works

#

👌

#

okay great. stuff seems to be working good enough now

#

thank you very much guys 👍

summer fernBOT
#

@gilded furnace

Your question has been closed due to inactivity.

If it was not resolved yet, feel free to just post a message below
to reopen it, or create a new thread.

Note that usually the reason for nobody calling back is that your
question may have been not well asked and hence no one felt confident
enough answering.

When you reopen the thread, try to use your time to improve the quality
of the question by elaborating, providing details, context, all relevant code
snippets, any errors you are getting, concrete examples and perhaps also some
screenshots. Share your attempt, explain the expected results and compare
them to the current results.

Also try to make the information easily accessible by sharing code
or assignment descriptions directly on Discord, not behind a link or
PDF-file; provide some guidance for long code snippets and ensure
the code is well formatted and has syntax highlighting. Kindly read through
https://stackoverflow.com/help/how-to-ask for more.

With enough info, someone knows the answer for sure 👍

gilded furnace
#

great... guess what

turbid laurel
#

oh no

gilded furnace
#

the game hard crashes the moment i do JSON.parse(dataString) when i send the real data

#

its 977000 chars long. so about 1 MB

turbid laurel
gilded furnace
#

if i cut it to 300 KB it works

#

but at 1 MB boom

turbid laurel
#

just write your own shit at this point lmao

gilded furnace
#

i mean if JSON.parse from JS itself crashes then ill have trouble working with the data

turbid laurel
#

ah yeah makes sense

gilded furnace
#

i probably have to look into splitting it into chunks on the data level itself

#

which is annoying

turbid laurel
#

but you sure that javascripts own JSON.parse breaks with 1MB?

#

I doubt you are the first one to parse bigger jsons

gilded furnace
#

google says the limit is usually at around 2-4 MB. but im also not running on a normal browser

#

so perhaps it has smaller limits

turbid laurel
#

thats crazy