Read and Decode JSON in MIT App Inventor

 Hello friends and welcome to Obsidian Soft,


In today’s class, I will explain about JSON. In our previous classes, we explored the dictionary block in MIT App Inventor. The purpose of the dictionary block will become much clearer once we understand the concept of JSON but before I begin, a bit about my channel: I teach coding, mobile app development, and mental maths on it. If you like the look of my channel, please subscribe and press the bell icon so that you don’t miss any of the great tutorials that I have planned for you. Coming back to JSON So, what is JSON?

JSON (JavaScript Object Notation) is a lightweight and popular format for storing and exchanging data where data is organized using key-value pairs. So, you can see the link straightaway with MIT App Inventor’s dictionary block i.e. key-value pairs.

Let’s look at this JSON example.

  • The object starts and ends with curly braces {}.

  • Inside the object, we have several key-value pairs:

    • The key "name" has the corresponding value "John". This indicates that John's name is "John".

    • The key "age" has the corresponding value 25. This indicates that John's age is 25.

    • The key "favoriteColor" has the corresponding value "blue". This indicates that John's favorite color is blue.

    • The key "hobbies" has the corresponding value ["painting", "gardening"]. This indicates that John has two hobbies: painting and gardening. The hobbies are represented as an array i.e. a list. The list is denoted by the square brackets [], and each hobby is a separate string/text within the array or list.


Hence, you can see that JSON is flexible and can represent various types of data, including numbers, text, lists, and even nested objects (objects within objects).

It's widely used because it's easy for both humans and computers to understand and work with. Programs can read and write JSON data, making it a common format for transferring data between different systems and programming languages so it is language-independent. JSON plays a huge role in APIs i.e. application programming interfaces through which different software applications communicate and interact with each other.  When one application wants to request data or send data to another application through an API, JSON is commonly used to format and structure that data: a prime example is our chatGPT app in which we communicated with openAI servers using JSON.


Now, let’s do a practical example of reading JSON file. We have a JSON file that I got from the internet that has color hex codes with their English names. 

https://gist.github.com/jennyknuth/e2d9ee930303d5a5fe8862c6e31819c5

Or you can use this one. This one has more colors.

https://github.com/cheprasov/json-colors


Download the zipped file and unzip it. It has colors.json in it. 

Let’s have a look at it.

As you can see that it is a list because the first element is a square bracket [ and within it we have multiple dictionary objects with { with key-value pairs with info about different colors.

Let's create a new project and call it ReadJSON. Upload colors.json in it. From Connectivity in the palette, drag and drop a Web component

For screen1, make align horizontal and align vertical center.

Drag and drop a textBox component from the User Interface. I will rename it to colorHexTxt. Our user can give a color hex code and we will tell him the color name after searching through the color.json file that we will load and decode in our project.  

Add a button from the User interface and rename it to submitBtn.

Add a label from the User interface and rename it to colorNameLbl.

Make colorNameLbl empty by removing text from it in its properties.

Also, drag a file component from Storage.


Now, go to the blocks section. Make two global variables.


Now, let’s load our JSON file in the screen initialize event.

Make sure that spellings are correct. After two forward slashes (//), write the name of the file as it has been imported into the project: it shouldn’t have any white spaces. After the file has been loaded successfully, File’s GotText event will be triggered. Decode JSON using Web component’s procedure and put it inside colorList global variable because remember that the end result after decoding will be a list as our JSON file started with a square bracket.

Now make a procedure findColor that uses the color hex provided by the user to search through our list of dictionary objects to find the color name.

We will use a local variable and initialize it to a situation that the color name wasn’t found in the data.

Then, we will go through our list of colors using for each item block from Control. We will check if the item which is actually a dictionary object contains the user-provided color hex code inside its value for key hex. We will also make our check not case sensitive by making the user input upper case (the user might write ffffff instead of FFFFFF).

If the value is found against key “hex” that is equal to the user-provided hex or it contains user-provided hex code, we will set up our local variable colorName accordingly with the value against key “name” from the found dictionary object. And we will also put break block from Control as there is no point in searching further. If the color hex is not found in our list of dictionaries, remember that our color name’s local variable was correctly initialized to not found so in the end, we will set the color name label to the color name local variable so that the user can either see the color name on his screen or the not found message.

Lastly, we will call the procedure whenever the user presses/clicks the submit button. 


Download Project file (aia):

ReadJSON.aia



And, you can also have a look at the video tutorial here.




Please like my videos and share it with your friends and family. Also, subscribe to my channel and press the bell icon so you don't miss any of the great projects I have planned for you.


Please like my Facebook page and Instagram page for more educational resources and tips.



Pinterest:
https://www.pinterest.co.uk/obsidiansoft/_created/
For links to free educational apps, have a look at the educational apps page

Comments

Post a Comment

Popular posts from this blog

Jolly Phonics Group 1

Image
Free Jolly Phonics Group 1 worksheets (s, a, t, i, p, n) According to Oxford Dictionary, phonics is a "method of teaching people to read by correlating sounds with symbols in an alphabetic writing system". In simple words, each letter of the alphabet has a sound. Instead of teaching young children the names of these alphabets, the sounds are taught. For example "a" makes the sound /a/...this is exactly the sound that comes from your mouth in the beginning when you say the word " apple " or " ant ". The letter "a" makes a different sound in words like " arm " and " ate " but these rules are taught later.  Jolly Phonics is a synthetic phonics system where all the letters of the alphabet have been split into seven groups. Each group contains 6 letters or their combinations so a total of 42 sounds are taught. What do I mean by a combination of letters? Remember that the combination of letters "s" and "h&
Read more

Jolly Phonics Group 2

Image
Free Jolly Phonics Group 2 worksheets (c/k, e, h, r, m, d) Hello Friends, I am back with another set of worksheets for helping children learn their phonics sounds. As you might already know, I am a strong proponent of the Jolly Phonics system of synthetic phonics sounds. Jolly Phonics system follows a particular order of teaching alphabet sounds in which there are seven groups. The following image shows the seven groups of Jolly Phonics along with an extra group taught by my Phonics app on Google Play Store. My app called  Phonics Fun  is 100% Free so you can download it and use it on all your Android devices.  It teaches all the letter sounds and different phonics rules and follows the pattern of Jolly Phonics but it is available for free. It is the perfect way to master phonics as you can hear phonics sounds and also test learning by playing many matching games. Coming back to printable Jolly phonics worksheets, I have already published worksheets for practicing Group 1 (s, a, t,
Read more

Jolly Phonics Flash Cards

Image
Gone are the days of A for apple, B for Ball...this is the time of synthetic phonics where each alphabet has a sound. Now, you don't teach children the name of the letter but the sound made by the letter. A has the sound that comes when we say the word apple, b has the sound that comes when we say bed, and so on and so forth. There are different systems of synthetic phonics but I have felt that Jolly Phonics is the best system. In fact, I made my first mobile app for my son based on the Jolly Phonics style of teaching. However, I know that many people want to limit screen exposure for their children so I decided to make these flashcards.  You can use these flashcards independently or you can use them along with my app called Phonics Fun , available on the Google Play Store. You can hear the sounds from my app. Practice using these flashcards and then, test learning using my app too...a win-win situation :) The Jolly Phonics flash cards are double-sided. I have told you in my previ
Read more