[🌟 New Features: Ultra-Deep Drill] JSON Assistant Plugin: Your Solution to Complex JSON & API Data in Bubble

[matt71]

@NoCodeDataArtisan Well… I just pasted two items into the data source (vs. just one), and now I’m getting a different error in the debugger:

The plugin JSON Assistant / element { } JSON Extractor threw the following error: TypeError: object null is not iterable (cannot read property Symbol(Symbol.iterator))
at Function.from ()
at array_from

Basically, one item works fine, but any more than that is throwing this error. Any ideas? (I have a very basic repeating group setup with an image and one text element.)

[matt71]

@NoCodeDataArtisan I think this is part of the issue → in my DB, “denomination_list_number”: can either be something like [25,50] or null, because it’s optional. If I manually change instances of null to empty brackets, those items render just fine. However, if I leave them as null, then I get this TypeError in the debugger. (As a reminder, I’m using JSON that was generated by the Things to JSON action.)

Will I need to do manual JSON surgery every time to make this work? Or some kind of find/replace with regex? Or, is there a way for me to adjust either my Things to JSON , or API assignment config? Thanks for any advice.

[NoCodeDataArtisan]

@matt71

some kind of find/replace with regex?

Could you include a step to change "denomination_list_number": null to "denomination_list_number": [] before transforming the JSON into a bubble type?

[matt71]

I probably could. However, both null and empty brackets are valid JSON syntax, no? I use null to indicate an explicit absence of value (since the field optional). White empty brackets indicate that the field is present, but has no elements.

I’ve found at least one more instance of this null-shaped issue leading to TypeError errors. Sounds like find/replace is the recommendation (?), so I’ll keep that in mind re: whether it makes sense to use the plugin going fwd. i.e., the cost and hassle of daisy-chaining data transforms vs. performance gains, etc.

[matt71]

FYI: Looks like Things to JSON converted an empty "denomination_list_number" to the following JSON output elsewhere in the file: "denomination_list_number":{"_pointer":[],"single_api":false,"list_api":true}. Which is also triggering the TypeError. Will try and hunt for other gotchas later. Thanks.

[NoCodeDataArtisan]

@matt71

both null and empty brackets are valid JSON syntax, no?

Indeed, both are valid JSON syntaxes. The challenge lies in converting JSON to a Bubble data type and ensuring Bubble accepts the converted JSON. It must match the sample JSON used in the API call.

@matt71

“denomination_list_number”:{“_pointer”:,“single_api”:false,“list_api”:true}

Is this an action performed on the backend, or is the element being utilized on the frontend?

[matt71]

@matt71

“denomination_list_number”:{“_pointer”:,“single_api”:false,“list_api”:true}

When “denomination_list_number” exists, my UI does one thing. When it doesn’t, the UI does something else.

[matt71]

@NoCodeDataArtisan in all cases, the value for the field denomination_list_number in Bubble DB is just blank. So idk how/why it converted to {“Pointer…” Basically, I need to believe that Things to JSON will do so reliably and consistently – even if that means consistently doing find and replace for null → empty brackets. Otherwise, it’ll just break my app.

[matt71]

Following up, it looks like plugins such as jsoNest may output denomination_list_number to either or [1,2,3] based on my current DB, with no find-replace required. So I may end up using that for things to JSON conversion, then use the Assistant to transform into Bubble data.

[NoCodeDataArtisan]

@matt71

{“Pointer…”

The values are produced by Bubble, and the plugin is responsible for converting Bubble’s output into JSON format. The plugin itself does not create these values.

---

I apologize for the inconvenience you’ve experienced. I will address this use case to better manage such situations in the future.

[matt71]

@NoCodeDataArtisan Appreciate it. Fwiw, and after further investigation, it looks like my best option might generating the JSON using Bubble’s Data API. Afaict this consistently uses empty brackets by default for empty lists (vs. “null” or {"Pointer…)).

[matt71]

@NoCodeDataArtisan et al. I have a syntax question for the group. Specifically, using the JSONata Expression field to select a subset of data.

I have this working to select a single element in the broader JSON array: [$[_Slug = ‘someSlug’]]. However, what would the expression be for multiple values of Slug? i.e., select items where Slug equals A or B or C? Specifically, a list of Texts that I have elsewhere in my app?

[NoCodeDataArtisan]

Hello @matt71,

I hope you’re doing well.

For this expression, you can use two methods: one is using the in operation, and the other is the or operation.

For example, we have this JSON:

[
  {
    "Product Name": "Bowler Hat",
    "ProductID": 858383,
    "SKU": "0406654608",
    "Description": {
      "Colour": "Purple",
      "Width": 300,
      "Height": 200,
      "Depth": 210,
      "Weight": 0.75
    },
    "Price": 34.45,
    "Quantity": 2
  },
  {
    "Product Name": "Trilby hat",
    "ProductID": 858236,
    "SKU": "0406634348",
    "Description": {
      "Colour": "Orange",
      "Width": 300,
      "Height": 200,
      "Depth": 210,
      "Weight": 0.6
    },
    "Price": 21.67,
    "Quantity": 1
  },
  {
    "Product Name": "Fedora",
    "ProductID": 858563,
    "SKU": "0406781234",
    "Description": {
      "Colour": "Black",
      "Width": 320,
      "Height": 220,
      "Depth": 230,
      "Weight": 0.9
    },
    "Price": 45.99,
    "Quantity": 3
  },
  {
    "Product Name": "Top Hat",
    "ProductID": 858764,
    "SKU": "0406795432",
    "Description": {
      "Colour": "Gray",
      "Width": 340,
      "Height": 240,
      "Depth": 250,
      "Weight": 1.1
    },
    "Price": 56.00,
    "Quantity": 4
  }
]

Method 1: Using the in operation

If you want to filter the products by names, like “Bowler Hat” or “Fedora”, you can use the in operator like this:

$[`Product Name` in ["Bowler Hat", "Fedora"]]

Method 2: Using the or operation

Alternatively, you can use the or operator to achieve the same result:

$[(`Product Name` = "Bowler Hat") or (`Product Name` = "Fedora")]

Both methods will filter out the desired products.

Let me know if you need further assistance!

[matt71]

Thanks @NoCodeDataArtisan , super helpful!

[matt71]

@NoCodeDataArtisan: 1 update, 1 observation, and 1 question:

The Update - thanks to JSON Assistant, I’ve been able to decrease my initial page load WU consumption by ~90%! I’m super excited about this result, especially as I (try and) scale my user base.

The Observation - While the app is generally very snappy (!), I’ve noticed that Android is slightly more performant than iPhone when it comes to interacting with JSON-to-Bubble data types. Specifically, tapping and loading one JSON-to-Bubble item from a list of N items. (Maybe because Chrome has a reputation for a more efficient JavaScript rendering engine?)

The Question - Any general tips for how to maximize responsiveness of JSONata elements and data? Here’s my setup right now:

• 1 Data type/text field in Bubble DB that holds JSON for my entire product catalog
• 1 Group element that loads the JSON data from the DB using Do A Search for…
• 1 JSONata major and 2 JSONata Minor elements, all of which reference the Group data
• This way I still get real-time DB updates, with just one Do a Search for… call << 1 WU

I could daisy chain the JSON data from the JSONata major element to minor elements vs. each one referencing the Group data. But the current approach seems the snappiest so far.

I’d also welcome your thoughts on the most efficient way to select and display 1 from N JSON-to-Bubble items. e.g., you could have a JSONata minor element that you scope to whatever’s selected via Expression. You could create a custom state that holds whatever the current JSON to Bubble item is, etc. Any and all pro tips welcome, and thanks again for building a great plugin!

p.s. Fwiw, if you’re trying to build a search-as-you-type experience on top of JSON Assistant, I found that the Quick Find plugin was the clear winner. I was previously using Search & Autocorrect, and tried options like Fuzzy Search and Fuse, but they didn’t handle JSON to Bubble items very well (–> very high latency when typing).

[NoCodeDataArtisan]

@matt71

The Update - thanks to JSON Assistant, I’ve been able to decrease my initial page load WU consumption by ~90%! I’m super excited about this result, especially as I (try and) scale my user base

That’s awesome man

@matt71

Maybe because Chrome has a reputation for a more efficient JavaScript rendering engine?

In the debate between Android and iPhone, have you tried using the Chrome browser on your iPhone?

---

A quick tip regarding the use of JSONata Minor: as you may have noticed, JSONata Minor shares the same features as JSONata Major. Therefore, you only need one instance of JSONata Major on the page, and you can utilize JSONata Minor for all subsequent use cases.

---

@matt71

Any general tips for how to maximize responsiveness of JSONata elements and data?

It appears you’ve done quite well, mate. I’m just unsure about one aspect: you use JSONata elements to convert to a data type, correct? The elements simply convert the result of the expression into a data type, so when you filter N items down to just 1, only that single item is converted to the bubble data type, thus there should be no performance issues.

---

@matt71

p.s. Fwiw, if you’re trying to build a search-as-you-type experience on top of JSON Assistant, I found that the Quick Find plugin was the clear winner. I was previously using Search & Autocorrect, and tried options like Fuzzy Search and Fuse, but they didn’t handle JSON to Bubble items very well (–> very high latency when typing).

Thank you for sharing your insights on this use case; I believe it’s a very helpful tip for our users.

[randomanon]

Does this plugin still only allow the specification of 10 keys?

[NoCodeDataArtisan]

Hello @randomanon,

I hope you’re doing well.

We’ve added a new element to the plugin called JSONata. It’s incredibly powerful and allows you to perform various operations on JSON data. You can then convert the output to a bubble data type, eliminating any limitations on the number of keys.

The second feature works well for the JSON Extractor element, but we highly recommend using JSONata as it’s a game-changer.

Please don’t hesitate to reach out if you have any questions.

[randomanon]

@NoCodeDataArtisan

We’ve added a new element to the plugin called JSONata. It’s incredibly powerful and allows you to perform various operations on JSON data. You can then convert the output to a bubble data type, eliminating any limitations on the number of keys.

So basically you’re creating pseudo data types that can be arbitrarily nested to any degree by just converting to JSON? Sounds interesting but would likely overcomplicate things for my use case and would be more difficult to manage privacy rules for.

My main goal is just to be able to parse JSON in a straightforward manner with up to 20 or more keys with one layer of nesting max. Maybe this plugin isn’t the best use case for this? Could you recommend another one? Thanks for clarifying!

[NoCodeDataArtisan]

The conversion process is handled on plugin side, so there is no need to concerned about privacy or other related issues.

this tutorial, demonstrate how to convert JSON into a bubble data type:

JSON to Bubble Data Type Conversion with JSON Assistant

---

There is also another way, if you need to retrieve more than 10 keys, you can utilize multiple JSON Extractor elements to define the starting point for those keys.

We have an open-access application that includes all of our plugins, allowing you to add new pages and test your cases, and can assist you with the implementation:
Artisan-plugnplay | Bubble Editor

Please let know if you have any or need further assistance; we are always here to help.