Android: extraiga datos de JSON Array utilizando Retrofit Library con Jetpack Compose

Las respuestas JSON son de 2 tipos, es decir, JSON Object y JSON Array. JSON Array consiste en objetos JSON individuales que tienen la misma estructura similar pero tienen diferentes valores dentro de ella. JSON Array se utiliza para analizar los datos en forma de lista o array. En el artículo anterior, echamos un vistazo a Cómo extraer datos de JSON Object en Android . En este artículo, veremos cómo analizar datos de una array JSON en Android utilizando la biblioteca Retrofit con Jetpack Compose . 

Implementación paso a paso

Paso 1: crea un nuevo proyecto en Android Studio

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Al elegir la plantilla, seleccione Actividad de composición vacía . Si no encuentra esta plantilla, intente actualizar Android Studio a la última versión. Demostramos la aplicación en Kotlin, así que asegúrese de seleccionar Kotlin como idioma principal al crear un nuevo proyecto.

Paso 2: Agregar dependencia para usar Retrofit

Vaya a aplicación > Gradle Scripts > archivo build.gradle y agréguele la siguiente dependencia.

// below dependency for using retrofit.
implementation 'com.squareup.retrofit2:retrofit:2.9.0'
implementation 'com.squareup.retrofit2:converter-gson:2.5.0'

Después de agregar esta dependencia, simplemente sincronice su proyecto para instalarlo. 

Paso 3: Agregar un nuevo color en el archivo Color.kt

Vaya a aplicación > java > nombre del paquete de su aplicación > ui.theme > archivo Color.kt y agréguele el siguiente código. 

package com.example.newcanaryproject.ui.theme
 
import androidx.compose.ui.graphics.Color
 
val Purple200 = Color(0xFF0F9D58)
val Purple500 = Color(0xFF0F9D58)
val Purple700 = Color(0xFF3700B3)
val Teal200 = Color(0xFF03DAC5)
 
// on below line we are adding different colors.
val greenColor = Color(0xFF0F9D58)

Paso 4: agregar permisos a Internet en el archivo AndroidManifest.xml

Vaya a la aplicación > AndroidManifest.xml y agréguele el siguiente código.  

<!--permissions for INTERNET-->
<uses-permission android:name="android.permission.INTERNET"/>

Paso 5: crear una clase modal

Vaya a aplicación > java > nombre del paquete de su aplicación > haga clic con el botón derecho en él > Nuevo > clase Kotlin y especifique el nombre de la clase como ListModal y agréguele el siguiente código. Se agregan comentarios en el código para conocer en detalle. 

package com.example.newcanaryproject
 
// on below line we are creating a
// modal class for our data class.
data class ListModal(
    // on below line we are creating two variable
    // one is for language name which is string.
    val languageName: String
)

Paso 6: Creación de una interfaz

Vaya a aplicación>java>nombre del paquete de su aplicación>haga clic con el botón derecho en él>Nuevo>clase Kotlin y seleccione la interfaz en él y luego especifique el nombre como RetrofitAPI. Agregue el siguiente código. Se agregan comentarios en el código para conocer en detalle. 

package com.example.newcanaryproject
 
import retrofit2.Call
import retrofit2.http.GET
 
interface RetrofitAPI {
    // as we are making get request so we are displaying
    // GET as annotation.
    // and inside we are passing last parameter for our url.
    @GET("T7R2")
    fun
    // as we are calling data from array so we are calling
    // it with array list and naming that method as getAllCourses();
            getLanguages(): Call<ArrayList<ListModal>>
 
}

Paso 7: trabajar con el archivo MainActivity.kt

Vaya a aplicación>java>nombre del paquete de su aplicación>archivo MainActivity.kt y agréguele el siguiente código. Se agregan comentarios en el código para conocer en detalle. 

package com.example.newcanaryproject
 
import android.content.Context
import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.*
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.*
import com.example.newcanaryproject.ui.theme.*
import retrofit2.Call
import retrofit2.Callback
import retrofit2.Response
import retrofit2.Retrofit
import retrofit2.converter.gson.GsonConverterFactory
 
class MainActivity : ComponentActivity() {
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            NewCanaryProjectTheme {
                // on below line we are specifying background color for our application
                Surface(
                    // on below line we are specifying modifier and color for our app
                    modifier = Modifier.fillMaxSize(), color = MaterialTheme.colors.background
                ) {
                    // on the below line we are specifying the theme as scaffold.
                    Scaffold(
 
                        // in scaffold we are specifying top bar.
                        topBar = {
 
                            // inside top bar we are specifying background color.
                            TopAppBar(backgroundColor = greenColor,
 
                                // along with that we are specifying title for our top bar.
                                title = {
 
                                    // in the top bar we are specifying tile as a text
                                    Text(
 
                                        // on below line we are specifying
                                        // text to display in top app bar.
                                        text = "JSON Parsing in Android",
 
                                        // on below line we are specifying
                                        // modifier to fill max width.
                                        modifier = Modifier.fillMaxWidth(),
 
                                        // on below line we are
                                        // specifying text alignment.
                                        textAlign = TextAlign.Center,
 
                                        // on below line we are
                                        // specifying color for our text.
                                        color = Color.White
                                    )
                                })
                        }) {
                        // on below line we are display list view
                          // method to display our list view.
                        displayListView()
                    }
                }
            }
        }
    }
}
 
fun getJSONData(courseList: MutableList<String>, ctx: Context) {
    // on below line we are creating a retrofit
    // builder and passing our base url
    val retrofit = Retrofit.Builder()
        .baseUrl("https://jsonkeeper.com/b/")
        // on below line we are calling add
        // Converter factory as Gson converter factory.
        .addConverterFactory(GsonConverterFactory.create())
        // at last we are building our retrofit builder.
        .build()
 
    // below line is to create an instance for our retrofit api class.
    val retrofitAPI = retrofit.create(RetrofitAPI::class.java)
 
    // on below line we are calling a method to get all the courses from API.
    val call: Call<ArrayList<ListModal>> = retrofitAPI.getLanguages()
 
    // on below line we are calling method to enqueue and calling
    // all the data from array list.
    call!!.enqueue(object : Callback<ArrayList<ListModal>?> {
        override fun onResponse(
            call: Call<ArrayList<ListModal>?>,
            response: Response<ArrayList<ListModal>?>
        ) {
            // on below line we are checking if response is successful.
            if (response.isSuccessful) {
                // on below line we are creating a new list
                var lst: ArrayList<ListModal> = ArrayList()
 
                // on below line we are passing
                // our response to our list
                lst = response.body()!!
 
                // on below line we are passing
                // data from lst to course list.
                for (i in 0 until lst.size) {
                    // on below line we are adding data to course list.
                    courseList.add(lst.get(i).languageName)
                }
            }
        }
 
        override fun onFailure(call: Call<ArrayList<ListModal>?>, t: Throwable) {
            // displaying an error message in toast
            Toast.makeText(ctx, "Fail to get the data..", Toast.LENGTH_SHORT)
                .show()
        }
    })
}
 
@Composable
fun displayListView() {
    val context = LocalContext.current
    // on below line we are creating and
    // initializing our array list
    val courseList = remember { mutableStateListOf<String>() }
    getJSONData(courseList, context)
 
    // on the below line we are creating a
    // lazy column for displaying a list view.
    // on below line we are calling lazy column
    // for displaying listview.
    LazyColumn {
        // on below line we are populating
        // items for listview.
        items(courseList) { language ->
            // on below line we are specifying ui for each item of list view.
            // we are specifying a simple text for each item of our list view.
            Text(language, modifier = Modifier.padding(15.dp))
            // on below line we are specifying
            // divider for each list item
            Divider()
        }
    }
}

Ahora ejecute su aplicación para ver el resultado. 

Producción: