How to display a JSON list from API message content in a Repeating Group?

[raoulboya]

Hi Bubblers,

I’m struggling with what seems to be a common problem: displaying a list of JSON objects returned from an API inside a Repeating Group.

My Goal: My OpenAI API call (GenRec) returns a JSON object inside the standard message content field. I want to extract the empfehlungen list from this JSON and display it in a Repeating Group.

My Setup:

1. API Call (GenRec): The API successfully returns a message content (text) which contains the following JSON string:JSON{ "empfehlungen": [ { "karriereoption": "Datenanalyst", "match_empfehlung": "Die Nachfrage wächst...", "potenzial_aufwand": "Gehalt: 50-80k €..." }, { ... more objects ... } ] }When I initialize the call, Bubble creates a response type called GenRec choice, which contains the fields “message role” and “message content” (holding the JSON string).
2. Custom State (temp_json_antwort):

• I have a custom state on my page.
• Its State type is set to GenRec choice.
• The “is a list” checkbox is checked.

3. Workflow:

• When a button is clicked, I run the GenRec API call.
• In the next step, I use Set state to save the result. The value is set to: Result of step 1 (GenRec)'s choices.

4. Repeating Group (RG_Empfehlung_Neu):

• Its Type of content is set to GenRec choice.
• Its Data source is set to Group_ChatContainer's temp_json_antwort.

The Problem: My logic seems correct, but it’s not working. The core issue seems to be that Result of step 1 (GenRec)'s choices is not a direct list of GenRec choice objects. The actual list is “trapped” inside the message content’s text string.

When I try to set the Data source of a Text element inside the RG cell, I only see Current cell's index. The option Current cell's GenRec choice is missing, so I cannot access its fields.

What is the correct way to parse the JSON string from message content and feed the empfehlungen array to my Repeating Group? Do I need a plugin or a different approach in the workflow?

Here is a link to my editor (set to ‘everyone can view’).

Thank you for your help!

[Jici]

Can you share API connector settings and response and RG settings?

According to your test, the data type should be …'S empfehlungen because the list is there.

However, a lot of LLM will return a response as a string that need to be parsed again (using a plugin OR sending it to a backen WF using API connector…)

[raoulboya]

Thanks for the quick reply!

API Connector settings:

Response (Reinitialize Call):

RG Appearance:

Custom state “temp_json_antwort”:

I believe you are right, but currently I do not see how to do it. I would need to take the API response and parse it somehow and the load it into the temp_json_antwort I guess. But not entirely sure.

[Jici]

Message content (from what I see in your screenshot) is the JSON but as a string.
Create a Backend WF API endpoint with one parameter “json_text” (type text)
Add one action “Return data from API”. Set it to Custom content-type. Content-type will be application/json and the body will be json_text

Create a new API and API call that will POST the json to this endpoint. The body of this request should be something like: {"json_text":"<json_text">}
Copy the Message content json, and initialize the API endpoint using this in json_text as value

[raoulboya]

A big thanks to @Jici for the initial guidance on setting this up!

---

It seems there’s still a misunderstanding of how the JSON string needs to be precisely formatted or handled during its transmission from the frontend workflow (specifically, the OpenAI API’s raw content output) into the json_text parameter of the Send Json to Parser API call’s request body. The Backend Workflow doesn’t seem to receive it as a correctly parsable JSON string.

Any further insights or alternative approaches to ensure the JSON string is properly transmitted and parsed would be immensely appreciated!

Thanks in advance for your help!

Here’s the current setup, detailing how we’re attempting to handle the JSON string:

---

The Overall Goal:

To display a list of “recommendations” in a Repeating Group, where the data comes as a JSON string from OpenAI’s content field.

The Current Setup:

0. Overall workflow

1. Backend Workflow (API Endpoint) Setup:

• Go to Workflows → Backend workflows.

• API endpoint name: parse_json_string.

• Authentication: Set to This endpoint can be run without authentication.

  • Screenshot 1: Backend Workflow Authentication Setting
    
    

• Parameters: One parameter: json_text (type: text).

• Action: Return data from API

  • Content-type: Custom content-type set to application/json
  • Body: json_text:formatted as JSON (parse)
    • This is intended to take the incoming json_text string and parse it as JSON before returning it.
  • Screenshot 2: Backend Workflow “Return data from API” Action

2. API Connector Call to the Backend Workflow:

• Go to Plugins → API Connector.
• API Call name: Send Json to Parser.
• Use as: Data, Data type: JSON, Method: POST.
• URL: The URL of the Backend Workflow (e.g., https://your-app.bubbleapps.io/version-test/api/1.1/wf/parse_json_string).
• Body (JSON object): {"json_text": "<json_text>"}
  • json_text is set as a parameter below and is NOT Private.
• Initialization: When initialized, we provide a sample, UNESCAPED, complete JSON string (like {"empfehlungen": [...]}). This initialization step works successfully and Bubble recognizes the empfehlungen list and its fields.
  • Screenshot 3: API Connector Call to Backend Workflow (Body and Successful Initialisation)

3. Frontend Workflow to Get & Parse Data, and Set Custom State:

• Custom State: ParsedEmpfehlungen (Type: Send Json to Parser empfehlungen, Is a list) set on Group_ChatContainer.

  • Screenshot 4: Custom State Definition
    
    

• Workflow step (after OpenAI API call): Set state of Group_ChatContainer's ParsedEmpfehlungen

  • Value: Get data from an external API
    • API call: Send Json to Parser
    • Parameter json_text: Result of Step 1 (OpenAI Chat - GenRec)'s choices:first item's message's content
      • (Note: We previously tried :formatted as JSON Safe here, which led to a similar error, so we removed it based on advice that the BW handles the parsing.)
    • Finally, we select the list from the result: .empfehlungen
  • Screenshot 5: Workflow Step - Setting Custom State with Dynamic API Call
    
    

The Problem I’m Facing Now (Recurring Error):

When running the app, I keep getting an HTTP 400 error from the Send Json to Parser service.

Error Message: Error: Error parsing request body: Unexpected token e in JSON at position 20 (or sometimes { at position 15, depending on the exact content).

• Position 20: if I set “(body) json_text” to “Result of step 1 (OpenAI Chat - GenRec)'s choices:first item’s message content”
• Position 15: if I set “(body) json_text” to “Result of step 1 (OpenAI Chat - GenRec)'s choices:first item’s message content:formatted as JSON safe”

This error appears to indicate that the JSON string being sent to my Backend Workflow is malformed from its perspective. However, I have confirmed that the output from the OpenAI API call (Result of Step 1...'s content) is indeed a perfectly valid, unescaped JSON string, which I verified by displaying it in a text element on the page.

Screenshot 6: The Persistent HTTP 400 Error

Screenshot 7: Confirmed Valid JSON from OpenAI (displayed in a Text Element)

[Jici]

Try to remove the double quotes around <json_text> in API connector and use :formatted as json-safe on the result of step one’s message content in json_text

[raoulboya]

Fixed it, thanks!