In this article, I will demonstrate how to use the VaRest plugin in UE5 to read JSON files and display the data in an infinite scrolling list. VaRest is a powerful open-source plugin that makes HTTP requests and JSON data processing in UE5 simple and intuitive.
Installing and Enabling the VaRest Plugin#
First, you need to search for the keyword VaRest in the Unreal Marketplace, find the plugin, click the "Free" button, then switch to Library, and install VaRest into the required project engine from the vault.
Finally, you need to enable the use of this plugin in the engine by clicking Edit -- Plugins -- Search and check VaRest -- Restart the engine in the menu bar.
Creating a JSON File and Setting Up an Infinite List#
- Use an online JSON editor to simulate JSON data
Create a new Data folder in the project's Content directory and create a text file named Info.json. Copy and paste the simulated data from the online JSON editor into Info.json.
- Set up the infinite list UI
We need to create a UI to display the JSON data.
First, create an infinite list to display items: name it WBP_StudentPanel, add a ListView control, and click the + sign under its list record bar to create a new EntryWidgetClass blueprint for displaying a single student's information, naming it WBP_StudentItem. As shown below:
Blueprint Node Connection#
Define Data Structure#
Here, we also need to define two basic data structures for data parsing and display. Create a new structure blueprint named S_StudentInfo, defining four variables that match the previous JSON data: name, number, height, and weight for constructing the data structure after parsing the JSON data; create a blueprint class that inherits from the Object class, named O_StudentInfo. Define a variable of the type of the structure just defined: S_StudentInfo to display the data structure on the list UI. As shown in the two basic blueprint classes below:
Improve Test Blueprint Logic#
Initial Display of Infinite List UI#
In a camera-controlled blueprint class, connect the BeginPlay node to the Create Widget node, selecting WBP_StudentPanel for the Class pin, and connect the execution pin to Add to Viewport. As shown below:
Pressing the Number 0 Key to Parse JSON and Display in the List#
Here, we will use the API provided by the VaRest plugin, so ensure that the VaRest plugin is enabled beforehand.
- Blueprint Logic for Parsing JSON
First, use the Load Json from File function to parse the JSON file relative to the Content directory, so fill in the Path pin with Data/Info.json. Then use the Get Array Field method to parse the data under the data node, constructing a Student Data JSON, as shown below:
Then, loop through this JSON array with a for loop, parsing each element individually. Here, use the Get String Field method to parse name, number, height, and weight separately, and then construct S_StudentInfo to add to the StudentInfoList array. Finally, define an event dispatcher ParseStudentInfoCompleted, which will be called after parsing is complete to pass the StudentInfoList out. As shown below:
- Bind the Event Dispatcher ParseStudentInfoCompleted
In WBP_StudentPanel, pull out a wire from Event Construct to get a reference to the camera controller, bind the event dispatcher, and then use the Create Event node to create an event trigger function ParseStudentInfoCompletedCallBack.
Improve the function ParseStudentInfoCompletedCallBack:
Define a variable StudentInfos of type O_StudentInfo. Iterate over the passed structure array, constructing O_StudentInfo for each individual element. Use the Add item node to add to StudentListView (which is an infinite list ListView control), and after completion, set the ListView's items using SetListItems (this is very important, as it will trigger subsequent update interface events):
- Display Data in Individual List Elements
A key step here is to implement an interface in the WBP_StudentItem blueprint: User Object List Entry
Then, simply implement the On List Item Object Set event, converting the passed Object object to O_StudentInfo and then obtaining a reference to the structure S_StudentInfo, finally assigning values to the Text components sequentially.
Running Test Results#
Click Play to run, press the keyboard number key 0, and the infinite list successfully displays the JSON data:
This ListView is really useful for massive data.