Python & Flask! Dumping JSON Data into VUEX Form Fields.

Hey there! Welcome to my blog where I post about my journey as a self-taught developer. You can find my GitHub by clicking HERE.

Quick disclosure!

This is not a follow along tutorial. This is a post about specific methods I’ve learned and implemented on how to pass JSON data from a python dictionary to specific form fields in HTML, in a SPA using VUEX state management.

With that said . . . Let’s begin!

Have you ever needed to send JSON data to the client side? That is great! You’re in the right place. I had a specific use case where I needed to query an existing user in SQLAlchemy, create a dictionary with key value pairs, send that dictionary as an object to VUEX State Management and populate a form with the existing users data. Let’s check it out.

My use case:

My client wants to extend or renew their insurance policy.

My client clicks on their call to action button, “Renew Policy”.

My client is redirected to a pre-filled form built in Vue.js.

They can now go through the form, with their account information pre-loaded and use the power of an SPA to better their user experience.

Server Side:

Import json.

Screen shot taken from Author — James Lewis

Flask Blueprint / route.

Screen shot taken from Author — James Lewis

We are passing three parameters to the URL.

id, vehicle, policy

We are using the @login_requried decorator to determine if the user is a current client and logged into their account.

Remember, when we use parameters in the URL string, we structure integers as this:

<int:id> , <int:vehicle>, <int:policy>

The userDetails dictionary! We are creating a dictionary to later access values in the Vuex SPA form.

Screen shot taken from Author — James Lewis

So what is going on here? We are assigning the userData variable (query), which queries the User table with the id parameter at the beginning on the route. I did not show this query I am realizing now, in the screenshot. So here it is below.

Screen shot taken from Author — James Lewis

Now, for the cool part! We are going to send this dictionary as a JSON object to the VUEX front end. Let’s check it out now.

Screen shot taken from Author — James Lewis

How do we retrieve this data in the VUEX SPA? I am assuming readers of this specific post are already versed in VUEX state management. With that being said, you will be familiar with the file structure of a Vue app.

Client Side:

First we have the apiClient variable servicing axios.

Screen shot taken from Author — James Lewis

We need to import axios from ‘axios’ first. Let’s dissect apiClient.

1. baseUrl — This would change in production, however it is fine for development purposes. The port must match the port # your server is being run on. My Flask app is run on port 5000. Therefore, I set the localhost port to 5000 as well.
2. withCredentials — “XMLHttpRequest responses from a different domain cannot set cookie values for their own domain unless withCredentials is set to true before making the request”.
3. headers — We are using JSON, so we tell the app how to handle the data we are passing: application/json.
4. And of course, we export the api service we created as “loadUserRenewalData” to be called later.

Second we have state.

Screen shot taken from Author — James Lewis

We are importing our axios api service as clientAPI. We then have our state including all of our clients personal information.

And third, we have our action. Please keep in mind, the action is in the same file as our state.

Screen shot taken from Author — James Lewis

In the actions object, we create a function called loadUserRenewalData, which will take a context, and pass in our id, vehicle, and policy variables.

We return the clientAPI and pass in the correct variables, we get the response object. This is the same data we passed in our Flask route get request. Only now, we are assigning our state variables to the response data key value pairs from the userDetails dictionary in Flask.

The magic happens here:

We obviously want our data to load before the localhost serves that port, so we use a popular lifecycle hook in vue.js.

beforeMount() — “Called right before the mounting begins: the render function is about to be called for the first time.”

Docs and more information on lifecycle hooks in Vue.js HERE.

Screenshot below!

Screen shot taken from Author — James Lewis

Several things are really useful in the beforeMount() lifecycle hook. We can fire a VUEX store action by using this.$store.dispatch(‘randomName’). We can also access a URL’s parameters by using this.$route.params.randomUrlName.

So what does this do? It turns a db query in Flask into a pre-filled html form passing JSON data from our server in flask to our VUEX form fields.

As I mentioned at the beginning of this post, this is not a tutorial to copy code and follow along to get results. It is to show you some tips and tricks I’ve gathered along my development journey!

Happy Coding!