I have set up an API action using API connector, and returned JSON data type.
My result is a list of objects, something like: "response": { "data": [ {}, {}, ] }
Once I get the results I filter them to retrieve only one object from the list named in my exemple above “data”. Basically I filter the values from response.data to get the object with id=“something”. Let’s say the obtained object is {"id": 3, "name": "Pierre", "age": 25}
I can’t figure out how to display this item to Bubble so that user sees : {“id”: 3, “name”: “Pierre”, “age”: 25}
When I select the object in a text element, bubble is not happy with it. It only want text format.
I have tried to run js using Toolbox, and I set up the param1 to be this item. It seems to be working because when I console.log properties.param1. listProperties I have the correct ones.
And when I console.log properties.param1, I have 3 methods attached to the object, “get”, “listProperties”, and “_original”
No way to console the object itself.
Any ideas?
One thing that could be done is to loop over the listProperties. Each property has a constant prefix, so it could be retreated to get the initial object key name. And for properties where the value is also an object. For instance if I have: { propertyWithNestedObject: { property: "test" } }
then to get the value “test” I need to write propertyWithNestedObject.property.
I have not tried it yet but this should work, I could recreate the object like this.
However, I would be quite surprised if I need to do all that stuff for a simple task as displaying an object…
Please any help on this?!
Thanks very much for your prompt answer.
Please, I have not tried it yet (i let you know once I try it if it worked), but even if it’s working, would you know why making it to data solves it? Because then the drawback is that I will not be able anymore to use it in workflows. So does it mean that I need to duplicate the API, setting one as Action and another one as Data, and then I use one or the other when I need it?
For your question, I might do it later, depending on how I want to use the data, but for now, I just wanted to display my object as it is. I did not think I would struggle for that ^^
When used as data, they appear in the dropdown menu for “Get data from an external API” when “Insert dynamic data” is clicked. When used as actions, they appear in the Plugins section of the Actions dropdown menu.
When you use it as data from an external API, you can kind of treat the results like a data type. So, if you used it to populate a repeating group, the expression would be Your API call’s response’s data. Then, in each cell, each ‘data’ would be the id, name, and age that you could reference through ‘Current cell’s id/name/age’. That also means you can do Your API call’s response data:filtered (id = 3) for example, if you wanted to obtain the one that’s ID = 3.
Yep @georgecollier , I have already done it.
My issue is not how to get the object, but more how to display it once I have it.
I am already manipulating the resulting data, doing different kind of things with it but when I try to display the raw object it does not work. Even if it’s most likely rare someone will need to display to end-consumers a raw object, this is something I still expect to be doable ^^
Actually Bubble has a property sent in the response to display the raw body, which works but only for the higher level. When used to the filtered result, the raw body was empty.
So if my get request result is:
`“response”: { “data”: [ {}, {}, ] }``
I can get the raw object response by selecting the property raw body… but once I do the filter on response.data then the raw body of the resulting filter is empty.
Do you mean in the text element, I should insert dynamic data by entering data:filtered:first item’s ID?
But in this case, I would get only the ID of my item. This is not where I am struggling, manipulating and extracting the properties of the item is ok, no issue with that part.
It’s really just how to display the full item object without any formatting, just as plain object.
@georgecollier, yes sure I can if there are just 3/5 keys. But if there are 30, it becomes not possible.
Of course, you could automate it using JS, as I suggested in my initial post, but having to write these lines of codes for this seems to me overkill. I’m sure there is a solution I don’t know about yet.
If the raw body of Your API call’s response data:filtered:first item is empty then it sounds like a bug. At least, I hope it’s a bug and Bubble doesn’t ‘expect’ raw body is supposed to break when you filter an API call…
I don’t think there is a bug with the filter because the app works perfectly as expected. I mean I get everything I want. If I want to get the property (let’s say platformId) of the filtered result, I have it and it’s the correct one. Had I not tried to display the raw object I would not even have noticed anything.
actually it is not that surprising that the raw body becomes empty after the filter. I might be wrong, but I think Bubble sends the full body response as text. So since it is now a text, they have no way to filter on it anymore. So I would think that Bubble expect us to perform the filter before (backend) and then to get the server response as raw text, but not retrieving the raw text in client-side and get operations on it that do not apply to text formats.
After too much time spending on this, I decided to rebuild the object with JS.
I get the raw object as desired. But not in a pretty human-readable format
I do not close the issue for now as I expect/hope there will be a much easier solution without having to code.
. Can you check my screenshot please? Is it what you told me to do? Because Bubble does not let me select the object itself, I need to select one property.
Now you’ve seen how to get format as text, it should work on the list after a filter instead if you don’t want the whole list shown.
So, what to put in the box on the left? put in whatever text you want, mixed with whichever properties you want to show, you can add as many as there are. For each property do another dynamic data.
Idk why you’re then splitting to a list again afterwards and picking first item, I thought you wanted to display as much as you can?
Edit - maybe you want to display a list with one item, i.e. API data list :filter :items to 1 :format as text
Thanks for your time @mishav
Indeed, in this case, the split was not necessary, it was just for check purpose. But for my specific case, I will need only one item.
Initially I have a list of objects which is “body response pairs”: [ {"id": "x", "name": "Pierre", etc.}, {"id": "y", "name": "James", etc.} ]
I want the object which has a certain id, let’s say “y”. So my end result should be: {"id": y, "name": "James", etc.}
Coming back to your proposition, then what should I do?
The way I understand your suggestion is that I could do as follows (in the box on the left):
{
“id”: “This value’s id”,
“name”: “This value’s name”
}
with values inserted dynamically and keys written manually, am I correct?
If yes, my issue is still here because I don’t want to write manually the keys (id, name, etc.), if there are plenty keys, this will not be a viable solution.
