Help : Json file upload to Repeating Group

[gary45]

Hello everyone,
After successfully doing this with XML files using the API Connector, this feature is turning out to be much more complicated when using JSON files.

I’m working on an application where the user should be able to import either an XML file (working) or a JSON file (race results), and then immediately view the data inside a Repeating Group — without saving anything into the Bubble database, except maybe the file itself if needed.

My goal

• The user uploads a JSON file using a File Uploader

• The file is read/processed (ideally in the simplest way — API Connector or backend workflow)

• I extract the JSON content as an object

• I display the structured data in a Repeating Group (laps, drivers, leaderboard, etc.)

In short:

Upload JSON → Parse it → Display it in a Repeating Group.

What I’m trying to understand

I would like to know the best method on Bubble to:

• Read the contents of an uploaded JSON file

• Parse that content into a usable format

• Send it into a Repeating Group

I’ve spent hours going through tutorials but found nothing conclusive.
It’s frustrating because this is very easy to accomplish with XML result files.

Below is a short example of the JSON file structure, including session info, one driver, and all their laps.

{
“data”: {
“sessionType”: “Q”,
“trackName”: “MONZA”,
“sessionIndex”: 0,
“raceWeekendIndex”: 0,
“metaData”: “valencia”,
“serverName”: “SERVEUR NAME”,
“sessionResult”: {
“bestlap”: 101255,
“bestSplits”: [
36835,
38047,
26372
],
“isWetSession”: 0,
“type”: 0,
“leaderBoardLines”: [
{
“car”: {
“carId”: 1001,
“raceNumber”: 8,
“carModel”: 50,
“cupCategory”: 4,
“teamName”: “”,
“nationality”: 0,
“carGuid”: -1,
“teamGuid”: -1,
“drivers”: [
{
“firstName”: “NAME1”,
“lastName”: “LASTNAME2”,
“shortName”: “HOP”,
“playerId”: “SXXXXXXXXXXXXXXX”
}
]
},
“currentDriver”: {
“firstName”: “NAME1”,
“lastName”: “LASTNAME2”,
“shortName”: “HOP”,
“playerId”: “SXXXXXXXXXXXXXXX”
},
“currentDriverIndex”: 0,
“timing”: {
“lastLap”: 101255,
“lastSplits”: [
36835,
38047,
26372
],
“bestLap”: 101255,
“bestSplits”: [
36835,
38047,
26372
],
“totalTime”: 254894771,
“lapCount”: 24,
“lastSplitId”: 0
},
“missingMandatoryPitstop”: -1,
“driverTotalTimes”:
}
]
},
“laps”: [
{ “carId”: 1001, “driverIndex”: 0, “laptime”: 166588, “isValidForBest”: false, “splits”: [100508, 39032, 27047] },
{ “carId”: 1001, “driverIndex”: 0, “laptime”: 103190, “isValidForBest”: true, “splits”: [37832, 38820, 26537] },
{ “carId”: 1001, “driverIndex”: 0, “laptime”: 102770, “isValidForBest”: true, “splits”: [37550, 38460, 26760] },
{ “carId”: 1001, “driverIndex”: 0, “laptime”: 102160, “isValidForBest”: false, “splits”: [37377, 38172, 26610] },
{ “carId”: 1001, “driverIndex”: 0, “laptime”: 102487, “isValidForBest”: true, “splits”: [37512, 38242, 26732] },
{ “carId”: 1001, “driverIndex”: 0, “laptime”: 106090, “isValidForBest”: false, “splits”: [36880, 42122, 27087] },
{ “carId”: 1001, “driverIndex”: 0, “laptime”: 101255, “isValidForBest”: true, “splits”: [36835, 38047, 26372] }
],
“penalties”: ,
“post_race_penalties”: ,
“ACCtrackerSessionConfiguration”: {
“confirmedResult”: true,
“adminOnlyPreview”: false
}
}
}

[Jici]

If the file always have the same structure, use api connector that fetch the file url and let API connector parse the json

[gary45]

Thanks, but when I try to initialize the API using the file URL (a JSON file that does have a correct structure), I get the following error:

There was an issue setting up your call.
The API call returns a non-object and you picked JSON. Please check.

Open my link

I tried entering the API response manually using the file’s content — in that case, initialization works and I can select the fields I need.
However, it’s impossible to display the result in a Repeating Group afterward.

[rafaelchavantes]

Hey Gary,
Try to compress your json and save it.
I did a test here and worked.

Got your Json and saved on a json file like this:
{“data”:{“sessionType”:“Q”,“trackName”:“MONZA”,“sessionIndex”:0,“raceWeekendIndex”:0,“metaData”:“valencia”,“serverName”:“SERVEUR NAME”,“sessionResult”:{“bestlap”:101255,“bestSplits”:[36835,38047,26372],“isWetSession”:0,“type”:0,“leaderBoardLines”:[{“car”:{“carId”:1001,“raceNumber”:8,“carModel”:50,“cupCategory”:4,“teamName”:“”,“nationality”:0,“carGuid”:-1,“teamGuid”:-1,“drivers”:[{“firstName”:“NAME1”,“lastName”:“LASTNAME2”,“shortName”:“HOP”,“playerId”:“SXXXXXXXXXXXXXXX”}]},“currentDriver”:{“firstName”:“NAME1”,“lastName”:“LASTNAME2”,“shortName”:“HOP”,“playerId”:“SXXXXXXXXXXXXXXX”},“currentDriverIndex”:0,“timing”:{“lastLap”:101255,“lastSplits”:[36835,38047,26372],“bestLap”:101255,“bestSplits”:[36835,38047,26372],“totalTime”:254894771,“lapCount”:24,“lastSplitId”:0},“missingMandatoryPitstop”:-1,“driverTotalTimes”:}]},“laps”:[{“carId”:1001,“driverIndex”:0,“laptime”:166588,“isValidForBest”:false,“splits”:[100508,39032,27047]},{“carId”:1001,“driverIndex”:0,“laptime”:103190,“isValidForBest”:true,“splits”:[37832,38820,26537]},{“carId”:1001,“driverIndex”:0,“laptime”:102770,“isValidForBest”:true,“splits”:[37550,38460,26760]},{“carId”:1001,“driverIndex”:0,“laptime”:102160,“isValidForBest”:false,“splits”:[37377,38172,26610]},{“carId”:1001,“driverIndex”:0,“laptime”:102487,“isValidForBest”:true,“splits”:[37512,38242,26732]},{“carId”:1001,“driverIndex”:0,“laptime”:106090,“isValidForBest”:false,“splits”:[36880,42122,27087]},{“carId”:1001,“driverIndex”:0,“laptime”:101255,“isValidForBest”:true,“splits”:[36835,38047,26372]}],“penalties”:,“post_race_penalties”:,“ACCtrackerSessionConfiguration”:{“confirmedResult”:true,“adminOnlyPreview”:false}}}

Uploaded that file to bubble and used the url on the Api Connector.

[gary45]

Oh thank you, that’s a good point, I’ll try that right away.

But I have a question in the meantime: since it’s the user who isn’t supposed to do it, how am I going to compress it via the WF in this format so that the file can be analyzed correctly?

[gary45]

I don’t know how you did it, it’s the same procedure I used for the XML files but with JSON and using the URL, I still get the same error message during initialization.

I will keep searching.

[Jici]

Can you tried this: change response type to text and inspect the text? What I believe is that you may receive an escaped JSON that is now a string instead of a json…

[gary45]

Here is what I get, thank you for trying to figure it out, I admit I don’t understand.

[boston85719]

@gary45 if you are unable to get things working, you could consider checking out my Paid Plugin Data Jedi

It makes this type of stuff a bit easier. There are other free ways to do it as well I suppose, but they can be a bit of a struggle sometimes. My understanding is that the JSON keys are usually not aligned with what they might need to be in order to be recognized as field values for API Objects from API connector.

Data-jedi-plugin-demonstration | Bubble Editor

https://c8eb96202389a9c966d2147d13293b51.cdn.bubble.io/f1746330542128x583263926572775400/Products.json?_gl=1*9hjfje*_gcl_au*ODcwNzAyNzQzLjE3NDM4MjUxMzQ.*_ga*MTA3ODM0MjM4NS4xNzQzNzcyNzU4*_ga_BFPVR2DEE2*MTc0NjMzMDIzOS4zMC4xLjE3NDYzMzA2ODQuNjAuMC4w

[gary45]

I will try on my side first because your plugin seems simpler but too expensive for a personal app without being sure that it works. Thank you

[boston85719]

@gary45

without being sure that it works

The plugin works. For any plugin you may look to purchase, first subscribe, then test in your own app…if it doesn’t work, uninstall and you are charged only a prorated fee, meaning if subscription is $30/month and you tested for two days, it costs $2. Only after you are sure you will keep a plugin, decide if the one time fee is better than continuing to subscribe. I’ve made mistake several times early on paying one time fee for a plugin that ends up not working.

[gary45]

With the help of @Jici , the problem is now known, it works perfectly if the .json file is converted to UTF-8.

Now, I just have to figure out how to do it in the WF so that the user doesn’t have to do it…

But that’s already a big step forward, thanks again @Jici

[gary45]

Hello everyone,

With Bubble, one solution brings us another problem.
In this discussion thread, we could say that this is STEP 2.

I am looking for a solution, preferably native or via a plugin, to convert a JSON UTF16 file to UTF8 through a file UPLOADER.

Maybe a SCRIPT or HTML element would be needed to do this, or even several conversions from JSON to CSV and then CSV back to clean JSON.

I am open to any ideas or leads to explore because, in a discussion, little things said can give good ideas!

Thanks in advance.

[Jici]

You can create your own plugin. Ask AI (I prefer Claude) for a JS script that could convert UTF16LE to UTF8

After, you can add this to a server side script(work everywhere) or a client side element script(cheaper in WU) to convert the file and generate a new one uploaded to Bubble storage.

[gary45]

Thanks everyone for the help in this thread!
Following your suggestions, I finally got the JSON import working — sharing the solution here in case it helps others.

The issue wasn’t with Bubble or the API Connector, but with the JSON file encoding itself.
The files generated by the simulation (ACC) were in UTF-16, and Bubble cannot parse a JSON unless it’s UTF-8, which is why I kept getting the “non-object / invalid JSON” error during API initialization.

Here’s how I solved it

Based on the idea mentioned earlier about wrapping the file, I created a Cloudflare Worker that fetches the uploaded file via its URL, converts it automatically from UTF-16 to UTF-8, and returns a new URL that Bubble can read.

Full flow:

1. User uploads the file via FileUploader

2. Bubble stores it temporarily

3. The Worker is called and converts the JSON (UTF-16 → UTF-8) cloudfare

4. I retrieve the converted file URL

5. Bubble’s API Connector can parse the content without any errors

Since then, both XML and JSON imports work perfectly.

If anyone needs the Worker code or a step-by-step guide (it’s free), I can share it!