Format JSON array and POST to external endpoint

Can anyone advise on how to grab data from Bubble DB, format as JSON array, and POST to external endpoint? Most forum posts on this topic discuss how to RECEIVE JSON, I’m looking to go the other direction.

The 3rd party service provides an endpoint that is perfectly capable of receiving and parsing a JSON array. I’m able to use a “Do a Search for…” action to grab the data I need (filtered list of things), but can’t figure out how to take those results and construct a JSON array (need to pass the Thing, and its field values).

Thanks in advance!

Building up the JSON array is fiddly. If you need to send an array of objects, then you’ll need to build up each object separately, then concatenate them into the array.

For example:
to build this:
[ { “username”: “Uncle Fester”, “number of brothers”: 0},
{“username”: “Wednesday”, “number of brothers”: 3} ]

For each item in the list, build up the text:
{ “username”: “item's username”, “number of brothers”: item's brothercount }

Then join the list of texts together with a comma delimiter, using :join.
Then surround with square braces [ ].

Also, if text data comes from user input, it needs to be escaped with a backslash: double quotes and backslashes, you can use :find & replace for this.

2 Likes

I understood your question a little differently than @mishav, but they defiantly know more than I do and have helped me a bunch. I understood it more as how to get data to where you can work with it in JS. Maybe this will help. Here is a post that shows the workings of a simple plugin I put together, I include this for reference because I spent more time trying to figure out what a plugin that actually does somehting looks like than creating this one.

And here is the JS from another plugin I am working on that posts a string to an external API. Dynamic Data is in Bold Italics

$.post(‘https://apiv2.indico.io/custom/predict’, JSON.stringify({
api_key: context.keys.apiKey,
data: properties.text,
collection: properties.collection,
top_n: 2
threshold: 0.01
}),

2 Likes

@mishav where? Should I be using the API Connector to build a GET request with my own Bubble app as the endpoint? Seems backwards. Or creating a Scheduled API Workflow? Or doing all this in an HTML Element?All of the above?
Looking for high level advice on which tooling/plugins to use in Bubble first, then your helpful note on how to construct the call will be super helpful.

Thanks for sharing your plugins @matt3. I’m not a Javascript programmer, so I’m hoping there’s a path that doesn’t involve me writing JS.

The idea is to build it up as text from your data source, then send it to the POST API call.

Because the dynamic value can’t express what you want in one go, you’d need to have it done where you access each row of the data. For example, when the row is created or updated. Or something like modify a list of things.

I realise this is a pain, that’s what I meant by “fiddly” …

Ouch. So I have to store data two places, right? In your example, I’d need to have both a Users table and another data type (eg “User Export”) that constructs and holds the JSON-stringified snippet? And each time a user is created/modified, I need to update the corresponding snippet thing? Painful, but if I go that route, how do I do the POST API call at the end?

Yes, I did something similar a while ago for emailing details of a shopping cart. Although it is another text field that can be used on the same row, rather than a new data type. It works well if integrated with managing the items.

When calling the POST API, using a dynamic value you do a search for the rows of snippets (JSON objects) and join them together to make a JSON array, using :join.

An alternative is to convince me to finish and publish a plugin element that can build the JSON up from fields in a list of things. Its fiddly to build though because the field names need to be in context of some sort of template, and can’t assume you want every field in the result.

1 Like

ooh…I like the plugin option! What’s your favorite brand of scotch? :wink:

Maybe there’s an MVP version that deliberately ignores template support and uses every field. Using your text-field-on-same-row model, plugin simply adds a “make changes to thing” type action that populates the designated extra text field with JSON? Then leave it to user to exclude unwanted fields when making the POST call.

Ah, element plugins don’t have access to write to the database.

I was thinking more on the lines of the plugin traversing the list from data source and building up the JSON array of objects.

@daniel3 see if the List Item Expression in the Toolbox works for you. I’ve put an example of building up JSON.

Awesome, thanks @mishav! Will mess around and report back this weekend.

I’m trying to use Server Script with JSON.Stringify in the following way:

51%20PM

But I’m getting this error:

Plugin action Server script error:
SyntaxError: missing ) after argument list
at eval (eval at build_function (/var/task/index.js:54:21), :3:365)
at eval (eval at build_function (/var/task/index.js:54:21), :3:426)
at /var/task/index.js:276:23
at run_fn (/var/task/u.js:594:18)

Any ideas as to what I’m doing wrong?

What I’m really trying to do is to escape some text that’s in a Bubble data field that has quotes and other characters to be able to submit it to a JSON API. Find & Replace is not doing it for me, so I’m hoping to do this through a Server Script, but not sure how to do it this way.