Introduction:

In this article, we will learn “How to interface JSON(JavaScript Object Notation) with Tkinter”. If you are new to Python’s JSON package, I recommend you to go through this first similarly if you are new to Tkinter go through this.

Here we will design a GUI with an application format with user input textbox and save it as a JSON file in the computer as “IOTEDU.json” in default.

So I have decided the look of the GUI as below

We will have 3 inputs from the user. To get the inputs we will be using the Entry box and a button to trigger action. We can do this with simple knowledge in Tkinter.  What about JSON?, We will learn it in this article. Here is the code for the following.

from tkinter import *
import JSON
from tkinter.filedialog import asksaveasfile

window = Tk()
window.geometry('640x300')
window.title('IoT4Begineers')

name = Label(window, text="Name:")
Name = Entry(window)
age = Label(window, text="Age:")
Age = Entry(window)
role = Label(window, text="Role:")
Role = Entry(window)
submit = Button(window,text='Submit',command = check).grid(row=3, column=1)


test = 1
def writeToJSONFile(path, fileName, data):
        json.dump(data, path)

path = './'


def check():
    a = Name.get()
    b = test * int(Age.get())
    c = Role.get()
    print(a)
    print(b)
    print(c)
    data = {}
    data['Name'] = a
    data['Age'] = b
    data['Role'] = c
    files = [('JSON File', '*.json')]
    fileName='IOTEDU'
    filepos = asksaveasfile(filetypes = files,defaultextension = json,initialfile='IOTEDU')
    writeToJSONFile(filepos, fileName, data)


name.grid(row=0, column=0)
age.grid(row=1,column=0)
role.grid(row=2,column=0)
Name.grid(row=0, column=1)
Age.grid(row=1, column=1)
Role.grid(row=2, column=1)


mainloop()

Steps with Explanation:

1. Importing the packages

from tkinter import *
import json
from tkinter.filedialog import asksaveasfile

We’ve imported three packages, first of all for Tkinter, one for the JSON and finally for the saveas function which helps you do operation on files i.e saving a file and opening a file from the system.

2. Creating a window for the GUI

window = Tk()
window.geometry('640x300')
window.title('IoT4Begineers')

3. Adding widgets to the GUI

name = Label(window, text="Name:")
Name = Entry(window)
age = Label(window, text="Age:")
Age = Entry(window)
role = Label(window, text="Role:")
Role = Entry(window)
submit = Button(window,text='Submit',command = check).grid(row=3, column=1)

Here I had added 3 labels likewise 3 Entry boxes to get input from the user and also a button to trigger the function check()

4. Defining a function (check) to save the input data.

def check():
    a = Name.get()
    b = test * int(Age.get())
    c = Role.get()
    print(a)
    print(b)
    print(c)
    data = {}
    data['Name'] = a
    data['Age'] = b
    data['Role'] = c
    files = [('JSON File', '*.json')]
    filepos = asksaveasfile(filetypes = files,defaultextension = json,initialfile='IOTEDU')
    writeToJSONFile(filepos, fileName, data)

• First of all, I will get the data from the Entry box using the function get() and save it into the variables a,b,c
• Then I create an empty dictionary named data and set the index values of (‘Name’ to a, ‘Age’ to b and ‘Role’ to c).
• Here I use the operation of saveas to save the file to the system and put it into a variable named filepos, Here I selected filetypes as files as we are saving it as file type and default extension as JSON, as our format is to be saved in JSON format and initial file indicates the default name to be saved in, so I set it to “IOTEDU”
• I called a function writeTOJSONFile() to write the data into the JSON file.

5. Defining a function(writeTOJSONFile) to convert data in JSON format.

path = './'

def writeToJSONFile(path, fileName, data):
        json.dump(data, path)

• Initially I set the Path to home.

• In this function I used the json.dump method to convert the python objects into JSON format.

6. Layout the widgets in position

name.grid(row=0, column=0)
age.grid(row=1,column=0)
role.grid(row=2,column=0)
Name.grid(row=0, column=1)
Age.grid(row=1, column=1)
Role.grid(row=2, column=1)

Finally I used grid function to layout the widgets in a appropriate positions.

Here is the output of the following code.

Output:

Well, that’s about it. Now go create something more fun, and I hope my tutorial has helped you out somewhat.