# JSON / Object Tutorial **URL:** \ **Category:** Tutorials and DIY Guides\ **Tags:** firebase, community, webapi, json, object, intermediate, novice, tutorial\ **Created:** [February 7, 2021, 11:39am UTC](https://community.thunkable.com/t/json-object-tutorial/1085666 "2021-02-07T11:39:49Z")\ **Posts on this page:** 1\ **Showing post:** 2
**Author:** ![drted](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/drted/32/92694_2.png) [@drted](https://community.thunkable.com/u/drted)\ **Post date:** [February 7, 2021, 11:40am UTC](https://community.thunkable.com/t/json-object-tutorial/1085666/2 "2021-02-07T11:40:54Z")
**Part 1 Basic JSON** _Key Ideas_ 1. **J** ava **S** cript **O** bject **N** otation (JSON) is a standard cross platform text format for sharing data 2. JSON is text composed of name-value pairs in the format `{name:value}` 3. Thunkable blocks allow for the creation, modification, coding, and decoding of JSON data **What is JSON?** **J** ava **S** cript **O** bject **N** otation (JSON) is a standard cross platform text format for sharing data. Since Thunkable is [built on Blockly](https://developers.google.com/blockly) (which started as a graphic JavaScript code generator) it make sense to incorporate the JavaScript native JSON features to store and share data. **Seriously, what is JSON?** JSON is text. As the acronym suggestions, it is text which represents an _object_. And what is an object? A JSON object (which is different from an [OOP object)](https://en.wikipedia.org/wiki/Object-oriented_programming), is a collection of name-value pairs. **Come on @drted, what is a name-value pair?** Name-value pairs are just that. The name of a characteristics and the value of that characteristics. For instance, my Thunkable alias is drted. So the NAME is _alias_ and the VALUE is drted. In JSON this would be represented as: `{"alias":"drted"}` A few things to notice: 1. The object starts and ends with braces `{ }` 2. The name is enclosed by double quotes `" "` 3. The value is enclosed by double quotes `" "` 4. The name and value are separated by a colon `:` 5. **Capitalization matters!** `Alias` is not the same as `alias` In later lessons, we will extend this format to more complex data structures. But it is **CRITICAL** to understand that JSON is fundamentally a text string composed of name value pairs. **Thunkable Object Blocks** But this is Thunkable, therefore we are going to use blocks, not code. So let’s create an [app level variable](https://docs.thunkable.com/variables) with the object `{"alias":"drted"}` using the _Create Object_ block ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/a/8/a8f5272b5c462c5c3ef358a1635b5388773cc8a4.png) Next, let’s create a screen to allow the user to set the `value` of the alias and display the value in a label using the _get property_ block ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/5/1/512d279cfe9dff8de8de9acdab47b5a56d230b44.png) The output is: ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/4/7/477326857f575d503c6cb92446665367d974d338.png) Alternatively, the _Set Property_ block could be used to change the alias property of an existing object: ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/f/6/f6ff57d15caa32a7ff0df4a416d0d15a9f4b560c.png) ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/3/03f307501e0d56984a9e78521e6743c9d66cbb15.png) **Decoding and encoding JSON with Thunkable Blocks** The real power of JSON is communicating _between_ applications. For Thunkable to communicate with other appliations, the object blocks need to be converted into JSON, and JSON will need to be converted into objects. To convert objects to JSON, use the _generate JSON from object_ block: ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/5/05d265239a5a9e50798103a4ccf35fa5a11590ab.png) ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/f/f/ff1208378a40cfcab45a31bea43b636d9d9f2d1d.png) To convert JSON into a Thunkable Object we can use the _get object from JSON_ block: ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/f/e/fe524d7e0381a746cbeb9683f1f0f933383efd77.png) ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/7/6/762a473dff27790c845df938602cf6c64d59c907.png) As you probably already notice, it can get a little confusing remembering if a variable is _text representing JSON_ or an _object_. Confusing these two forms and how to detect mistakes is the topic of the next section. **Special Case: Numbers** At the beginning of the lesson, I indicated that the value is encoled by double quotes `" "`. This is true when the value is a string (red Text block). If the value is stored as number (blue math block), no quotes are used: ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/7/f/7ff72478cbbe1f081a15305eff685a3fcce6954d.png) ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/8/f/8f4fc2203e8e7741bc59ca21c19e8ab9959027f9.png) **Additional Reading** - [w3school JSON](https://www.w3schools.com/js/js_json_syntax.asp) --- _[View the full topic](https://community.thunkable.com/t/json-object-tutorial/1085666)._