Learn Godot 3 GDScript, Calling an API and parsing JSON

Learn Godot 3 GDScript, Calling an API and parsing JSON

So you think that Godot can’t handle general purpose utility and non-game applications? I am trying to answer this question and this post is part of my attempt to use Godot for apps which are not games at all.

As a web application developer, I have decided that this post should deal with using Godot to call an API on a server and then fetch some JSON data. Afterwards, I will parse the data and maybe print it in the console.

It is expected that:

  • You know what is Godot
  • You have Godot Installed already
  • You have some basic knowledge of Game development and Godot usage. Not like my codeigniter and Android series (RIP maybe?)

So what is Godot Engine? Godot engine is…. well fk it. My last post was in 2016 so I’ll skip the bs.

We are going to use the APIs available at the following links but you can use any JSON dataset of your own choice and your own API end poitns

https://jsonplaceholder.typicode.com/todos

Get All Todo list items https://jsonplaceholder.typicode.com/todos
Get Single Todo list item by user idhttps://jsonplaceholder.typicode.com/todos/{id}
E.g.
https://jsonplaceholder.typicode.com/todos/8

Data looks like
{
“userId”: 1,
“id”: 8,
“title”: “quo adipisci enim quam ut ab”,
“completed”: true
}

With Godot installed, and my API url ready, lets get into action.

So I have a new project with a scene containing nodes like

Nodes in the scene

And the scene itself is organized like this with some poor design choices made to make sure I don’t get lost in the midst of working on this

Just setting up the stage for ladies and gentlemen

Due to lack of talent, I first chose to create a visual script on the button shown above. But then I realized that it was lacking in some HTTPRequest departments so I instead went with GDScript. Otherwise, Visual Scripting is pretty good!

Ich bin ein mann, Der Mann

Attach a GDScript to the Canvas Layer

Save it

Now, we need to connect the following two signals to the CanvasLayer script node. To do this:

  1. Button’s pressed() signal
  2. HTTPrequest’s request_completed( int result, int response_code, PoolStringArray headers, PoolByteArray body ) signal
Steps to connect the signal of Button

Do the same for HTTPRequest’s request_completed( int result, int response_code, PoolStringArray headers, PoolByteArray body ) signal as well.


Now lets edit the code. Click on the Script icon next to the CanvasLayer

Click to start scripting
The auto-generated functions will be used to call API

Lets replace this code with this

extends CanvasLayer

# Called when the node enters the scene tree for the first time.
func _ready():
	pass # Replace with function body.

func _on_Button_pressed():
	print("Requesting")
	$HTTPRequest.request("https://jsonplaceholder.typicode.com/todos/8")

func _on_HTTPRequest_request_completed( result, response_code, headers, body ):
	print("Processing the Response")
	var json = JSON.parse(body.get_string_from_utf8())
	print(json.result)

Lets run the program

We are successfully calling the API

But lets up the anti and show this response in RichTextLabel. To do that, we will

  1. Get the values from the JSON response
  2. Show it in the RichTextLabel

So lets update our script and use the following code and run the program.

extends CanvasLayer

# Called when the node enters the scene tree for the first time.
func _ready():
	pass # Replace with function body.

func _on_Button_pressed():
	print("Requesting")
	$HTTPRequest.request("https://jsonplaceholder.typicode.com/todos/8")

func _on_HTTPRequest_request_completed( result, response_code, headers, body ):
	print("Processing the Response")
	var json = JSON.parse(body.get_string_from_utf8())
	var api_result = (json.result)
	
	# Get the handle of RichTextLabel
	var rtl = get_node("RichTextLabel")
	
	# Clear the RichTextLabel to  avoit clutter
	rtl.clear()
	
	# Concatenate the text of the RichTextLabel on separate lines
	rtl.text += var2str(api_result["userId"]) + "\n"
	rtl.text += var2str(api_result["id"]) + "\n"
	rtl.text += api_result["title"] + "\n"
	rtl.text += var2str(api_result["completed"]) + "\n"
The JSON output is now called, processed (a bit) and shown in the RichTextLabel

So, we did it! In the next post, I will continue this quest and we will look into using headers and secure authentication. Thanks for taking interest. Lets spread the world and learn together.

Join the Godot Engine’s Discord server https://discordapp.com/invite/zH7NUgz

Please do share this post and let me know what more I can do to improve this post and what I can do in the next posts.

Thanks
Codeonion


3 responses to “Learn Godot 3 GDScript, Calling an API and parsing JSON”

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: