API and Javascript help

Need help APIs
1

I own a content website and I would like to use Bubble to build a tool that will allow me to replace keywords on my site to a hyperlinked keyword. For example, if someone makes a post and mentions Zillow, it will automatically convert Zillow to Zillow in the HTML.

With Bubble I know how to build an interface and database that will allow me to enter the keywords and associated URLs, but I don’t know how to setup the API to allow me to make a javascript call to find the values to be replaced.

Can anyone provide assistance on how I would do this?

2

Here’s a basic app that I’ve created so far.

3

What technology is your content site built with? Does it have a database or APIs that could be accessed by Bubble?

4

It’s a PHP based forum.

5

I plan on building the database and management UI in Bubble to house the Keywords and URLs. I just don’t know how to write the javascript that would search bubble for the keywords to replace and the associated URLs.

1 Like
6

So, I was able to setup the API and run the following GET with the following results:

GET https://findandreplace.bubbleapps.io/version-test/api/1.1/obj/keywords

{
“response”: {
“results”: [
{
“keyword”: “Google”,
“Created Date”: “2018-02-03T19:11:09.090Z”,
“Created By”: “1508757117987x170844219857826800”,
“Modified Date”: “2018-02-03T19:11:09.090Z”,
“url”: “https://www.google.com”,
“_id”: “1517685069090x817754573188722200”,
“_type”: “custom.keywords”
},
{
“keyword”: “Amazon”,
“Created Date”: “2018-02-03T19:22:24.551Z”,
“Created By”: “1517685580376x819307316327467500”,
“Modified Date”: “2018-02-03T19:22:24.598Z”,
“url”: “https://www.amazon.com”,
“_id”: “1517685742904x154482585500647420”,
“_type”: “custom.keywords”
},
{
“keyword”: “Zillow”,
“Created Date”: “2018-02-03T19:30:42.087Z”,
“Created By”: “1517685580376x819307316327467500”,
“Modified Date”: “2018-02-03T19:30:42.138Z”,
“url”: “http://www.zillow.com”,
“_id”: “1517686241201x951191101229760500”,
“_type”: “custom.keywords”
},
{
“keyword”: “Microsoft”,
“Created Date”: “2018-10-19T21:39:28.255Z”,
“Created By”: “1539985113946x455720216501504200”,
“Modified Date”: “2018-10-19T21:39:28.306Z”,
“url”: “http://www.microsoft.com”,
“_id”: “1539985167224x910185981874274300”,
“_type”: “custom.keywords”
},
{
“keyword”: “Zillow”,
“Created Date”: “2018-10-20T03:07:03.091Z”,
“Created By”: “1540004754069x571366896387189600”,
“Modified Date”: “2018-10-20T03:07:03.141Z”,
“url”: “https://neversleep.on.a.zillow.com”,
“_id”: “1540004822424x201307228050554880”,
“_type”: “custom.keywords”
},
{
“keyword”: “zillow”,
“Created Date”: “2018-10-20T03:08:24.942Z”,
“Created By”: “1540004754069x571366896387189600”,
“Modified Date”: “2018-10-20T03:08:24.990Z”,
“url”: “https://MustUseCapsInURL.caps”,
“_id”: “1540004904336x448719288620810240”,
“_type”: “custom.keywords”
},
{
“keyword”: “zillow”,
“Created Date”: “2018-10-20T03:09:19.917Z”,
“Created By”: “1540004754069x571366896387189600”,
“Modified Date”: “2018-10-20T03:09:19.965Z”,
“url”: “alert(‘run this javascript here’)”,
“_id”: “1540004959344x331571928350588900”,
“_type”: “custom.keywords”
},
{
“keyword”: “pillow”,
“Created Date”: “2018-10-20T03:39:18.907Z”,
“Created By”: “1540004754069x571366896387189600”,
“Modified Date”: “2018-10-20T03:39:18.957Z”,
“url”: “http://superfluous.io/”,
“_id”: “1540006758226x128922359984291840”,
“_type”: “custom.keywords”
},
{
“keyword”: “bug”,
“Created Date”: “2018-10-20T03:41:38.227Z”,
“Created By”: “1540004754069x571366896387189600”,
“Modified Date”: “2018-10-20T03:41:38.280Z”,
“url”: “https://www.xkcd.com/1700/”,
“_id”: “1540006897525x482895914136502300”,
“_type”: “custom.keywords”
}
],
“cursor”: 0,
“count”: 9,
“remaining”: 0
}
}
Variables

Now I need to convert the response to a REGEX to replace the keyword with the proper A ref to the URL.

7

That returned data looks somehow familiar.

Well done getting the results back to your php site.

8

Bubble has built in regex and find & replace. See the last two items in the list.

image

Here’s an example.

image
image869×285 22.2 KB

9

Thank you for your response.

True, it does, but correct me if I’m wrong, I don’t believe this will help on a third party site and only works to find and replace within the Bubble site.

10

Maybe I missed something, but you mentioned that you were going to search bubble for keywords to replace.

11

I’m using Bubble to build the interface and to house the data for keywords and URLs. I then want to use the API to search the database to determine which keywords on my other (non-bubble) site need to be replaced with a hyperlink. So, I’m not replacing anything within the Bubble database, just some HTML/Text on another site.

12

To be more specific, from the data below that I’ve pulled out of the Bubble DB using the API, I want to find “keyword” and replace it with <a href="url">"keyword"</a>

13

Does the replacement have to happen immediately?

Does the forum software have REST APIs or webhooks?

I would think it would be nice to POST a “forum post” to Bubble when it’s submitted on the forum. Have Bubble process it and return the processed “forum post” back to the forum software to update the post. This would allow you to use the “find & replace” function in Bubble. (i.e. Forum post => Bubble => Updated forum post).

Otherwise you may need Bubble to search your forum for new posts and perform that replacement.

14

Yes, I’m looking for it to happen immediately.

15

I’m not sure Bubble is worth using for your use case. I think it would be better to setup a table in the database that your forum is on and write some PHP code to do the replacement.

16

@tyler.edwin.smith, does this summarise your requirement?

You have a PHP served page, with a PHP or javascript API call to Bubble, returning a list of the above objects or JSON strings.

On the page is some text, possibly supplied by the user, in which you want to replace keywords contained in the JSON.

What sort of matching do you want to do, for example does MyGooglePlex match keyword Google?

Will you know in advance which texts need which keywords replaced?

You’ll probably want to use javascript’s string.replace or Regexp module, and iterate through your list of objects with indexOf or a loop.

17

That’s exactly it.

Only the whole word, not case sensitive, will need to be altered. So MyGooglePlex would not get converted.

Yes, I’m using Bubble as the platform to store the keywords and associated URLs, so I will know which keywords that I want to replace.