API Connector - use most JSON APIs directly from Bubble

I just enabled the URL as a parameter. Let me know how it goes!

Works well thank you @georgeciobanu . Another question how would i handle error responses. You know responses that are not code 200 is there a way for the plugin to return these responses to be validated? Right now from development environment it returns

and from app preview it returns this

Thanks

1 Like

In the editor what you see is the actual response from the sever. We pass it through. In production that’s unsafe to do since it might contain provate information (your secret API key for example, some APIs include that in the response) so we keep in on the server, away from your users’ access.

Thanks for the reply @georgeciobanu But my question is really on how to handle the errors instead of having the site produce a popup saying we ran into a temporary bug. When building the site we do our best to reduce input errors as much as possible but as you know this will not be a 100%. If we can have the option in the meantime to set a standard reply to the users on errors produced this will serve the purpose. The other option is a was to capture non-success codes. for example 400 errors.

Thanks again looking forward to your response.

Being able to trap errors more elegantly would be really useful.

Eagerly waiting for JSON array handling. Particularly nest arrays, and optional ones. So in my test case I want to return Google Places, which is an array, but within each place is an array of Images for each place. But that may not exist. Going to be interesting to see how works in practice :slight_smile:

I was recently pointed at https://wrapapi.com/ which is a bit beta at the moment, but could be a way to reskin API based websites with a responsive bubble front end.

1 Like

Thanks for the reply George.

What I am trying to achieve is to have the following structure on pages source code :

I am just trying to follow Google recommandations (see p20 on the following link) : http://static.googleusercontent.com/media/www.google.com/fr//webmasters/docs/search-engine-optimization-starter-guide.pdf

I have already edit the page HTML with the HTML component but not sure robots can read it as it does not appear on source code.

If you can guarantee that using HTML component have the same impact as a fully code site, it’s ok for me :smile:

Why don’t you put that on the body of the page?

Hi Emmanuel,
Thanks for your reply.
Where can I have access on it?
I can access on the body of the app via Settings>Metatags>Script in the body but it does know allow us to have a different body per page and this is what I am trying to do for having different heading tags on each pages of my app.
Or maybe you have a alternative solution that I don’t know for doing what I’m trying to do? :smile:

Sorry my bad, it’s HTML header. Can you put that there? Double clicking on the page.

No worries :wink:

Well it is not very conventionnal to put that in the header. Never see a website doing that in fact…

W3C recommends to put content in the body section : http://www.w3schools.com/tags/tag_body.asp

When I submit my app on different site analyzer such as woorank, semrush, traffic travis, etc. they all say that I don’t have any heading tags on pages and this is my concern because all my pages have some HTML component where I have placed my heading tags but none of these tools seems to recognize the HTML content put in HTML component.

Thanks for your help ! :smile:

Hey @georgeciobanu are you still planning to Handel things like this?

Hey @AliFarahat, handling errors is a bigger project in Bubble, we’ll certainly handle it at some point, no timeline yet. We’ll likely first surface these errors to you, the app designer, in order to understand what’s going on and act on them.

Hi @NigelG - working on array support, I’ll update this thread when it’s ready.

3 Likes

Alright thanks, I will let you know in a couple of weeks when the app is built. Then we can take from there…

EDIT: I simplified the explanation and updated it to allow complex objects inside main lists.

Hey everyone,

The API connector is now able to deal with arrays. There will be cases when you might still not get all the data out in one call or at all, depending on the API.

The simple rule is that arrays inside other arrays cannot be accessed.

A typical case is this: you make a GET request to /users and you’ll get back

count: 50
entries: [ {name: ‘user 1’ }, {name: ‘user 2’} ]

In this case, you will see ‘entries’ in the Main list dropdown. If you pick it, the response will contain both users.

Here’s an example:

count: 50
entries: [ {name: ‘user 1’, age: 23, dogs: [‘Tom’, 'Hank] }, {name: ‘user 2’} ]

In this case, both dogs and the age will be imported and available in Bubble.

But in this example, the dogs list will not be imported.

count: 50
entries: [ {name: ‘user_1’, address: { street: ‘Main’, number: 23},
dogs: [ {first: ‘Tom’, last: ‘Cruise’]}, {name: ‘user_2’} ]

Also note that dogs cannot be used as a main array, since it is inside another array (entries).

Logically, we can’t do that since we don’t know whose dogs to look at (user 1 or user 2). So your best bet here, if possible, is to make another api call to /users/user_1 and usually this returns the entry for that user, and you can choose the dogs array. Or don’t give your dogs a first and last name :slight_smile: (though you should).

When the time comes, we’ll iterate on this plugin again. In the meanwhile, enjoy and let us know how we can make it better.

Please see Introduction - Bubble Docs as well.

An example of what the types would look like for an Etsy call:

5 Likes

Awesome, thanks!

Just to confirm, for the dog and address array you were pointing out, secondary arrays cannot be imported with a general call of the whole list, correct?

I don’t really understand the explanation above I am afraid @georgeciobanu

It still doesn’t work with Google Places API.

Don’t get the “Entries” drop down and I can’t see why. Of course, I am not able to see what is coming back on the call, which makes it really really hard to debug.

Even when I make the call simpler (So a Radar rather than a nearby).

{
“html_attributions”: ,
“results”: [
{
“geometry”: {
“location”: {
“lat”: 42.99876519999999,
“lng”: -81.1946849
}
},
“id”: “3f31fa9dd36a1890f78bf74700311b75e5ff7784”,
“place_id”: “ChIJs6bReWXtLogR4moU5X_ZM7k”,
“reference”: “CmRaAAAAhyyiLQ8IFek2wOKyXW3y3NS4e8nVLgaYmdo6h0GMSMBNNcg_0Rn8o5PXrJkvLP9XebbbskQ0BlUzAY67PfsYwY4Dqt36uf0DEYVgaldMdOSJl-CyjkTEoiOfpoamB5IxEhDmJ3HQdklBGJKnqL6HO7HcGhS9oGBFxzlrBcrIHTp25FxyT-Gwjg”
},

You surely can’t be saying that you can’t work out where geometery/location lives ?

If this is the full response, in this case you don’t need to use a main list - since there is only one entry, regular mapping will return all fields each with their unique name goven by the path.

There are 200 responses, I only get 1.

How do I get them all ?

@NigelG just took a look and looks like everything works ok, and all results are returned. Let me know if that’s not the case.