Displaying Lots of API Data in Table on Page Load?

[nate8]

I’m curious if anyone has ideas that I haven’t thought of for how to display the following API data in a table format. Ideally each colorName would only display once, and the corresponding sizeName and qty would be organized in a table (example below):

[
    {
        "skuID_Master": 1665950,
        "styleName": "3600",
        "colorName": "Antique Gold",
        "colorSwatchImage": "Images/ColorSwatch/16682_fm.jpg",
        "colorFrontImage": "Images/Color/72026_f_fm.jpg",
        "sizeName": "XS",
        "mapPrice": 4.05,
        "caseWeight": 0,
        "caseWidth": 0,
        "caseLength": 0,
        "caseHeight": 0,
        "qty": 167,
        "countryOfOrigin": "HN, NI, MX, KH",
        "warehouses": [
            {
                "qty": 167,
                "fullCaseOnly": false,
                "returnable": true,
                "expectedInventory": "EnRoute:None|OnOrder:TBD-72"
            }
        ]
    },
    {
        "skuID_Master": 1665957,
        "styleName": "3600",
        "colorName": "Antique Gold",
        "colorSwatchImage": "Images/ColorSwatch/16682_fm.jpg",
        "colorFrontImage": "Images/Color/72026_f_fm.jpg",
        "sizeName": "S",
        "mapPrice": 4.05,
        "caseWeight": 0,
        "caseWidth": 0,
        "caseLength": 0,
        "caseHeight": 0,
        "qty": 426,
        "countryOfOrigin": "HN, NI, MX, KH",
        "warehouses": [
            {
                "qty": 426,
                "fullCaseOnly": false,
                "returnable": true,
                "expectedInventory": "EnRoute:None|OnOrder:TBD-1000+"
            }
        ]
    },
    {
        "skuID_Master": 1665964,
        "styleName": "3600",
        "colorName": "Antique Gold",
        "colorSwatchImage": "Images/ColorSwatch/16682_fm.jpg",
        "colorFrontImage": "Images/Color/72026_f_fm.jpg",
        "sizeName": "M",
        "mapPrice": 4.05,
        "caseWeight": 0,
        "caseWidth": 0,
        "caseLength": 0,
        "caseHeight": 0,
        "qty": 500,
        "countryOfOrigin": "HN, NI, MX, KH",
        "warehouses": [
            {
                "qty": 500,
                "fullCaseOnly": false,
                "returnable": true,
                "expectedInventory": "EnRoute:None|OnOrder:TBD-1000+"
            }
        ]
    },
    {
        "skuID_Master": 1665971,
        "styleName": "3600",
        "colorName": "Antique Gold",
        "colorSwatchImage": "Images/ColorSwatch/16682_fm.jpg",
        "colorFrontImage": "Images/Color/72026_f_fm.jpg",
        "sizeName": "L",
        "mapPrice": 4.05,
        "caseWeight": 0,
        "caseWidth": 0,
        "caseLength": 0,
        "caseHeight": 0,
        "qty": 500,
        "countryOfOrigin": "HN, NI, MX, KH",
        "warehouses": [
            {
                "qty": 500,
                "fullCaseOnly": false,
                "returnable": true,
                "expectedInventory": "EnRoute:None|OnOrder:TBD-1000+"
            }
        ]
    },
    {
        "skuID_Master": 1665978,
        "styleName": "3600",
        "colorName": "Antique Gold",
        "colorSwatchImage": "Images/ColorSwatch/16682_fm.jpg",
        "colorFrontImage": "Images/Color/72026_f_fm.jpg",
        "sizeName": "XL",
        "mapPrice": 4.05,
        "caseWeight": 0,
        "caseWidth": 0,
        "caseLength": 0,
        "caseHeight": 0,
        "qty": 500,
        "countryOfOrigin": "HN, NI, MX, KH",
        "warehouses": [
            {
                "qty": 500,
                "fullCaseOnly": false,
                "returnable": true,
                "expectedInventory": "EnRoute:None|OnOrder:TBD-1000+"
            }
        ]
    },
    {
        "skuID_Master": 1665985,
        "styleName": "3600",
        "colorName": "Antique Gold",
        "colorSwatchImage": "Images/ColorSwatch/16682_fm.jpg",
        "colorFrontImage": "Images/Color/72026_f_fm.jpg",
        "sizeName": "2XL",
        "mapPrice": 5.32,
        "caseWeight": 0,
        "caseWidth": 0,
        "caseLength": 0,
        "caseHeight": 0,
        "qty": 500,
        "countryOfOrigin": "HN, NI, MX, KH",
        "warehouses": [
            {
                "qty": 500,
                "fullCaseOnly": false,
                "returnable": true,
                "expectedInventory": "EnRoute:None|OnOrder:TBD-1000+"
            }
        ]
    },
    {
        "skuID_Master": 1665992,
        "styleName": "3600",
        "colorName": "Antique Gold",
        "colorSwatchImage": "Images/ColorSwatch/16682_fm.jpg",
        "colorFrontImage": "Images/Color/72026_f_fm.jpg",
        "sizeName": "3XL",
        "mapPrice": 6.57,
        "caseWeight": 0,
        "caseWidth": 0,
        "caseLength": 0,
        "caseHeight": 0,
        "qty": 56,
        "countryOfOrigin": "HN, NI, MX, KH",
        "warehouses": [
            {
                "qty": 56,
                "fullCaseOnly": false,
                "returnable": true,
                "expectedInventory": "EnRoute:None|OnOrder:TBD-540"
            }
        ]
    },
    {
        "skuID_Master": 194046,
        "styleName": "3600",
        "colorName": "Banana Cream",
        "colorSwatchImage": "Images/ColorSwatch/12116_fm.jpg",
        "colorFrontImage": "Images/Color/40990_f_fm.jpg",
        "sizeName": "XS",
        "mapPrice": 4.05,
        "caseWeight": 0,
        "caseWidth": 0,
        "caseLength": 0,
        "caseHeight": 0,
        "qty": 181,
        "countryOfOrigin": "HN, NI, MX, KH",
        "warehouses": [
            {
                "qty": 181,
                "fullCaseOnly": false,
                "returnable": true,
                "expectedInventory": "EnRoute:None|OnOrder:None"
            }
        ]
    },
    {
        "skuID_Master": 194067,
        "styleName": "3600",
        "colorName": "Banana Cream",
        "colorSwatchImage": "Images/ColorSwatch/12116_fm.jpg",
        "colorFrontImage": "Images/Color/40990_f_fm.jpg",
        "sizeName": "S",
        "mapPrice": 4.05,
        "caseWeight": 0,
        "caseWidth": 0,
        "caseLength": 0,
        "caseHeight": 0,
        "qty": 500,
        "countryOfOrigin": "HN, NI, MX, KH",
        "warehouses": [
            {
                "qty": 500,
                "fullCaseOnly": false,
                "returnable": true,
                "expectedInventory": "EnRoute:None|OnOrder:TBD-1000+"
            }
        ]
    },
    {
        "skuID_Master": 194088,
        "styleName": "3600",
        "colorName": "Banana Cream",
        "colorSwatchImage": "Images/ColorSwatch/12116_fm.jpg",
        "colorFrontImage": "Images/Color/40990_f_fm.jpg",
        "sizeName": "M",
        "mapPrice": 4.05,
        "caseWeight": 0,
        "caseWidth": 0,
        "caseLength": 0,
        "caseHeight": 0,
        "qty": 500,
        "countryOfOrigin": "HN, NI, MX, KH",
        "warehouses": [
            {
                "qty": 500,
                "fullCaseOnly": false,
                "returnable": true,
                "expectedInventory": "EnRoute:None|OnOrder:TBD-1000+"
            }
        ]
    },
    {
        "skuID_Master": 194109,
        "styleName": "3600",
        "colorName": "Banana Cream",
        "colorSwatchImage": "Images/ColorSwatch/12116_fm.jpg",
        "colorFrontImage": "Images/Color/40990_f_fm.jpg",
        "sizeName": "L",
        "mapPrice": 4.05,
        "caseWeight": 0,
        "caseWidth": 0,
        "caseLength": 0,
        "caseHeight": 0,
        "qty": 500,
        "countryOfOrigin": "HN, NI, MX, KH",
        "warehouses": [
            {
                "qty": 500,
                "fullCaseOnly": false,
                "returnable": true,
                "expectedInventory": "EnRoute:None|OnOrder:TBD-1000+"
            }
        ]
    },
    {
        "skuID_Master": 194130,
        "styleName": "3600",
        "colorName": "Banana Cream",
        "colorSwatchImage": "Images/ColorSwatch/12116_fm.jpg",
        "colorFrontImage": "Images/Color/40990_f_fm.jpg",
        "sizeName": "XL",
        "mapPrice": 4.05,
        "caseWeight": 0,
        "caseWidth": 0,
        "caseLength": 0,
        "caseHeight": 0,
        "qty": 500,
        "countryOfOrigin": "HN, NI, MX, KH",
        "warehouses": [
            {
                "qty": 500,
                "fullCaseOnly": false,
                "returnable": true,
                "expectedInventory": "EnRoute:None|OnOrder:TBD-1000+"
            }
        ]
    },
    {
        "skuID_Master": 194151,
        "styleName": "3600",
        "colorName": "Banana Cream",
        "colorSwatchImage": "Images/ColorSwatch/12116_fm.jpg",
        "colorFrontImage": "Images/Color/40990_f_fm.jpg",
        "sizeName": "2XL",
        "mapPrice": 5.32,
        "caseWeight": 0,
        "caseWidth": 0,
        "caseLength": 0,
        "caseHeight": 0,
        "qty": 397,
        "countryOfOrigin": "HN, NI, MX, KH",
        "warehouses": [
            {
                "qty": 397,
                "fullCaseOnly": false,
                "returnable": true,
                "expectedInventory": "EnRoute:None|OnOrder:TBD-1000+"
            }
        ]
    },
    {
        "skuID_Master": 199066,
        "styleName": "3600",
        "colorName": "Banana Cream",
        "colorSwatchImage": "Images/ColorSwatch/12116_fm.jpg",
        "colorFrontImage": "Images/Color/40990_f_fm.jpg",
        "sizeName": "3XL",
        "mapPrice": 6.57,
        "caseWeight": 0,
        "caseWidth": 0,
        "caseLength": 0,
        "caseHeight": 0,
        "qty": 131,
        "countryOfOrigin": "HN, NI, MX, KH",
        "warehouses": [
            {
                "qty": 131,
                "fullCaseOnly": false,
                "returnable": true,
                "expectedInventory": "EnRoute:None|OnOrder:TBD-360"
            }
        ]

I’ll be utilizing 3rd party API’s for most of this so I don’t have access to how the database is formatted. Each product page will have unique colors, sizes, and quantities. My goal is to have live QTY show for colorName and each sizeName on page load. Sometimes there are 60+ colorName options each with sizeName ranging from XS-5XL, so there will be a lot of variables.

Ideally, this is how it should be displayed, with each colorName only showing once and the individual sizeName’s and corresponding qty displayed next to them:

I am able to pull in the information with the API, but I can’t figure out how to organize and display it in the proper format.

Does anyone have an idea of how to accomplish this? I’ve tried RG, but keep running into roadblocks. It seems like it should be simple but I’m just not wrapping my mind around it.

Thank you!

[williamtisdale]

Pass the data to a plugin as a text String and then organize it and pass it back to bubble as lists and you will be able to display the data in a repeating group

[nate8]

Good idea! Do you know of any bubble plugins to do that, or would I need to run it through another service? I know enough about coding to get by, but not enough to write a script to do something like that.

[williamtisdale]

JSON.parse Plugin for Bubble, by Will Tisdale

This is one I made recently for someone else on the forum but what you need seems a bit more extensive. If you visit the page above and click view plugin code you can pretty easily get the idea of how yours needs to be set up. Everything you will be looking for will be in the elements tab.

[williamtisdale]

You are essentially going to want to pass in your JSON data as a string. Then in the code you can access all the keys and values and assign them to what Bubble calls ‘exposed states’ that way you can access them. Honestly it’s pretty good thing to know if you are working with bubble but let me know if you need anything else. If I have time I will take a look in more detail and see if it is something I can throw together.

[nate8]

Wow. Thanks so much. I’ll take a look at it this evening when I have a chance to dig into some more. I really appreciate the help.

[exception-rambler]

Maybe I’ve missed something, but what was the issue with just setting your RG data type to the API data type that will have been created when you set up the 3rd party API? This should be extremely straightforward for you…

You can pull directly into a RG from an API request - though you’ll need to create elements to then show the data. Or you can save data from an API call into your DB (without turning it into text), though you won’t be able to edit it later.

[nate8]

You would think it would be that straightforward, but it’s not. What I’m trying to do is have all sizes and qty’s displayed in a row next to their corresponding color. The issue is that each size is in its own array and the only thing in common is the colorName. From what I understand you are not able to use a RG to display data from multiple arrays in one row, at least I couldn’t figure out how to do it.

I tried the database route, but the issue there is that the database would need to be populated in real time which would take a really long time with each page load.

Unfortunately, I didn’t create the API that I’m linking to, so I have no control over how it is organized. I think @williamtisdale’s solution might be the way to go.

[simon7]

I would probably fetch all the data outside the rg with listshifter. Then for the rg data source you use the data in listshifter but filter on color.

Each row in your rg will now represent 1 color.

Then in each row you can get the details you want from the data in listshifter and aggregate as needed for each size.

[exception-rambler]

If you set the RG to the parent array from the API call then you can access any keys (including objects, arrays or object arrays) from any element that you place within the RG.

See example - this is using part of the Google Sheets API. The return object is similar to the one you are using with some keys of the main array object containing further arrays.

The text box placed within the RG can access (via the cell’s item) any of the sub-arrays.

This is what I think you’re trying to do?

Edit sorry have just caught onto your issue… I had not spotted the duplicates @simon7 's solution will sort you out

[nate8]

Right! I tried your idea initially until I realized that I couldn’t combine the duplicates.

@simon7 I will definitely check this out when I have a chance. That sounds like a great option.

It’s amazing that, while bubble is extremely versatile, this seemingly simple problem requires multiple workarounds to get it to work.

[simon7]

Perfect, please let us know how it goes

I’m not sure I agree that its a workaround. If I were to implement a table in a regular website, and the data looked like your example, I would have to do the same. Agregate on one axis first to build the rows, then for each row combine the needed values. That would be the only way.

[nate8]

Gotcha, this is all new to me so I appreciate the info.

I am having a hard time understanding how to utilize list shifter for this purpose. Is there a specific feature I should be utilizing in order to “filter” the results of the list? I searched through each feature, and maybe I’m just too tired to understand it, but I’m not seeing a way to utilize a custom list in that manner. If there is some documentation that I’m not finding please let me know.

Thanks again for all your help on this. I really appreciate it.

[simon7]

Hi @nate8
So list shifters only purpose in this scenario, is to hold the complete list of watches outside the rg. That way you only fetch the data once.

The basic setup should be like this:

Listshifter gets the data from the api:

Then your repeating group uses this as its data source and groups by colorName (I mistakenly
wrote filter by, sorry about that).

The color is now in the current cells group:

But for each watcsize you need to fetch the original shifted list and filter by colorname/wathcsize. Then you get “a list of watches” as its output. The qty is now “a list of numbers” that we can use the :sum function on.

If the “sum” is zero, you should fetch the back in stock date.

I obviously don’t have access to the api, so this is only made with mockup-data, but should work

Hope it gets you in the right direction - and welcome to bubble

[nate8]

Simon, thank you so much. I completely forgot about the grouping option. You solved this for me and I really appreciate it. Worked like a charm!