Need help to get data from an external API

Need help APIs
1

I’m trying to create a form where users can input their postal code and country. When they submit the form, I want it to display location data like state or city. To achieve this, I’m connecting to an API called “zip code base” using the API Connector.
I’ve successfully made a call to the API, but when I try to display the data on the page, it only give me option to shows the input data from the form fields, the data from postal code I used when initializing the call, and one called ‘raw body text’.
I’m new to Bubble, and I’m not sure if the issue is with the API call or how I’m displaying the data. Please help :confused:
This is the api connection and api call:

Captura de pantalla 2024-07-02 171848
Captura de pantalla 2024-07-02 171848882×491 28 KB

This is how i tried to get and display the data:

image
image1431×583 44.3 KB

And the workflows are very simple, i try replacing initial data with the form data:

image
image1152×384 37.8 KB

2

You cannot use this kind of API directly with API connector (or not with data parsed by Bubble API connector).

The reason is that the API return a dictionnaries of data so each payload will have a different key for zip code details

{
   "query":{
      "codes":[
         "10005",
         "51503"
      ],
      "country":null
   },
   "results":{
      "10005":[
         {
            "postal_code":"10005",
            "country_code":"DZ",
            "latitude":"36.26960000",
            "longitude":"3.66360000",
            "city":"Ouled Zidane",
            "state":"Bouira",
            "state_code":"10",
            "province":null,
            "province_code":null
         },
         {
            "postal_code":"10005",
            "country_code":"DZ",
            "latitude":"36.29330000",
            "longitude":"3.67320000",
            "city":"Ain Bessem",
            "state":"Bouira",
            "state_code":"10",
            "province":null,
            "province_code":null
         },
         {
            "postal_code":"10005",
            "country_code":"DZ",
            "latitude":"36.28150000",
            "longitude":"3.66840000",
            "city":"Khebatna",
            "state":"Bouira",
            "state_code":"10",
            "province":null,
            "province_code":null
         },
         {
            "postal_code":"10005",
            "country_code":"DZ",
            "latitude":"36.28150000",
            "longitude":"3.66840000",
            "city":"Ain Chellala",
            "state":"Bouira",
            "state_code":"10",
            "province":null,
            "province_code":null
         },
         {
            "postal_code":"10005",
            "country_code":"DZ",
            "latitude":"36.28150000",
            "longitude":"3.66840000",
            "city":"Mtenane",
            "state":"Bouira",
            "state_code":"10",
            "province":null,
            "province_code":null
         },
         {
            "postal_code":"10005",
            "country_code":"DZ",
            "latitude":"36.28150000",
            "longitude":"3.66840000",
            "city":"Terrarfa",
            "state":"Bouira",
            "state_code":"10",
            "province":null,
            "province_code":null
         },
         {
            "postal_code":"10005",
            "country_code":"DZ",
            "latitude":"36.28150000",
            "longitude":"3.66840000",
            "city":"Souflate",
            "state":"Bouira",
            "state_code":"10",
            "province":null,
            "province_code":null
         },
         {
            "postal_code":"10005",
            "country_code":"DZ",
            "latitude":"36.28150000",
            "longitude":"3.66840000",
            "city":"Sahania",
            "state":"Bouira",
            "state_code":"10",
            "province":null,
            "province_code":null
         },
         {
            "postal_code":"10005",
            "country_code":"DZ",
            "latitude":"36.28150000",
            "longitude":"3.66840000",
            "city":"Bir Saradj",
            "state":"Bouira",
            "state_code":"10",
            "province":null,
            "province_code":null
         },
         {
            "postal_code":"10005",
            "country_code":"DZ",
            "latitude":"36.28150000",
            "longitude":"3.66840000",
            "city":"Houachria",
            "state":"Bouira",
            "state_code":"10",
            "province":null,
            "province_code":null
         },
         {
            "postal_code":"10005",
            "country_code":"ES",
            "latitude":"39.47650000",
            "longitude":"-6.37220000",
            "city":"Caceres",
            "state":"Extremadura",
            "state_code":"EX",
            "province":"Cáceres",
            "province_code":"CC"
         },
         {
            "postal_code":"10005",
            "country_code":"GT",
            "latitude":"14.45000000",
            "longitude":"-91.41670000",
            "city":"SAN JOSE EL IDOLO",
            "state":"DEPTO DE SUCHITEPEQUEZ",
            "state_code":"20",
            "province":null,
            "province_code":null
         },
         {
            "postal_code":"10005",
            "country_code":"KR",
            "latitude":"37.74930000",
            "longitude":"126.63100000",
            "city":"하성면",
            "state":"경기도",
            "state_code":"13",
            "province":"김포시",
            "province_code":"31230"
         },
         {
            "postal_code":"10005",
            "country_code":"UA",
            "latitude":"50.26490000",
            "longitude":"28.67670000",
            "city":"Житомир",
            "state":"Zhytomyrska",
            "state_code":"27",
            "province":"Zhytomyrska",
            "province_code":null
         },
         {
            "postal_code":"10005",
            "country_code":"US",
            "latitude":"40.70560000",
            "longitude":"-74.00830000",
            "city":"New York",
            "state":"New York",
            "state_code":"NY",
            "province":"New York",
            "province_code":"061"
         }
      ],
      "51503":[
         {
            "postal_code":"51503",
            "country_code":"DE",
            "latitude":"50.89560000",
            "longitude":"7.18180000",
            "city":"Rösrath",
            "state":"Nordrhein-Westfalen",
            "state_code":"NW",
            "province":"Regierungsbezirk Köln",
            "province_code":"053"
         },
         {
            "postal_code":"51503",
            "country_code":"KR",
            "latitude":"35.21950000",
            "longitude":"128.68160000",
            "city":"창원시 성산구",
            "state":"경상남도",
            "state_code":"20",
            "province":"창원시 성산구",
            "province_code":null
         },
         {
            "postal_code":"51503",
            "country_code":"UA",
            "latitude":"48.52250000",
            "longitude":"36.08260000",
            "city":"Зелена Долина (Тернівська міська рада)",
            "state":"Dnipropetrovska",
            "state_code":"04",
            "province":"Ternivka",
            "province_code":null
         },
         {
            "postal_code":"51503",
            "country_code":"US",
            "latitude":"41.26160000",
            "longitude":"-95.82510000",
            "city":"Council Bluffs",
            "state":"Iowa",
            "state_code":"IA",
            "province":"Pottawattamie",
            "province_code":"155"
         }
      ]
   }
}

the issue is the “1005” key in the results

Actually, you have some options to work with that using API connector
A) Detect data as text instead of JSON. After, use a JSON plugin to read the payload. Or use a plugin to convert the dictionnaries to something Bubble can parse correctly (JSON Dictionaries Conversion Tool Plugin | Bubble)
B) Detect data and use regex to get the info you need

Finally, you could always create your own plugin or use a third party provider like make

1 Like