API format issue

Need help APIs
1

Hi there, I’ve used the Bubble API connector many times without issue, but right now, I’ve got a problem with an API format and using it in a repeating Group.

Here’s the format of the API response below. (It’s search results.)

As you can see we have “result” and then within that we have each result ID as child items, and then within those children we have then data we want.

{
  "header": {
    "type": "esummary",
    "version": "0.3"
  },
  "result": {
    "37401615": {
     "title":"Example title 1",
      "pubdate": "2023 Sep",
      "epubdate": "2023 Jul 4"     
    },
    "37401563": {
      "title": "Example title 2",
      "pubdate": "2023 Sep",
      "epubdate": "2023 Jul 4"     
  }
}

This format means that the API connector treats each result item as a unique field, so multiple results return the format “37401615 title”, “37401563 title” etc. so I can’t use them in a repeating group.

Has anyone else ever experienced this? or have a workaround to use a format like this?

2

You cannot use this kind of API response directly in Bubble API Connector.
Please refer to this reply

3

Thanks for this!

So a summary for anyone reading this with a similar issue. Bubble API connector is unable to work with this (fairly common) format of JSON API (Called “JSON Dictionaries”)

There are two options and BOTH start with setting the data type in your API connector to “text”.

  1. Use Extract with Regex to get the data you want - this is not great but it works.
  2. Find a plugin (not great either but it works) - search for JSON Parsers.
  3. Wait for Bubble to support this kind of format. (very bad solution given they don’t seem interested in supporting it).

So in summary, it is a painful limitation of the API connector, but there are workarounds.

4

This is not a simple thing to handle on Bubble side.
This would need probably important change to be able to handle this.

It’s common, but most API will not use dictionnaries like this. In most case this will return:

{
    "header": {
        "type": "esummary",
        "version": "0.3"
    },
    "result": [
        {
            "id": "37401615",
            "title": "Example title 1",
            "pubdate": "2023 Sep",
            "epubdate": "2023 Jul 4"
        },
        {
            "id": "37401563",
            "title": "Example title 2",
            "pubdate": "2023 Sep",
            "epubdate": "2023 Jul 4"
        }
    ]
}
1 Like
5

Thanks, yes, it’s most common for APIs to be formatted like your example above.

My previous work around was to use the XML data format (it is an option with this API) but Bubble broke the XML format during their update to v28, meaning I don’t get the data I need from the XML format anymore for this API, so this has been a painful journey for me to fix.

1 Like
6

I would just create a plugin with server side action to handle the transformation of this data.

Something like this

async function(properties, context) {
    const axios = require('axios');

    try {
        // Make the API call using axios
        const response = await axios.get('https://example.com');

        // Extract and transform the result
        const resultObject = response.data.result;
        const resultArray = Object.keys(resultObject).map(key => ({
            id: key,
            ...resultObject[key]
        }));

        // Return the transformed result
        return {
            results: resultArray
        };
    } catch (error) {
        console.error('Error making API call:', error);
        throw new Error('Failed to make API call');
    }
}
1 Like