How can I access keys and data from an API call in custom element code? Such as the Initialize and update functions

anthony.schanen · 2020-05-31T19:50:50.736Z

I am making an API call under the API calls tab, and I want to use the data from this call in the elements tab. More specifically the initialize function. What syntax do I use to achieve this? The function only has two parameters instance and context neither of which show in the documentation that they have the capability of doing this. Is there another way?

sudsy · 2020-05-31T20:02:49.203Z

anthony.schanen:

The function only has two parameters instance and context neither of which show in the documentation that they have the capability of doing this.

If I understand correctly, the keys property of the context object might be part of what you’re after…

Screen Shot 2020-05-31 at 1.58.15 PM2250×656 68.5 KB

anthony.schanen · 2020-05-31T20:23:27.551Z

Unfortunately this does not yield the result im, looking for.

for example, if i were to write something such as

  console.log(context.keys.my_key_name);

this logs “undefined” in the console, im not sure if im calling it correctly

sudsy · 2020-05-31T20:25:48.044Z

IIRC, if the key is private, it might not be available client-side.

anthony.schanen · 2020-05-31T20:30:14.435Z

helpme12256×138 4.62 KB

helpme2901×596 32.3 KB

This is what im working with,

does anything look wrong here? The Keys are public, i know the URL key looks weird but I am sort of doing a weird implementation of something here, so excuse the awkwardness

sat_miha · 2020-05-31T20:34:00.759Z

Tell us more, what you are trying to achive

anthony.schanen · 2020-05-31T20:50:55.023Z

I am creating a custom element, the only thing this element is trying to do, is add html tags to JSON data that has text in it. it is coming from an api call from a website called contentful, which is used to provide elements to websites.

Rich text is being sent from Contentful to bubble, but because bubbles API connector does not properly retain the texts original rich text formatting, I needed to create a custom plugin which formats the text coming from this API call, and adds HTML tags to it. There are a few obstacles I need to get through though.

To properly access the correct text in this JSON formatted API call, I need the name of the original rich text box created in contentful. Contentfuls api does not provide this information when you call it, so my plan is to manually enter it as a key. Here is an example of the data so you can see what I am talking about

let contentfuldata2 =’{\n’ +
’ “sys”: {\n’ +
’ “space”: {\n’ +
’ “sys”: {\n’ +
’ “type”: “Link”,\n’ +
’ “linkType”: “Space”,\n’ +
’ “id”: “tikpwskye7s8”\n’ +
’ }\n’ +
’ },\n’ +
’ “id”: “Y4rhZfxAQZPG6GHAV0Ekw”,\n’ +
’ “type”: “Entry”,\n’ +
’ “createdAt”: “2020-05-04T23:48:30.571Z”,\n’ +
’ “updatedAt”: “2020-05-13T00:26:31.723Z”,\n’ +
’ “environment”: {\n’ +
’ “sys”: {\n’ +
’ “id”: “master”,\n’ +
’ “type”: “Link”,\n’ +
’ “linkType”: “Environment”\n’ +
’ }\n’ +
’ },\n’ +
’ “revision”: 39,\n’ +
’ “contentType”: {\n’ +
’ “sys”: {\n’ +
’ “type”: “Link”,\n’ +
’ “linkType”: “ContentType”,\n’ +
’ “id”: “pepsi”\n’ +
’ }\n’ +
’ },\n’ +
’ “locale”: “en-US”\n’ +
’ },\n’ +
’ “fields”: {\n’ +
’ “DYNAMIC”: “THIS_NAME_IS_DYNAMIC”,\n’ +
’ “ALSO_DYNAMIC”: {\n’ +

for example if I want to access data through this object id have to do something like

sys.space.etc.etc.fields.DYNAMIC_VALUE.DYNAMIC_AGAIN

I need a separate API call for every rich text box element defined in contentful, so I need to use the API tab in the plugin builder so I can add as many as id like

I just need these two values to be passed over to the elements tab where the code takes the values, grabs the data from contentful, adds tags and displays it using instance.canvas etc

I know that was a lot, so ask for clarification, I am also a learning developer not out of school yet

natedogg · 2020-05-31T20:55:44.140Z

anthony.schanen:

Unfortunately this does not yield the result im, looking for.

for example, if i were to write something such as
  console.log(context.keys.my_key_name);
this logs “undefined” in the console, im not sure if im calling it correctly

You’re close. The proper syntax to access keys that the User inputs via the Plugins tab is actually:

context.keys['KEY_NAME_GOES_HERE']

anthony.schanen · 2020-05-31T21:09:23.590Z

This did work but it gave me a different error when trying to log it in the console

help31585×30 3.99 KB

jonah.deleseleuc · 2022-03-08T20:42:53.237Z

natedogg:

.keys['KEY_NAME_GOES_HERE']

This is great, but where is the documentation for the syntax? I can’t find it anywhere

anthony.schanen · 2022-04-28T20:18:00.771Z

Hey Jonah, Nice to see people are still arriving at this thread and finding answers.

I am with you on this one that it’s definitely not clear within bubbles docs (Me from two years ago definitely remembers this being frustrating)

There’s also something to be said that when they mention that keys is an object without mentioning if we are using bracket object notation, or accessing an array, that it’s very ambiguous. The docs probably need to be more verbose and the amount of views the thread has is definitely showing there’s a need for better documentation. Bubble is aiming at a lower code market, which should lend itself to verbose documentation anyway. But that’s just my opinion.