How to Ioad JSON file to run script

Hi all,

I’m excited to be using Webflow to build a new careers portal for my company.

My end goal: Pull Jobvite data (JSON file) and display on a webflow page.

Current integration: Wordpress website with PHP file to write how Jobvite data is displayed.

I am not very technical and need a better understanding of how to communicate what needs to be done to the technical members of my team.

I am told that we can place the a JSON loading script in the Custom Code section.

A) How do I load the JSON file in the custom code section?
B) Where do I place or write a new PHP file to display the Jobvite data?

Thank you for your help!!
Dan

Hi @dan_luebke, while it is possible to do some loading of JSON data to your site with the right conditions, using custom code, we do not support running of any PHP scripts from Webflow servers.

If you want to trigger a PHP script, you would need your own external server running PHP to store those PHP scripts.

One solution might be to create a webserver with PHP, then set that server up as a sub-domain of your Custom Domain in Webflow, and then call the PHP script from a form in Webflow and POST the input data to the PHP script on your server, and have your PHP script write out a json file to some directory on your server, then load that json file using javascript in Webflow. That is just one direction you might check out… Others on the forum may have some advice also… Cheers !

Hi @cyberdave - my mistake, I need to clarify. We do not need to re-write our script in PHP. We should be able to work with the data in JQuery. First, however, I need to succeed in loading the JSON file. Do you have a recommended way for doing this?

Best,
Dan

Hi, @dan_luebke, Thanks for clarifying, yes that makes a big difference. Can you tell me, where is this JSON file that will be loaded, will be stored? Is it the file url a static url, or is the JSON output from JobVite generated as part of a function in their API ?

Cheers, Dave

I’m glad!

I believe the answer is a static url. I can tell you that right now we are calling the file in our script as:

$jobs = json_decode(file_get_contents('https://api.jobvite.com/v1/........', false, $context));)

As you can see, I have edited out a portion of the url for security.

ok @dan_luebke, thanks, that is exactly what I needed to know… lt me look at this a bit, and I will get back to you on this. Cheers, Dave

Hi @cyberdave, I hope you’re doing well! I was wondering if you have any feedback or instruction you can provide?

Again, my organization has the technical capacity to implement whatever solution you propose, I just need to understand what will be required of them so I can submit a proposal.

Hi @dan_luebke Please have a look a sample code below. I’ve heard about this JSON thingy but never give it a chance for me to really look at it so today I took a peak on w3schools :blush: I’m lucky it is pretty simple.

So, as you can see on sample code (image) below, few things has been done there:

  1. created a div. where you want your JSON content wil be placed.

  2. you get your external JSON file from somewhere url

  3. and once it is ready in an array you can use its values anywhere. In example below it writes some hyperlinks onto Div which created before that has “id01” id.

I believe your organization will completely be able to catch it.

Sorry if it is too simple. Just trying to help.
Oh yeah you can put those code before /body tag on Custom Code section.
Cheers.

2 Likes

Hi @pastiwibawa, thank you for looking into this and sharing with me your insight!

A few questions based on your step-by-step instruction:

Step 1 - Will I place the div in the embed code section where I want the output to display? Or is it in the custom code section (just before the script)?

Step 2 - Done (provided by jobvite API)

Step 3 - Is it correct to say I need to place JavaScript in the Custom Code section which will pull from the JSON file, format it accordingly, and output it to the appropriate div?

Step 3 is what I really want to make sure I understand. I really appreciate your help!

@dan_luebke

Step 1: You can create the div within Webflow designer and actually the div used there was only an example, what the real matter is the id. Of course you also can have a div in embed code. Please look at images below. See it is a div created within webflow designer that has a class name ‘just-a-div-block’ with a Unique Id ‘divforjsonvals’ . The html code as a result of this is shown on next image that if you write it on embed code section you will get same result. Again I mean it is just a div and the matter thing is actually the unique id.

Step 3: Yes you are correct.

2 Likes

Thank you @pastiwibawa - I appreciate your help!