Output an object for server-side/client-side

Tips
88

Thanks @lottemint.md trying this and inspecting the result of the action made it clear to me that the action code was not producing any value.

I went back and corrected the action to stringify the input text versus, then parse it before passing it to the convert function-- like so:

function(properties, context) {

const {convert} = require('json-to-bubble-object');

var jstring = JSON.stringify(properties.json_string);
var jstring = jstring.replace('{"ResponseCode":200,"ResponseText":"OK","Data":','');
var jstring = jstring.replace('{','[{');
var jstring = jstring.replace('}}','}]}');
var jstring = jstring.replace(/","/gi,'"},{"');  
var jstring = jstring.replace(/":"/gi,'","Display":"');  
var jstring = jstring.replace(/"7/gi,'"Value":"7');
var jstring = jstring.replace('[','{"ResponseCode":200,"ResponseText":"OK","Data":[');
var jstring = JSON.stringify(jstring); 


var jobj = JSON.parse(jstring);
var obj = convert(jobj);


return {"options_object_list": obj}    




}

However, I am still getting no results in the app preview. I am sending results to a custom state, referencing the correct object. I am also using that state on a simple text field as well as the drop down field just to see if the results vary by element and still nothing.

89

Fellow Bubblers,

@lottemint.md was gracious enough to show me the error of my ways.

Essentially, I had some badly formed Javascript, that was not correctly parsing the JSON input text.

You must account for spaces in the input text or the function to parse will not work correctly.

Here is some corrected code he suggested in my case:

function(properties, context) {

   const {convert} = require('json-to-bubble-object');
   let json_object;

   try {
  json_object = JSON.parse(properties.json_string)
   } catch (e) {

   }

   if (json_object) {

  let data = [];

  Object.keys(json_object.Data).forEach(key => {

     data.push({
        Value: key,
        Display: json_object.Data[key]
     })
  });

  delete json_object.Data;
  json_object.Data = data;


  json_object = convert(json_object);

  return {
     value: json_object
  }
   }
}
4 Likes
90

Congratulations on working through it, @reggie! I admire your tenacity. (It’s a problem-solving trait that I share.)

It’s unfortunate that so much time and effort was required to implement something that’s conceptually straightforward - i.e. convert a single object’s properties/values into an array of objects having name/value property pairs.

For the benefit of others who might find themselves in a similar situation, I’d like to offer a couple alternative approaches that might be worth considering, depending on one’s requirements.

Proxy Endpoint

Implement a custom endpoint to call from Bubble. That “intermediary” endpoint would call the “true” endpoint, do the data transformation, and then output an array that Bubble’s API connector would properly recognize as a list.

This could be implemented in code using a service like AWS Lambda functions or Firebase Cloud Functions; or it could be a no-code solution using a service like Integromat or Zapier.

List of Delimited Strings

Create a server-side action, but instead of returning a custom data type, simply return a list of delimited strings that could then be parsed within Bubble using the :split by operator.

Of course, the string would have to be split whenever a an item’s name or value needed to be accessed, but that’s pretty trivial…

JSON

[
	"740300008~~~Accounting",
	"740300005~~~Advanced Find / Reporting",
	"740300007~~~Automation",
	"740300000~~~Classes",
	"740300006~~~Committees",
	"740300002~~~Core",
	"740300003~~~Dues",
	"740300001~~~Meetings",
	"740300004~~~Membership",
	"740300009~~~Other"
]

 
Editor

dropdown-editor
dropdown-editor714×322 10.3 KB

 

Rendered Page

dropdown-rendered
dropdown-rendered636×614 22.7 KB

Obviously, it’s not the best developer UX if you’re distributing a plugin, but it could be a viable option for internal and/or infrequent use.

Either approach would avoid having to jump through all the hoops outlined in this thread in order to return a custom data type.

Regards,

-Steve

6 Likes
Key-value pairs as exposed state?
92

Thanks for all the valuable information shared in this thread.

I recently discovered this approach to returning typed objects from plugins and I’m trying to apply it in a client-side Element, but I haven’t been able to get it working.

I’m specifically looking for guidance on how to correctly set up App Types, exposed states, and publishState for a client-side element.

Any clarification or step-by-step explanation would be greatly appreciated.