Use JSON from a file in a template

SOLVE
APino
Member

Hello!

I have a custom template that uses a bit of json to generate some content, and I'm looking on the best way to update it without having to manually update the json in the template each time.

 

Nowadays I have something like this:

var myjson = {"myJson": "info"};
//do things with json...

but I want to have something like this instead:

var myJson = {{HubL.fetchmyfile.content}}
//do things with json...

I have tried to access files from module fields or storing the json in the template directory, but I don't know how to use the info stored in those files.

 

Any suggestion?

1 Accepted solution

Accepted Solutions
piersg
Solution
Key Advisor

@APino you can host JSON files in Hubspot CMS and use it on a page, you just need a bit of JS to do it. That would probably be the easiest way around this, as you can have all your templates reference one file, and when you need to update it just replace the file. You can use fetch to get JSON:

fetch('[link to your JSON file in Hubspot]').then(response => {
  return response.json();
}).then(data => {
  // Do things with JSON data here
  console.log(data);
}).catch(err => {
  // Do something for an error here
});

 

View solution in original post

9 Replies 9
dennisedson
Community Manager

@APino 

You can create a file in the DM (like you would for a template partial) and copy your json there.  Then you can reference that file with the import tag
example:

{% import '/Custom/partial.html' as try %}
<div>
  {{ try.test.fullName }}
</div>

In the partial, I have a variable set as test.  That variable contains the json object.

In the import line, I have set the partial to try.

From the you can call you json

Thanks,

Dennis




Check out our Community Developer Blog
where we feature our Community driven developer podcast and how to content
0 Upvotes
APino
Member

Hi Dennis,

 

Thanks for answering. The main idea is that I want to avoid having to manually copy the json and add it to any file, because that's what I already have working with the first solution, and instead I want to add the file to the CMS somewhere, then read the content so I can use it inside the template.
Your solution will be slightly better if I need to reuse the structure, but that's not the case.


To give context, the json is an OpenAPI definition, and I want to show the documentation. Here the current page (view source and scroll to the bottom to see the json in use):
https://www.waytobill.com/waytobill-swagger-ui

As any API, it evolves over time, and the idea is to avoid to copying a 20kb text file on my template every time it gets updated.

 

Thanks!

0 Upvotes
dennisedson
Community Manager

@APino ,

Makes total sense.  Unfortunately, I do not believe it is doable at this time. 

There are a few people who like to prove me wrong so will add them here to do so 😀

@piersg , @jpsanchez go ahead.  Say I am wrong

Thanks,

Dennis




Check out our Community Developer Blog
where we feature our Community driven developer podcast and how to content
0 Upvotes
jpsanchez
Top Contributor | Gold Partner

Hi, @APino ,  If i get it right this is an API services, Where is the service living?  ( nodejs, endpoints, etc..)

 

There is a word in spanish i will translate it " IF Mahoma don´t go to the Mountain, The Mountain goes to Mahoma" ... ( With Entreprise you can have a NodeJs in HubSpot server)

 

Waiting for your answer,

Best! 😉

JP

APino
Member

The service is living in its own webserver, but I get where you are going!

I now know that I can't host the file in HubSpot CMS, so I can just host it from somewhere else and query it directly from the page with Javascript for usage.


That will probably work 🙂

Thanks everyone!

piersg
Solution
Key Advisor

@APino you can host JSON files in Hubspot CMS and use it on a page, you just need a bit of JS to do it. That would probably be the easiest way around this, as you can have all your templates reference one file, and when you need to update it just replace the file. You can use fetch to get JSON:

fetch('[link to your JSON file in Hubspot]').then(response => {
  return response.json();
}).then(data => {
  // Do things with JSON data here
  console.log(data);
}).catch(err => {
  // Do something for an error here
});

 

View solution in original post

dennisedson
Community Manager

You cheated with JavaScript 😜

Thanks,

Dennis




Check out our Community Developer Blog
where we feature our Community driven developer podcast and how to content
APino
Member

I ended up cheating as you say @dennisedson 😄
I tried to host it on the HubSpot cms but for some reason the file didn't load. (Probably some CORS 🙈)

Then I hosted the json in my cdn and loaded ok with Javascript just fine.

Since I can control the file version on the cdn I don't need to update the template anymore when updating the specifications.

 

Thanks everyone!

piersg
Key Advisor

@dennisedson is it cheating if it's the only simple answer? 🤔 😉