Android: extraiga datos de JSON Array utilizando Volley 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 usando la biblioteca Volley 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 Volley

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

// dependency for volley
implementation 'com.android.volley:volley:1.2.0'

Ahora sincronice su proyecto para instalar la dependencia. 

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: trabajar con el archivo MainActivity.kt

Vaya al archivo MainActivity.kt y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.kt. Se agregan comentarios dentro del código para comprender el código con más 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.android.volley.Request
import com.android.volley.toolbox.JsonArrayRequest
import com.android.volley.toolbox.Volley
import com.example.newcanaryproject.ui.theme.*
 
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 below line we are specifying 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 parseJSONArray(courseList: MutableList<String>, ctx: Context) {
 
    // on below line we are creating a variable for url
    var url = "https://jsonkeeper.com/b/T7R2"
 
    // on below line we are creating a
    // variable for our request queue
    val queue = Volley.newRequestQueue(ctx)
 
    // on below line we are creating a request variable
    // for making our json object request.
    val request =
        // as we are getting json object response and we are making a get request.
        JsonArrayRequest(Request.Method.GET, url, null, { response ->
            // this method is called when we get successful response from API.
            try {
                for (i in 0 until response.length()) {
                    // on below line we are extracting data
                    // from each json object
                    val respObj = response.getJSONObject(i)
                    val lngName = respObj.getString("languageName")
 
                    // on below line we are adding data to our list
                    courseList += lngName
                }
                // on below line we are handling exception
            } catch (e: Exception) {
                e.printStackTrace()
            }
 
        }, { error ->
            // in this case we are simply displaying a toast message.
            Toast.makeText(ctx, "Fail to get response", Toast.LENGTH_SHORT)
                .show()
        })
    // at last we are adding our request to our queue.
    queue.add(request)
 
}
 
@Composable
fun displayListView() {
    val context = LocalContext.current
   
    // on below line we are creating and
    // initializing our array list
    val courseList = remember { mutableStateListOf<String>() }
    parseJSONArray(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 lstview.
    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: