How do i make the amount of exp a player has and the amount needed shown in a gui?

Help and Feedback Scripting Support
#1

So im trying to make an exp system where in a gui it shows the amount of exp a person has and the amount needed, how would i show this in a gui? (btw im using datastore2)
Heres the script

local replicatedStorage = game:GetService("ReplicatedStorage")
local ServerStorage = game:GetService("ServerStorage")
local HttpService = game:GetService("HttpService")
local Players = game:GetService("Players")

local DataStore2 = require(ServerStorage:WaitForChild("DataStore2"))

DataStore2.Combine("Data", "Inventory", "Currency", "Level", "Exp")

local defaultLevel = 1
local defaultexp = 0
local DefaultCurrencyAmount = 0
local DefaultHealthAmount = 150

local expToLevelUp = function(level)
	return 100 + level * 15
end

game.Players.PlayerAdded:Connect(function(player)

	--All the DataStores in here--
	local InventoryStore = DataStore2("Inventory", player)
	local CurrencyStore = DataStore2("Currency", player)
	local ExpStore = DataStore2("Exp", player)
	local LevelStore = DataStore2("Level", player)
	local replicatedDataFolder = Instance.new("Folder")
	replicatedDataFolder.Parent = replicatedStorage.ReplicatedData
	replicatedDataFolder.Name = player.UserId


	---------------------------------------------
	--STARTING THE INVENTORY FUNCTION--
	local inventoryString = Instance.new("StringValue")
	inventoryString.Parent = replicatedDataFolder
	inventoryString.Name = "Inventory"

	--Leaderstats--
	local leaderstats = Instance.new("Folder", player)
	leaderstats.Name = "leaderstats"

	local LevelValue = Instance.new("IntValue", leaderstats)
	LevelValue.Name = "Level"

	local expValue = Instance.new("IntValue", leaderstats)
	expValue.Name = "Exp"
	----------------------------------------------


	--Functions--

	local function updateLevel(amount)
		player.leaderstats.Level.Value = amount
		replicatedStorage.Events.UpdateClientLevel:FireClient(player, amount)
	end

	local function updateEXP(exp)
		if exp >= expToLevelUp(LevelStore:Get(defaultLevel)) then
			ExpStore:Increment(expToLevelUp(LevelStore:Get(defaultLevel)) * -1)
			LevelStore:Increment(1)
		else
			player.leaderstats.Exp.Value = exp
		end
	end

	local inventoryData = InventoryStore:Get({})
	inventoryString.Value = HttpService:JSONEncode(inventoryData)

	InventoryStore:OnUpdate(function(decodedData)
		inventoryString.Value = HttpService:JSONEncode(decodedData)
	end)

	local function updateClientCurrency(amount)
		replicatedStorage.Events.UpdateClientCurrency:FireClient(player, amount)
	end

	updateClientCurrency(CurrencyStore:Get(DefaultCurrencyAmount))

	CurrencyStore:OnUpdate(updateClientCurrency)
	--call functions right away one time
	updateLevel(LevelStore:Get(defaultLevel))
	updateEXP(ExpStore:Get(defaultexp))

	LevelStore:OnUpdate(updateLevel)
	ExpStore:OnUpdate(updateEXP)

end)

game.Workspace:WaitForChild("Bruh").ClickDetector.MouseClick:Connect(function(player)

	local CurrencyStore = DataStore2("Currency", player)

	CurrencyStore:Increment(100000000,DefaultCurrencyAmount)
end)
#2

I recommend moving this system more away from the actual data stores and more towards value objects. You can set the XP once for the value and update that specific value every time the player gains XP. Then you can display that value in a GUI and next to it the amount of XP needed to level up. Whenever the player leaves, save that current XP value, and the process repeats.

Also, you should use IntValue:GetPropertyChangedSignal("Value") and update the GUI whenever that’s fired rather than remote events.