How to Extract Data from JSON Array in Android using Volley Library?

In the previous article on JSON Parsing in Android using Volley Library, we have seen how we can get the data from JSON Object in our android app and display that JSON Object in our app. In this article, we will take a look at How to extract data from JSON Array and display that in our app. 

JSON Array: JSON Array is a set or called a collection of data that holds multiple JSON Objects with similar sort of data. JSON Array can be easily identified with "[" braces opening and "]" braces closing. A JSON array is having multiple JSON objects which are having similar data. And each JSON object is having data stored in the form of key and value pair. 

What we are going to build in this article?  

We will be building a simple application in which we will be displaying a list of CardView in which we will display some courses which are available on Geeks for Geeks. A sample GIF is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Java language. 

Below is our JSON array from which we will be displaying the data in our Android App. 

[

  {

     "courseName":"Fork CPP",

     "courseimg":"https://media.geeksforgeeks.org/img-practice/banner/fork-cpp-thumbnail.png",

     "courseMode":"Online Batch",

     "courseTracks":"6 Tracks"

  },

  {

     "courseName":"Linux & Shell Scripting Foundation",

     "courseimg":"https://media.geeksforgeeks.org/img-practice/banner/linux-shell-scripting-thumbnail.png",

     "courseMode":"Online Batch",

     "courseTracks":"8 Tracks"

  },

  {

     "courseName":"11 Weeks Workshop on Data Structures and Algorithms",

     "courseimg":"https://media.geeksforgeeks.org/img-practice/banner/Workshop-DSA-thumbnail.png",

     "courseMode":"Online Batch",

     "courseTracks":"47 Tracks"

  },

  {

     "courseName":"Data Structures and Algorithms",

     "courseimg":"https://media.geeksforgeeks.org/img-practice/banner/dsa-self-paced-thumbnail.png",

     "courseMode":"Online Batch",

     "courseTracks":"24 Tracks"

  }

] 

Step by Step Implementation

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.

Step 2: Add the below dependency in your build.gradle file

Below is the dependency for Volley which we will be using to get the data from API. For adding this dependency navigate to the app > Gradle Scripts > build.gradle(app) and add the below dependency in the dependencies section. We have used the Picasso dependency for image loading from the URL.   

// below line is used for volley library

implementation 'com.android.volley:volley:1.1.1'

// below line is used for image loading library

implementation 'com.squareup.picasso:picasso:2.71828'

After adding this dependency sync your project and now move towards the AndroidManifest.xml part.  

Step 3: Adding permissions to the internet in the AndroidManifest.xml file

Navigate to the app > AndroidManifest.xml and add the below code to it. 

Step 4: Working with the activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. 

Step 5: Creating a Modal class for storing our data

For storing our data we have to create a new java class. For creating a new java class, Navigate to the app > java > your app's package name > Right-click on it > New > Java class and name it as CourseModal and add the below code to it. Comments are added inside the code to understand the code in more detail.

Step 6: Creating a layout file for each item of our RecyclerView

Navigate to the app > res > layout > Right-click on it > New > layout resource file and give the file name as course_rv_item and add the below code to it. Comments are added in the code to get to know in more detail. 

Step 7: Creating an Adapter class for setting data to our RecyclerView item

For creating a new Adapter class navigate to the app > java > your app's package name > Right-click on it > New > Java class and name it as CourseAdapter and add the below code to it. 

Step 8: Working with the MainActivity.java file

Go to the MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.

Now run your app and see the output of the app.

Output: