JSON parsing with Gson/Moshi in Android Kotlin - UI Render Trace

Component - JSON parsing with Gson/Moshi

This UI component shows how to parse JSON data into Kotlin objects using Gson or Moshi libraries. It displays parsed data on screen after converting JSON string to Kotlin data classes.

Widget Tree

Activity
├── LinearLayout (vertical)
│   ├── TextView (title)
│   ├── Button (Parse JSON)
│   └── TextView (result display)

The root is an Activity containing a vertical LinearLayout. Inside it, a TextView shows the title, a Button triggers JSON parsing, and another TextView displays the parsed result.

Render Trace - 5 Steps

Step 1: Activity

Step 2: LinearLayout

Step 3: TextView (title)

Step 4: Button (Parse JSON)

Step 5: TextView (result display)

State Change - Re-render

Trigger:User taps 'Parse JSON' button

Before

Result TextView is empty

→

After

Result TextView shows parsed data from JSON string

Re-renders:Entire Activity UI updates the result TextView content

UI Quiz - 3 Questions

What happens when the 'Parse JSON' button is tapped?

A The app converts JSON string to Kotlin objects and shows data

B The app closes immediately

C Nothing changes on screen

D The title text changes

Key Insight

Parsing JSON and showing results in UI requires updating the visible TextView after converting JSON string to Kotlin objects. Using a button to trigger parsing keeps UI interactive and clear for users.

Practice

1. What is the main purpose of using Gson or Moshi in Android Kotlin apps?

easy

A. To convert JSON text into Kotlin objects

B. To create user interfaces

C. To manage app navigation

D. To handle database queries

Solution

1. Step 1: Understand JSON parsing role

   Gson and Moshi are libraries that help convert JSON strings into Kotlin objects for easier data handling.

2. Step 2: Identify the correct purpose

   They do not create UI, manage navigation, or handle databases directly.

3. Final Answer:

   To convert JSON text into Kotlin objects -> Option A

4. Quick Check:

   JSON parsing = Convert JSON to objects [OK]

Hint: Gson/Moshi = JSON to Kotlin objects [OK]

Common Mistakes:

• Thinking Gson/Moshi create UI components
• Confusing JSON parsing with database handling
• Assuming they manage app navigation

2. Which of the following is the correct way to define a Kotlin data class for this JSON?
{"name":"Alice","age":30}

easy

A. class Person(var name: String, var age: String)

B. data class Person(val name: String, val age: Int)

C. data class Person(name: String, age: Int)

D. data class Person(val name: String, val age: String)

Solution

1. Step 1: Match JSON keys and types

   The JSON has keys "name" (String) and "age" (Int).

2. Step 2: Check Kotlin data class syntax

   Correct syntax uses 'data class' with val properties and types matching JSON.

3. Final Answer:

   data class Person(val name: String, val age: Int) -> Option B

4. Quick Check:

   Data class with val and correct types = data class Person(val name: String, val age: Int) [OK]

Hint: Use val and exact types matching JSON keys [OK]

Common Mistakes:

• Using var instead of val unnecessarily
• Wrong property types (e.g., age as String)
• Missing 'val' keyword in data class

3. Given this code snippet using Gson:

val json = "{\"name\":\"Bob\", \"age\":25}"
val person = Gson().fromJson(json, Person::class.java)
println(person.name)

What will be printed?

medium

A. null

B. 25

C. Person

D. Bob

Solution

1. Step 1: Parse JSON to Person object

   Gson converts the JSON string into a Person object with name="Bob" and age=25.

2. Step 2: Print the name property

   println(person.name) outputs the name value, which is "Bob".

3. Final Answer:

   Bob -> Option D

4. Quick Check:

   person.name = "Bob" [OK]

Hint: fromJson maps JSON keys to object properties [OK]

Common Mistakes:

• Printing age instead of name
• Expecting class name instead of property value
• Assuming null if parsing fails

4. What is wrong with this Moshi parsing code?

val json = "{\"name\":\"Eve\", \"age\":28}"
val moshi = Moshi.Builder().build()
val adapter = moshi.adapter(Person::class.java)
val person = adapter.fromJson(json)
println(person?.name)

Assuming Person is a correct data class, why might this code fail at runtime?

medium

A. Person class is not a data class

B. JSON string is malformed

C. Missing Moshi Kotlin adapter for data class support

D. Using println instead of Log

Solution

1. Step 1: Check Moshi setup for Kotlin data classes

   Moshi requires adding the KotlinJsonAdapterFactory to support Kotlin features like default values and nullability.

2. Step 2: Identify missing adapter

   The code builds Moshi without .add(KotlinJsonAdapterFactory()), so parsing may fail or produce null.

3. Final Answer:

   Missing Moshi Kotlin adapter for data class support -> Option C

4. Quick Check:

   Moshi needs KotlinJsonAdapterFactory for data classes [OK]

Hint: Add KotlinJsonAdapterFactory to Moshi builder [OK]

Common Mistakes:

• Not adding KotlinJsonAdapterFactory
• Assuming JSON string is invalid
• Confusing println with logging

5. You have this JSON array:

[{"id":1,"title":"Task 1"},{"id":2,"title":"Task 2"}]

How do you parse it into a Kotlin List<Task> using Gson, assuming data class Task(val id: Int, val title: String)?

hard

A. Use TypeToken() {}.type with Gson.fromJson

B. Call Gson.fromJson(json, Task::class.java)

C. Parse each JSON object manually with JSONObject

D. Use Gson.toJson(json, List::class.java)

Solution

1. Step 1: Understand parsing JSON arrays

   Gson needs a Type object to parse generic types like List<Task>.

2. Step 2: Use TypeToken to get List<Task> type

   TypeToken() {}.type provides the correct type for Gson.fromJson to parse the array.

3. Final Answer:

   Use TypeToken() {}.type with Gson.fromJson -> Option A

4. Quick Check:

   Use TypeToken for generic list parsing [OK]

Hint: Use TypeToken for lists with Gson [OK]

Common Mistakes:

• Parsing array as single object
• Manually parsing instead of using Gson
• Using toJson instead of fromJson