Reading Json file on connector javascript file

Support
#1

Hi…
I am creating a Javascript Component, In the Connector file (cesium_connector.js), i am referencing the JSON File, which is in the Web Module VAADIN folder.
image

The file cannot to sent to the Browser. I can only able to attach the Javascript and CSS file on AbstractJavascriptComponent

image

Please tell me how to send the file to the browser…?

Currently the json file is found on the browser VAADIN folder…!!!

#2

And also we needed to send image and b3dm file to the browser… I’ve added those files under VAADIN folder under the web modules… It is not available on browser.

Please tell me how to make available those files on the browser. So, i can access those files using Javascript.

#3

To be precise with the problem. I have attached the file directory of the json and b3dm file which i wanted to access on the client side (browser).
image

As i inspect on the chrome browser sources, where we cannot see the files from the VAADIN folder, where i cannot get the pier folder…!!!

image

And i’ve tried the VAADIN forum, and i used as this thread, its a workaround, so it attaches the files(JSON & B3DM) as javascript and css tags. then i am getting the files on the VAADIN folder,
image
but it is not the best practice, because we cannot add the files as such…

image
image905×232 74.6 KB

Please help me resolving this issue…

Thanks in advance…

#4

Any help possible…?

#6

Hi @Narayanan,

Unfortunately, I can’t reproduce your problem. Resources placed in the VAADIN directory are accessible without any additional imports, even if you don’t see them in the browser’s sources tab. To make sure, you can try to access them by full URL in the browser e.g. http://localhost:8080/app/VAADIN/test/cuba-logo.png.

I’ve created a demo project that contains an image and json file in the VAADIN directory and access them in client-side:

com_company_demo_web_component_jsdemo_JsDemo = function() {
    var connector = this;
    var element = connector.getElement();

    $(element).html("<img src='./VAADIN/test/cuba-logo.png'/>");

    fetch('./VAADIN/test/test.json')
        .then(res => res.json())
        .then((out) => {
            $(element).append(`<div style="white-space: pre;">${JSON.stringify(out, null, 2)}</div>`)
        }).catch(err => console.error(err));
}

Screenshot 2020-07-08 at 16.39.56

js-resources-demo.zip (88.8 KB)

If the problem persists, please provide a small sample project, so I can investigate an issue.

Regards,
Gleb

1 Like