Parsing API response with JS2bubble

stevenvincentone · 2024-07-07T17:59:37.665Z

Right now we are trying javascript2bubble to parse the data. The JavaScript code appears to be correctly parsing the JSON response and extracting the values. However, the issue seems to be with passing these values to Bubble. Anybody have any thoughts about this approach in general and this problem in particular. Much thanks for your assistance.

Here’s a detailed account of the efforts we made to create and implement the JavaScript-to-Bubble (js2bubble) solution to parse and transfer data:

Overview

We aimed to parse a JSON response from an API and transfer specific values to Bubble’s custom states using the JavaScript-to-Bubble (js2bubble) plugin. Our goal was to dynamically update fields in Bubble’s UI with values extracted from the JSON response.

Steps Taken

Initial Setup
- Installed the js2bubble plugin to enable communication between JavaScript and Bubble’s workflows.
- Added js2bubble elements to the page, each configured to handle a specific value from the JSON response (e.g., relevancy, novelty, validity, harmfulness, token_score).
Workflow Configuration
- Created a custom state (api_tokenresponse_log) to store the JSON response from the API call.
- Set up a workflow to trigger the API call and store its response in the custom state.
- Added a JavaScript action in the workflow to parse the JSON response and invoke the js2bubble functions with the extracted values.
JavaScript Code Development
- Developed a JavaScript function to:
  - Fetch the JSON response from the custom state.
  - Parse the JSON to extract specific values.
  - Convert these values to the appropriate types (e.g., numbers).
  - Invoke the js2bubble functions to pass these values to Bubble’s custom states.
Debugging Efforts
- Implemented console.log statements at various stages in the JavaScript code to trace the data flow and identify any issues.
- Ran the workflow in Bubble’s debugger mode to observe the values at each step and verify the data parsing.
- Identified an issue where the js2bubble functions were not receiving the parsed values.
Dynamic Data Handling
- Ensured the JavaScript code correctly fetched the dynamic value from the custom state using index.get('api_tokenresponse_log').
- Updated the JavaScript code to log and handle errors effectively, providing insights into any issues with data parsing or function invocation.
Testing and Validation
- Added a temporary text field to display the raw JSON response, confirming the data was correctly fetched and stored in the custom state.
- Refined the JavaScript code to ensure the parsed values were correctly logged and passed to the js2bubble functions.
- Repeated testing in the debugger mode to validate the solution, adjusting the code as necessary based on the logged output.

JavaScript Code

console.log("API Response:", index.get('api_tokenresponse_log'));

try {
  var response = index.get('api_tokenresponse_log');
  var json = JSON.parse(response);
  console.log("Parsed JSON:", json);

  var relevancy = Number(json.relevancy);
  var novelty = Number(json.novelty);
  var validity = Number(json.validity);
  var harmfulness = Number(json.harmfulness);
  var token_score = Number(json.token_score);

  console.log("Relevancy:", relevancy);
  console.log("Novelty:", novelty);
  console.log("Validity:", validity);
  console.log("Harmfulness:", harmfulness);
  console.log("Token Score:", token_score);

  // Check if the bubble functions are defined and log their invocation
  if (typeof bubble_fn_relevancy === "function") {
    console.log("Invoking bubble_fn_relevancy with:", relevancy);
    bubble_fn_relevancy(relevancy);
  } else {
    console.error("bubble_fn_relevancy is not defined");
  }

  if (typeof bubble_fn_novelty === "function") {
    console.log("Invoking bubble_fn_novelty with:", novelty);
    bubble_fn_novelty(novelty);
  } else {
    console.error("bubble_fn_novelty is not defined");
  }

  if (typeof bubble_fn_validity === "function") {
    console.log("Invoking bubble_fn_validity with:", validity);
    bubble_fn_validity(validity);
  } else {
    console.error("bubble_fn_validity is not defined");
  }

  if (typeof bubble_fn_harmfulness === "function") {
    console.log("Invoking bubble_fn_harmfulness with:", harmfulness);
    bubble_fn_harmfulness(harmfulness);
  } else {
    console.error("bubble_fn_harmfulness is not defined");
  }

  if (typeof bubble_fn_token_score === "function") {
    console.log("Invoking bubble_fn_token_score with:", token_score);
    bubble_fn_token_score(token_score);
  } else {
    console.error("bubble_fn_token_score is not defined");
  }
} catch (e) {
  console.error("Error parsing JSON response:", e);
  console.error("Raw response:", response); // Log the raw response for debugging
}

Conclusion

The js2bubble integration faced initial challenges in passing parsed values to Bubble’s custom states. Through persistent debugging and dynamic data handling, we ensured that values were correctly parsed and transferred. The JavaScript code logs key steps and errors, facilitating effective troubleshooting and validation of the data flow from the API response to Bubble’s UI elements.

This approach highlights the importance of thorough logging and step-by-step validation in complex data integration tasks, ensuring a robust solution for real-time data updates in Bubble applications.

GH5T · 2024-07-07T19:21:30.070Z

Shot you a DM!

ihsanzainal84 · 2024-07-08T00:09:12.229Z

Should have built your own plugin. Easier to maintain.