{"id":5521,"date":"2025-01-01T03:40:28","date_gmt":"2025-01-01T03:40:28","guid":{"rendered":"https:\/\/obsidiansofteducation.com\/?page_id=5521"},"modified":"2025-01-01T03:40:28","modified_gmt":"2025-01-01T03:40:28","slug":"read-and-decode-json-in-mit-app-inventor","status":"publish","type":"page","link":"https:\/\/obsidiansofteducation.com\/index.php\/read-and-decode-json-in-mit-app-inventor\/","title":{"rendered":"Read and Decode JSON in MIT App Inventor"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">&nbsp;Hello friends and welcome to Obsidian Soft,<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter is-resized\"><img decoding=\"async\" src=\"https:\/\/obsidiansofteducation.com\/wp-content\/uploads\/2024\/12\/snake20game2010.png\" alt=\"\" style=\"width:488px;height:auto\"\/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">In today\u2019s 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\u2019t miss any of the great tutorials that I have planned for you. Coming back to JSON So, what is JSON?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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\u2019s dictionary block i.e. key-value pairs.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/obsidiansofteducation.com\/wp-content\/uploads\/2024\/12\/CqmNNi97DfY3wDlLTm0JSCJZrx6NhAMFUT-f4IytW41Na3500F_Olfv8hsc7E86Yk0y2SF_9Fa4jgmTAM2a9ltEeSnfCym807FH4Ib-ts4jZWq0FofXBNGHnW8qTvkLjofeeln2KpaAuOQAO13ge3rg.png\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Let\u2019s look at this JSON example.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The object starts and ends with curly braces {}.<\/li>\n\n\n\n<li>Inside the object, we have several key-value pairs:\n<ul class=\"wp-block-list\">\n<li>The key \u201cname\u201d has the corresponding value \u201cJohn\u201d. This indicates that John\u2019s name is \u201cJohn\u201d.<\/li>\n\n\n\n<li>The key \u201cage\u201d has the corresponding value 25. This indicates that John\u2019s age is 25.<\/li>\n\n\n\n<li>The key \u201cfavoriteColor\u201d has the corresponding value \u201cblue\u201d. This indicates that John\u2019s favorite color is blue.<\/li>\n\n\n\n<li>The key \u201chobbies\u201d has the corresponding value [\u201cpainting\u201d, \u201cgardening\u201d]. 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.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">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).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It\u2019s widely used because it\u2019s 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.&nbsp; 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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now, let\u2019s 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.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/gist.github.com\/jennyknuth\/e2d9ee930303d5a5fe8862c6e31819c5\" target=\"_blank\" rel=\"noopener\">https:\/\/gist.github.com\/jennyknuth\/e2d9ee930303d5a5fe8862c6e31819c5<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Or you can use this one. This one has more colors.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/github.com\/cheprasov\/json-colors\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/cheprasov\/json-colors<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Download the zipped file and unzip it. It has colors.json in it.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let\u2019s have a look at it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let\u2019s create a new project and call it ReadJSON. Upload colors.json in it. From&nbsp;<strong>Connectivity<\/strong>&nbsp;in the palette, drag and drop a&nbsp;<strong>Web<\/strong>&nbsp;component<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For screen1, make align horizontal and align vertical center.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Drag and drop a&nbsp;<strong>textBox<\/strong>&nbsp;component from the&nbsp;<strong>User Interface<\/strong>. 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.&nbsp;&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Add a&nbsp;<strong>button<\/strong>&nbsp;from the&nbsp;<strong>User interface<\/strong>&nbsp;and rename it to submitBtn.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Add a&nbsp;<strong>label<\/strong>&nbsp;from the&nbsp;<strong>User interface<\/strong>&nbsp;and rename it to colorNameLbl.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Make colorNameLbl empty by removing text from it in its properties.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Also, drag a&nbsp;<strong>file<\/strong>&nbsp;component from&nbsp;<strong>Storage<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now, go to the blocks section. Make two global variables.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/obsidiansofteducation.com\/wp-content\/uploads\/2024\/12\/6TujuG6aelvPOT8XHxgXoulDbtT_suPsUx1XbMbjYvMzNBLu38QFx9nBc9bdM9EwFvJCQA-kI4DQYGIBJFk8cgoQ8WM3Kr4vnXiJMKNHSUlFWvSC-dUtLeo8qadtl8_pRFRhAx260zZlTrOlKjGEyo.png\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Now, let\u2019s load our JSON file in the screen initialize event.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/obsidiansofteducation.com\/wp-content\/uploads\/2024\/12\/sqOIHCQ0M5XMxYZAEYpBYD5g0iCXya3MKpH9lm72jBulFKlTW1uimau5QBI7Gf_kfr6TbfYZFwwWmt6ZvJuKBJFfQchD2ekPDpZxmGfRKAxZ8rq51Ca7cy02bK2UuSiBEObYsG-ph6QMATGGkiwOyGg.png\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">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\u2019t have any white spaces. After the file has been loaded successfully, File\u2019s GotText event will be triggered. Decode JSON using Web component\u2019s 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.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/obsidiansofteducation.com\/wp-content\/uploads\/2024\/12\/Wm6EjkedJ_Y3PgYTPkVezPD6KNju7ZwfTyvx_thcIyIN9FlyrYwA-56GXjycceLnZXmVXX5t5KqcBZkOGuY8KAK0i35eijQZ8hhaaLKPfXKHM01G9U3fUmxYOlSEZeLg0BqHr4lgRANaqjdcJIY6fxo.png\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/obsidiansofteducation.com\/wp-content\/uploads\/2024\/12\/VJU-WCpKfQ_WSug6r0BWQ5IW-mrjDb8IGOSJeeaNWXbjemPS42HEj06hNw3e4VnvUr_NG4tvt1JSIn3naJFV3IOEttObMcntS__zRuOT6D4Qo2R55bdR3MDI481J-UGD9fYeZhZHvc8C8fZTVpjZSCU.png\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">We will use a&nbsp;<strong>local variable<\/strong>&nbsp;and initialize it to a situation that the color name wasn\u2019t found in the data.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Then, we will go through our list of colors using for each item block from&nbsp;<strong>Control<\/strong>. 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).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If the value is found against key \u201chex\u201d 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 \u201cname\u201d from the found dictionary object. And we will also put&nbsp;<strong>break<\/strong>&nbsp;block from&nbsp;<strong>Control<\/strong>&nbsp;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\u2019s 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.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/obsidiansofteducation.com\/wp-content\/uploads\/2024\/12\/Vh5WR9LSbs3bX5HOKaWWInLp2pxIxSgC5AJR_2JIWB1cJ4-C-z34kUkg-iaiH0oBKcMgRR8Ef9Izh4VA2v4iOZ3Cnp2fuwcgPa0v5bauKAjo4OabA5FAZobhr1tBXmiM9lSrPLA8uQZjuMM_Cy8Mdu4.png\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Lastly, we will call the procedure whenever the user presses\/clicks the submit button.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you like my tutorials, please consider supporting me:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter is-resized\"><a href=\"https:\/\/obsidiansoft.gumroad.com\/l\/cxdft\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"372\" height=\"196\" src=\"https:\/\/obsidiansofteducation.com\/wp-content\/uploads\/2024\/12\/donate-button-1.png\" alt=\"\" class=\"wp-image-5381\" style=\"width:304px;height:auto\" srcset=\"https:\/\/obsidiansofteducation.com\/wp-content\/uploads\/2024\/12\/donate-button-1.png 372w, https:\/\/obsidiansofteducation.com\/wp-content\/uploads\/2024\/12\/donate-button-1-300x158.png 300w\" sizes=\"auto, (max-width: 372px) 100vw, 372px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Download Project file (aia):<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong><a href=\"https:\/\/drive.google.com\/file\/d\/1Qrj1INoFn-pcm9s8hrs4agzR4jl-7DPW\/view?usp=sharing\" target=\"_blank\" rel=\"noopener\">ReadJSON.aia<\/a><\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">And, you can also have a look at the video tutorial here.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<p class=\"responsive-video-wrap clr\"><iframe loading=\"lazy\" title=\"Read JSON in MIT App Inventor | How to Decode JSON File | MIT App Inventor File #json #appinventor\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/UDTfAiNaoko?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<\/div><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">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\u2019t miss any of the great projects I have planned for you.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/www.youtube.com\/c\/obsidiansofteducation\" target=\"_blank\" rel=\"noopener\">https:\/\/www.youtube.com\/c\/obsidiansofteducation<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Please like my Facebook page and Instagram page for more educational resources and tips.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Facebook:<\/strong><a href=\"https:\/\/www.blogger.com\/blog\/page\/edit\/4947000819484484884\/7140650632339107612#\" target=\"_blank\" rel=\"noopener\">&nbsp;https:\/\/www.facebook.com\/ObsidianSoft\/<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Instagram:<\/strong><a href=\"https:\/\/www.blogger.com\/blog\/page\/edit\/4947000819484484884\/7140650632339107612#\" target=\"_blank\" rel=\"noopener\">&nbsp;https:\/\/www.instagram.com\/obsidiansoftapps\/<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Pinterest:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-pinterest wp-block-embed-pinterest\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"oceanwp-oembed-wrap clr\"><iframe loading=\"lazy\" title=\"Obsidian Soft\" src=\"https:\/\/assets.pinterest.com\/ext\/embed.html?grid=obsidiansoft&#038;src=oembed\" height=\"900\" width=\"450\" frameborder=\"0\" scrolling=\"no\" ><\/iframe><\/div>\n<\/div><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">For links to free educational apps, have a look at the\u00a0<a href=\"https:\/\/obsidiansofteducation.com\/index.php\/mobile-apps\/\">educational apps page<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp;Hello friends and welcome to Obsidian Soft, In today\u2019s 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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-5521","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/obsidiansofteducation.com\/index.php\/wp-json\/wp\/v2\/pages\/5521","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/obsidiansofteducation.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/obsidiansofteducation.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/obsidiansofteducation.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/obsidiansofteducation.com\/index.php\/wp-json\/wp\/v2\/comments?post=5521"}],"version-history":[{"count":1,"href":"https:\/\/obsidiansofteducation.com\/index.php\/wp-json\/wp\/v2\/pages\/5521\/revisions"}],"predecessor-version":[{"id":5524,"href":"https:\/\/obsidiansofteducation.com\/index.php\/wp-json\/wp\/v2\/pages\/5521\/revisions\/5524"}],"wp:attachment":[{"href":"https:\/\/obsidiansofteducation.com\/index.php\/wp-json\/wp\/v2\/media?parent=5521"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}