Fetching JSON data in HTML

Hello folks!

I apologize in advance if this is posted in the wrong category or if there’s a more appropriate one for my issue.

I am currently facing a challenge with fetching values from a JSON file in an HTML document. It works as expected in SketchUp 2024, but not in earlier versions like SketchUp 2023 or SketchUp 2017.

Here’s the content of my HTML file:

<!DOCTYPE html>
<html>
<body>
    <div>
        <span class="extName">If you read this, it's not working</span>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            fetch('../extension.json')
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Not ok');
                    }
                    return response.json();
                })
                .then(data => {
                    const element = document.querySelector('.extName');
                    if (element) {
                        element.textContent = data.name;
                    }
                })
                .catch(error => console.error('Error fetching JSON:', error));
        });
    </script>        
</body>
</html>

And the content of my JSON file (extension.json) is:

{
  "name": "If you read this, it's working"
}

It seems that only SketchUp 2024 can successfully fetch and display the JSON data. Could there be compatibility issues with older versions of SketchUp regarding HTML and JSON interaction, or am I missing something in my code that is essential for earlier versions? Any guidance or suggestions would be greatly appreciated.



The short answer is that features get added over time and SketchUp updates the Chromium framework is uses. So, it may be necessary to test for some features.

I did a quick to test in SU2023 at the DevTools Console and it looks as though CEF 88 does recognize window.fetch(). However, there are some CORS security limitations.

SU2024 updated to CEF 112 and Trimble may also have tweaked their edition to relax some of the CORS restrictions for local files.

If you right-click the dialog, open the Chromium DevTools and check the JS Console do you see errors ?


In past versions, I would get the JSON data on the Ruby-side and either stuff it into the HTML or JavaScript code using String#sub! or send it over to the dialog via dialog.execute_script().

But yesterday I was having no success passing a JSON string from SU2024 Ruby to a dialog’s JavaScript environment. I’m not yet sure if this is a bug in the latest edition of SketchUp’s CEF build.

1 Like

Hi Dan, thank you for answering.

Yes, I’m getting this error in both SU17 and SU23:
asav.js:2 Fetch API cannot load file:///…/extension.json. URL scheme “file” is not supported.loadJSON @ asav.js:2

Sounds good to me, I’ll try to see if I can get it done this way. As far as I’ve tried, the JSON data is working fine in the Ruby-side of my test extension. Never used String#sub! or dialog.execute_script(), so thank you for putting me on the right track.

1 Like

Yes. This is a CORS restriction in older SketchUp builds of the Chromium Embedded Framework.

2 Likes

Alejandro, can you please try the 24.0.1 update and see if you still have the fetch error.

EDIT: Oh, sorry, you did not have the fetch issue in 24. It was older versions of SketchUp’s CEF.

1 Like

Hi Dan, that’s it. “My” fetch was working fine in 24 but it doesn’t work in previous versions. Thank you for caring and have a nice day :slight_smile:

1 Like