Multiple lists from API Data shown in repeating group

Hi, I’m trying to show a group of images that I get from my api. Challenge is number of lists that I’ll be getting from the API is dynamic. Sometimes I get 2 lists, other times it is 10.

I have managed to use API connector and get the data but I can’t change my repeating group’s data source to all of the lists. I can only select one of them. What I want to achieve is have an extending column for each new list. Some guidance will be helpful since I’m new to bubble and web development in general, cheers.

Hello,

If possible, can you share the api please?

Not possible to share the API but I can share an example response from it if that helps.

{
  "urls": {
"0": [
  "https://dummyurl.com/image1.png",
  "https://dummyurl.com/image2.png",
  "https://dummyurl.com/image3.png",
  "https://dummyurl.com/image4.png",
  "https://dummyurl.com/image5.png"
],
"1": [
  "https://dummyurl.com/image6.png",
  "https://dummyurl.com/image7.png",
  "https://dummyurl.com/image8.png",
  "https://dummyurl.com/image9.png",
  "https://dummyurl.com/image10.png"
]
  }
}

The problem is the structure of the response. You could use perfectly if you have a json like this

[
  {
    "id": 0,
    "images": [
      "https://dummyurl.com/image1.png",
      "https://dummyurl.com/image2.png",
      "https://dummyurl.com/image3.png",
      "https://dummyurl.com/image4.png",
      "https://dummyurl.com/image5.png"
    ]
  },
  {
    "id": 1,
    "images": [
      "https://dummyurl.com/image6.png",
      "https://dummyurl.com/image7.png",
      "https://dummyurl.com/image8.png",
      "https://dummyurl.com/image9.png",
      "https://dummyurl.com/image10.png"
    ]
  }
]

To solve this problem you can modify the response in the server if possible or you can write some js on the bubble side.

firstStructure is your structure that we need to modify

    for (const id in firstStructure.urls) {
      if (firstStructure.urls.hasOwnProperty(id)) {
        const obj = {
          "id": parseInt(id),
          "images": firstStructure.urls[id]
        };
        secondStructure.push(obj);
      }
    }

console.log(JSON.stringify(secondStructure, null, 2));

Hi @mert.atagul can you explain more about what you want to do with the data?

  • How many items in each list?
  • Are the separations into 0,1, etc. meaningful groupings?
  • If you want to save into Bubble’s database, what structure will you want?
  • Can you draw a diagram of the “extending column for each new list”?

Changed the API response to this and created a new data type with id and list of images. Now it works, thanks.

1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.