JSON Parsing en Android usando Volley Library

JSON también se conoce como (Notación de objetos de JavaScript) es un formato para intercambiar los datos del servidor. Los datos almacenados en formato JSON son livianos y fáciles de manejar. Con la ayuda de JSON, podemos acceder a los datos en forma de JsonArray, JsonObject y JsonStringer. En este artículo, veremos específicamente la implementación de JsonObject usando Volley en Android. 

Objeto JSON: el objeto Json se puede identificar fácilmente con la apertura de llaves «{» y el cierre de llaves «}». Podemos obtener datos de objetos JSON con su valor clave. Desde esa clave, podemos acceder al valor de esa clave.  

¿Qué vamos a construir en este artículo? 

Construiremos una aplicación simple en la que mostraremos un CardView simple en el que mostraremos un solo curso que está disponible en Geeks for Geeks. qué

A continuación se muestra el objeto JSON desde el cual mostraremos los datos en nuestra aplicación de Android. 

{

  «nombre del curso»: «CPP bifurcado»,

  “cursoimg”:”https://media.geeksforgeeks.org/img-practice/banner/fork-cpp-thumbnail.png”,

  “courseMode”:”Lote en línea”,

  “courseTracks”:”6 Pistas”

}

Implementación paso a paso

Paso 1: Crear un nuevo proyecto

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Java como lenguaje de programación.

Paso 2: agregue la dependencia a continuación en su archivo build.gradle

A continuación se muestra la dependencia de Volley que usaremos para obtener los datos de la API. Para agregar esta dependencia, vaya a la aplicación > Gradle Scripts > build.gradle(app) y agregue la dependencia a continuación en la sección de dependencias. Hemos utilizado la dependencia de    Picasso para la carga de imágenes desde la URL.

// la línea de abajo se usa para la biblioteca volley

implementación ‘com.android.volley:volley:1.1.1’

// la línea de abajo se usa para la biblioteca de carga de imágenes

implementación ‘com.squareup.picasso:picasso:2.71828’

Después de agregar esta dependencia, sincronice su proyecto y ahora muévase hacia la parte AndroidManifest.xml .  

Paso 3: 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 4: trabajar con el archivo activity_main.xml

Vaya a la aplicación > res > diseño > actividad_principal.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo  activity_main.xml .

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
    <androidx.cardview.widget.CardView
        android:id="@+id/idCVCourse"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:elevation="10dp"
        android:visibility="gone"
        app:cardCornerRadius="8dp">
  
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
  
            <ImageView
                android:id="@+id/idIVCourse"
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:layout_margin="5dp" />
  
            <TextView
                android:id="@+id/idTVCourseName"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:padding="5dp"
                android:text="Course Name "
                android:textColor="@color/black"
                android:textSize="18sp"
                android:textStyle="bold" />
  
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:orientation="horizontal"
                android:weightSum="2">
  
                <TextView
                    android:id="@+id/idTVBatch"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:padding="5dp"
                    android:text="Batch"
                    android:textColor="@color/black" />
  
                <TextView
                    android:id="@+id/idTVTracks"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:padding="5dp"
                    android:text="Tracks"
                    android:textColor="@color/black" />
                
            </LinearLayout>
            
        </LinearLayout>
        
    </androidx.cardview.widget.CardView>
  
    <ProgressBar
        android:id="@+id/idLoadingPB"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:visibility="visible" />
      
</RelativeLayout>

Paso 5: trabajar con el archivo MainActivity.java

Vaya al archivo MainActivity.java y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.java . Se agregan comentarios dentro del código para comprender el código con más detalle.

import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.ProgressBar;
import android.widget.TextView;
import android.widget.Toast;
  
import androidx.appcompat.app.AppCompatActivity;
import androidx.cardview.widget.CardView;
  
import com.android.volley.Request;
import com.android.volley.RequestQueue;
import com.android.volley.Response;
import com.android.volley.VolleyError;
import com.android.volley.toolbox.JsonObjectRequest;
import com.android.volley.toolbox.Volley;
import com.squareup.picasso.Picasso;
  
import org.json.JSONException;
import org.json.JSONObject;
  
public class MainActivity extends AppCompatActivity {
  
    // creating variables for our textview, 
    // imageview,cardview and progressbar.
    private TextView courseNameTV, courseTracksTV, courseBatchTV;
    private ImageView courseIV;
    private ProgressBar loadingPB;
    private CardView courseCV;
      
    // below line is the variable for url from 
    // where we will be querying our data.
    String url = "https://jsonkeeper.com/b/63OH";
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
          
        // in below line we are initializing our all views.
        loadingPB = findViewById(R.id.idLoadingPB);
        courseCV = findViewById(R.id.idCVCourse);
        courseNameTV = findViewById(R.id.idTVCourseName);
        courseTracksTV = findViewById(R.id.idTVTracks);
        courseBatchTV = findViewById(R.id.idTVBatch);
        courseIV = findViewById(R.id.idIVCourse);
          
        // creating a new variable for our request queue
        RequestQueue queue = Volley.newRequestQueue(MainActivity.this);
          
        // as our data is in json object format so we are using 
        // json object request to make data request from our url.
        // in below line we are making a json object 
        // request and creating a new json object request.
        // inside our json object request we are calling a 
        // method to get the data, "url" from where we are 
        // calling our data,"null" as we are not passing any data.
        // later on we are calling response listener method
        // to get the response from our API.
        JsonObjectRequest jsonObjectRequest = new JsonObjectRequest(Request.Method.GET, url, null, new Response.Listener<JSONObject>() {
            @Override
            public void onResponse(JSONObject response) {
                // inside the on response method.
                // we are hiding our progress bar.
                loadingPB.setVisibility(View.GONE);
                  
                // in below line we are making our card 
                // view visible after we get all the data.
                courseCV.setVisibility(View.VISIBLE);
                try {
                    // now we get our response from API in json object format.
                    // in below line we are extracting a string with its key 
                    // value from our json object.
                    // similarly we are extracting all the strings from our json object.
                    String courseName = response.getString("courseName");
                    String courseTracks = response.getString("courseTracks");
                    String courseMode = response.getString("courseMode");
                    String courseImageURL = response.getString("courseimg");
                      
                    // after extracting all the data we are
                    // setting that data to all our views.
                    courseNameTV.setText(courseName);
                    courseTracksTV.setText(courseTracks);
                    courseBatchTV.setText(courseMode);
                      
                    // we are using picasso to load the image from url.
                    Picasso.get().load(courseImageURL).into(courseIV);
                } catch (JSONException e) {
                    // if we do not extract data from json object properly.
                    // below line of code is use to handle json exception
                    e.printStackTrace();
                }
            }
        }, new Response.ErrorListener() {
            // this is the error listener method which
            // we will call if we get any error from API.
            @Override
            public void onErrorResponse(VolleyError error) {
                // below line is use to display a toast message along with our error.
                Toast.makeText(MainActivity.this, "Fail to get data..", Toast.LENGTH_SHORT).show();
            }
        });
        // at last we are adding our json 
        // object request to our request 
        // queue to fetch all the json data.
        queue.add(jsonObjectRequest);
    }
}

Ahora ejecute su aplicación y vea el resultado de la aplicación. 

Producción: