Binding the results of a google geocode lookup to page

[pixlapps]

I am doing a reverse geocode lookup on with google and get a heck of a lot of info back. I only want to use formatted address on the page but just cannot get this right. Any help will be appreciated to know what to put in the little curly braces. Thanks

{
   "plus_code" : {
      "compound_code" : "5485+M3 Centurion, South Africa",
      "global_code" : "5G6C5485+M3"
   },
   "results" : [
      {
         "address_components" : [
            {
               "long_name" : "Centurion",
               "short_name" : "Centurion",
               "types" : [ "locality", "political" ]
            },
            {
               "long_name" : "Sunderland Ridge",
               "short_name" : "Sunderland Ridge",
               "types" : [ "political", "sublocality", "sublocality_level_1" ]
            },
            {
               "long_name" : "City of Tshwane Metropolitan Municipality",
               "short_name" : "City of Tshwane Metropolitan Municipality",
               "types" : [ "administrative_area_level_2", "political" ]
            },
            {
               "long_name" : "Gauteng",
               "short_name" : "GP",
               "types" : [ "administrative_area_level_1", "political" ]
            },
            {
               "long_name" : "South Africa",
               "short_name" : "ZA",
               "types" : [ "country", "political" ]
            },
            {
               "long_name" : "0157",
               "short_name" : "0157",
               "types" : [ "postal_code" ]
            }
         ],
         "formatted_address" : "147 Voortrekker Rd, Raslouw A H, Sunderland Ridge, Centurion, 0157, South Africa",
         "geometry" : {
            "location" : {
               "lat" : -25.8334325,
               "lng" : 28.1064319
            },
            "location_type" : "GEOMETRIC_CENTER",
            "viewport" : {
               "northeast" : {
                  "lat" : -25.83208351970849,
                  "lng" : 28.1077808802915
               },
               "southwest" : {
                  "lat" : -25.8347814802915,
                  "lng" : 28.1050829197085
               }
            }
         },
         "place_id" : "ChIJVVVVVbJklR4R258uPKGgpL8",
         "plus_code" : {
            "compound_code" : "5484+JH Centurion, South Africa",
            "global_code" : "5G6C5484+JH"
         },
         "types" : [ "establishment", "point_of_interest" ]
      },
      {
         "address_components" : [
            {
               "long_name" : "16",
               "short_name" : "16",
               "types" : [ "street_number" ]
            },
            {
               "long_name" : "Sesmylspruit Street",
               "short_name" : "Sesmylspruit St",
               "types" : [ "route" ]
            },
            {
               "long_name" : "Sunderland Ridge",
               "short_name" : "Sunderland Ridge",
               "types" : [ "political", "sublocality", "sublocality_level_1" ]
            },
            {
               "long_name" : "Centurion",
               "short_name" : "Centurion",
               "types" : [ "locality", "political" ]
            },
            {
               "long_name" : "City of Tshwane Metropolitan Municipality",
               "short_name" : "City of Tshwane Metropolitan Municipality",
               "types" : [ "administrative_area_level_2", "political" ]
            },
            {
               "long_name" : "Gauteng",
               "short_name" : "GP",
               "types" : [ "administrative_area_level_1", "political" ]
            },
            {
               "long_name" : "South Africa",
               "short_name" : "ZA",
               "types" : [ "country", "political" ]
            },
            {
               "long_name" : "0157",
               "short_name" : "0157",
               "types" : [ "postal_code" ]
            }
         ],
         "formatted_address" : "16 Sesmylspruit St, Sunderland Ridge, Centurion, 0157, South Africa",
         "geometry" : {
            "location" : {
               "lat" : -25.834191,
               "lng" : 28.106687
            },
            "location_type" : "ROOFTOP",
            "viewport" : {
               "northeast" : {
                  "lat" : -25.8328420197085,
                  "lng" : 28.1080359802915
               },
               "southwest" : {
                  "lat" : -25.8355399802915,
                  "lng" : 28.1053380197085
               }
            }
         },
         "place_id" : "ChIJexfe46t8lR4R1Z2sWmQLrEY",
         "plus_code" : {
            "compound_code" : "5484+8M Centurion, South Africa",
            "global_code" : "5G6C5484+8M"
         },
         "types" : [ "street_address" ]
      },
      {
         "address_components" : [
            {
               "long_name" : "13",
               "short_name" : "13",
               "types" : [ "street_number" ]
            },
            {
               "long_name" : "Sesmylspruit Street",
               "short_name" : "Sesmylspruit St",
               "types" : [ "route" ]
            },
            {
               "long_name" : "Sunderland Ridge",
               "short_name" : "Sunderland Ridge",
               "types" : [ "political", "sublocality", "sublocality_level_1" ]
            },
            {
               "long_name" : "Centurion",
               "short_name" : "Centurion",
               "types" : [ "locality", "political" ]
            },
            {
               "long_name" : "City of Tshwane Metropolitan Municipality",
               "short_name" : "City of Tshwane Metropolitan Municipality",
               "types" : [ "administrative_area_level_2", "political" ]
            },
            {
               "long_name" : "Gauteng",
               "short_name" : "GP",
               "types" : [ "administrative_area_level_1", "political" ]
            },
            {
               "long_name" : "South Africa",
               "short_name" : "ZA",
               "types" : [ "country", "political" ]
            },
            {
               "long_name" : "0157",
               "short_name" : "0157",
               "types" : [ "postal_code" ]
            }
         ],
         "formatted_address" : "13 Sesmylspruit St, Sunderland Ridge, Centurion, 0157, South Africa",
         "geometry" : {
            "location" : {
               "lat" : -25.8341675,
               "lng" : 28.1061974
            },
            "location_type" : "RANGE_INTERPOLATED",
            "viewport" : {
               "northeast" : {
                  "lat" : -25.8328185197085,
                  "lng" : 28.1075463802915
               },
               "southwest" : {
                  "lat" : -25.8355164802915,
                  "lng" : 28.1048484197085
               }
            }
         },
         "place_id" : "EkMxMyBTZXNteWxzcHJ1aXQgU3QsIFN1bmRlcmxhbmQgUmlkZ2UsIENlbnR1cmlvbiwgMDE1NywgU291dGggQWZyaWNhIhoSGAoUChIJr8GuZql8lR4RnFvld2ha0l4QDQ",
         "types" : [ "street_address" ]
      },
      {
         "address_components" : [
            {
               "long_name" : "7-13",
               "short_name" : "7-13",
               "types" : [ "street_number" ]
            },
            {
               "long_name" : "Sesmylspruit Street",
               "short_name" : "Sesmylspruit St",
               "types" : [ "route" ]
            },
            {
               "long_name" : "Sunderland Ridge",
               "short_name" : "Sunderland Ridge",
               "types" : [ "political", "sublocality", "sublocality_level_1" ]
            },
            {
               "long_name" : "Centurion",
               "short_name" : "Centurion",
               "types" : [ "locality", "political" ]
            },
            {
               "long_name" : "City of Tshwane Metropolitan Municipality",
               "short_name" : "City of Tshwane Metropolitan Municipality",
               "types" : [ "administrative_area_level_2", "political" ]
            },
            {
               "long_name" : "Gauteng",
               "short_name" : "GP",
               "types" : [ "administrative_area_level_1", "political" ]
            },
            {
               "long_name" : "South Africa",
               "short_name" : "ZA",
               "types" : [ "country", "political" ]
            },
            {
               "long_name" : "0157",
               "short_name" : "0157",
               "types" : [ "postal_code" ]
            }
         ],
         "formatted_address" : "7-13 Sesmylspruit St, Sunderland Ridge, Centurion, 0157, South Africa",
         "geometry" : {
            "bounds" : {
               "northeast" : {
                  "lat" : -25.8340829,
                  "lng" : 28.106837
               },
               "southwest" : {
                  "lat" : -25.8360509,
                  "lng" : 28.1060829
               }
            },
            "location" : {
               "lat" : -25.8350449,
               "lng" : 28.1067242
            },
            "location_type" : "GEOMETRIC_CENTER",
            "viewport" : {
               "northeast" : {
                  "lat" : -25.8337179197085,
                  "lng" : 28.1078089302915
               },
               "southwest" : {
                  "lat" : -25.8364158802915,
                  "lng" : 28.1051109697085
               }
            }
         },
         "place_id" : "ChIJr8GuZql8lR4RnFvld2ha0l4",
         "types" : [ "route" ]
      },
      {
         "address_components" : [
            {
               "long_name" : "Zwartkop 356-Jr",
               "short_name" : "Zwartkop 356-Jr",
               "types" : [ "political", "sublocality", "sublocality_level_1" ]
            },
            {
               "long_name" : "Centurion",
               "short_name" : "Centurion",
               "types" : [ "locality", "political" ]
            },
            {
               "long_name" : "City of Tshwane Metropolitan Municipality",
               "short_name" : "City of Tshwane Metropolitan Municipality",
               "types" : [ "administrative_area_level_2", "political" ]
            },
            {
               "long_name" : "Gauteng",
               "short_name" : "GP",
               "types" : [ "administrative_area_level_1", "political" ]
            },
            {
               "long_name" : "South Africa",
               "short_name" : "ZA",
               "types" : [ "country", "political" ]
            },
            {
               "long_name" : "0137",
               "short_name" : "0137",
               "types" : [ "postal_code" ]
            }
         ],
         "formatted_address" : "Zwartkop 356-Jr, Centurion, 0137, South Africa",
         "geometry" : {
            "bounds" : {
               "northeast" : {
                  "lat" : -25.7948098,
                  "lng" : 28.1982289
               },
               "southwest" : {
                  "lat" : -25.848677,
                  "lng" : 28.0953579
               }
            },
            "location" : {
               "lat" : -25.8175031,
               "lng" : 28.1298234
            },
            "location_type" : "APPROXIMATE",
            "viewport" : {
               "northeast" : {
                  "lat" : -25.7948098,
                  "lng" : 28.1982289
               },
               "southwest" : {
                  "lat" : -25.848677,
                  "lng" : 28.0953579
               }
            }
         },
         "place_id" : "ChIJUyrS0GRjlR4RBw61h9PMjSM",
         "types" : [ "political", "sublocality", "sublocality_level_1" ]
      },
      {
         "address_components" : [
            {
               "long_name" : "0137",
               "short_name" : "0137",
               "types" : [ "postal_code" ]
            },
            {
               "long_name" : "Centurion",
               "short_name" : "Centurion",
               "types" : [ "locality", "political" ]
            },
            {
               "long_name" : "City of Tshwane Metropolitan Municipality",
               "short_name" : "City of Tshwane Metropolitan Municipality",
               "types" : [ "administrative_area_level_2", "political" ]
            },
            {
               "long_name" : "Gauteng",
               "short_name" : "GP",
               "types" : [ "administrative_area_level_1", "political" ]
            },
            {
               "long_name" : "South Africa",
               "short_name" : "ZA",
               "types" : [ "country", "political" ]
            }
         ],
         "formatted_address" : "Centurion, 0137, South Africa",
         "geometry" : {
            "bounds" : {
               "northeast" : {
                  "lat" : -25.79481,
                  "lng" : 28.1982291
               },
               "southwest" : {
                  "lat" : -25.848677,
                  "lng" : 28.0953579
               }
            },
            "location" : {
               "lat" : -25.8125956,
               "lng" : 28.153228
            },
            "location_type" : "APPROXIMATE",
            "viewport" : {
               "northeast" : {
                  "lat" : -25.79481,
                  "lng" : 28.1982291
               },
               "southwest" : {
                  "lat" : -25.848677,
                  "lng" : 28.0953579
               }
            }
         },
         "place_id" : "ChIJ0_zSKGVjlR4RCbDg415yFeY",
         "types" : [ "postal_code" ]
      },
      {
         "address_components" : [
            {
               "long_name" : "Centurion",
               "short_name" : "Centurion",
               "types" : [ "locality", "political" ]
            },
            {
               "long_name" : "City of Tshwane Metropolitan Municipality",
               "short_name" : "City of Tshwane Metropolitan Municipality",
               "types" : [ "administrative_area_level_2", "political" ]
            },
            {
               "long_name" : "Gauteng",
               "short_name" : "GP",
               "types" : [ "administrative_area_level_1", "political" ]
            },
            {
               "long_name" : "South Africa",
               "short_name" : "ZA",
               "types" : [ "country", "political" ]
            }
         ],
         "formatted_address" : "Centurion, South Africa",
         "geometry" : {
            "bounds" : {
               "northeast" : {
                  "lat" : -25.7752948,
                  "lng" : 28.26202
               },
               "southwest" : {
                  "lat" : -25.9449101,
                  "lng" : 27.8903501
               }
            },
            "location" : {
               "lat" : -25.864029,
               "lng" : 28.0888578
            },
            "location_type" : "APPROXIMATE",
            "viewport" : {
               "northeast" : {
                  "lat" : -25.7752948,
                  "lng" : 28.26202
               },
               "southwest" : {
                  "lat" : -25.9449101,
                  "lng" : 27.8903501
               }
            }
         },
         "place_id" : "ChIJJ0uV9Q17lR4RfyJicLptT0c",
         "types" : [ "locality", "political" ]
      },
      {
         "address_components" : [
            {
               "long_name" : "City of Tshwane Metropolitan Municipality",
               "short_name" : "City of Tshwane Metropolitan Municipality",
               "types" : [ "administrative_area_level_2", "political" ]
            },
            {
               "long_name" : "Gauteng",
               "short_name" : "GP",
               "types" : [ "administrative_area_level_1", "political" ]
            },
            {
               "long_name" : "South Africa",
               "short_name" : "ZA",
               "types" : [ "country", "political" ]
            }
         ],
         "formatted_address" : "City of Tshwane Metropolitan Municipality, South Africa",
         "geometry" : {
            "bounds" : {
               "northeast" : {
                  "lat" : -25.1096099,
                  "lng" : 29.09842
               },
               "southwest" : {
                  "lat" : -26.0780899,
                  "lng" : 27.8903501
               }
            },
            "location" : {
               "lat" : -25.6051205,
               "lng" : 28.3929417
            },
            "location_type" : "APPROXIMATE",
            "viewport" : {
               "northeast" : {
                  "lat" : -25.1096099,
                  "lng" : 29.09842
               },
               "southwest" : {
                  "lat" : -26.0780899,
                  "lng" : 27.8903501
               }
            }
         },
         "place_id" : "ChIJjVNCr-ravx4RPOYRWM0o7EU",
         "types" : [ "administrative_area_level_2", "political" ]
      },
      {
         "address_components" : [
            {
               "long_name" : "Gauteng",
               "short_name" : "GP",
               "types" : [ "administrative_area_level_1", "political" ]
            },
            {
               "long_name" : "South Africa",
               "short_name" : "ZA",
               "types" : [ "country", "political" ]
            }
         ],
         "formatted_address" : "Gauteng, South Africa",
         "geometry" : {
            "bounds" : {
               "northeast" : {
                  "lat" : -25.1096099,
                  "lng" : 29.0984187
               },
               "southwest" : {
                  "lat" : -26.92383,
                  "lng" : 27.1563401
               }
            },
            "location" : {
               "lat" : -26.2707593,
               "lng" : 28.1122679
            },
            "location_type" : "APPROXIMATE",
            "viewport" : {
               "northeast" : {
                  "lat" : -25.1096099,
                  "lng" : 29.0984187
               },
               "southwest" : {
                  "lat" : -26.92383,
                  "lng" : 27.1563401
               }
            }
         },
         "place_id" : "ChIJn3cRVJUSlR4R4jhUy8fnnm0",
         "types" : [ "administrative_area_level_1", "political" ]
      },
      {
         "address_components" : [
            {
               "long_name" : "South Africa",
               "short_name" : "ZA",
               "types" : [ "country", "political" ]
            }
         ],
         "formatted_address" : "South Africa",
         "geometry" : {
            "bounds" : {
               "northeast" : {
                  "lat" : -22.1254239,
                  "lng" : 38.2216904
               },
               "southwest" : {
                  "lat" : -47.1313489,
                  "lng" : 16.2816999
               }
            },
            "location" : {
               "lat" : -30.559482,
               "lng" : 22.937506
            },
            "location_type" : "APPROXIMATE",
            "viewport" : {
               "northeast" : {
                  "lat" : -22.1254239,
                  "lng" : 38.2216904
               },
               "southwest" : {
                  "lat" : -47.1313489,
                  "lng" : 16.2816999
               }
            }
         },
         "place_id" : "ChIJURLu2YmmNBwRoOikHwxjXeg",
         "types" : [ "country", "political" ]
      }
   ],
   "status" : "OK"
}

[Teodor]

Hello Marcel,
Is this some API response? Where do you get this exactly?
What info would you like to use? How?

[pixlapps]

Yes, it is the API response. It shows as json in dev tools XHR. I would like to use the “formatted address” item.

[Teodor]

Ok, so what is unclear for you? Why not loop through the records and get it?

[pixlapps]

My API data source code:

<dmx-api-datasource id="api_googlereversegeocode" is="dmx-fetch" url="https://maps.googleapis.com/maps/api/geocode/json?key=key" noload="noload"
	dmx-param:latlng="register_location.cityLat.value + ',' + register_location.cityLng.value" dmx-on:success="register_location.location.setValue(???)"></dmx-api-datasource>

When I go into the data selector I only get the data binding option and nothing under it, despite going into define API schema and retreiving the schema:

As far as looping through the records, I am not sure what you mean or rather how to…

[Teodor]

Where do you get this data exactly? Isn’t it in server connect?

[pixlapps]

No, It is a app connect api data source.

[Teodor]

So do you filter this data somehow? Which of all records are you trying to access this value from?

[pixlapps]

O, I just realised google appends records to this data set when I drag the pin on the map and that is why there are multiple items in the set. If user does not drag the pin, it would just return 1 item based on the lat and lng I send to API. So I would want to retrieve the “formatted_address” in the last item in the set. Hope that makes sense.

[Teodor]

Well Marcel, then you pretty much answered your own question
We have a really useful component in Wappler called App Connect Data Formatter. If you need to get the last record from the collection, then use the “Last” formatter to get it then get the formatted_address property value.

In your case it looks like:

dmx-on:success="register_location.location.setValue(api_googlereversegeocode.data.results.last(1)[0].formatted_address))"

[pixlapps]

Thank you so so much!

[Hyperbytes]

I think what you need is discussed in this tutorial

Mass geocoding using API

Introduction At last the long promised method of mass geocoding the wappler way no scripts involved. As this is basically a reply to a post from @mimuk i will base this tutorial around his data table structures. Sorry about general quality, having to do this on laptop as main machine dead so few rough edges due to lack of software and using a singe screen! Hope i have not missed any stages We will be using the google API but the principal will be the same should you wish to use another suc…

[pixlapps]

Thank @Hyperbytes. It got it working with my use case.

[psweb]

Just another thing to look at if you have this issue again, https://www.geoplugin.com/

I have used it, and have chatted with the developer of it who has even extended its usage for my use case. @geoplugin is also a member of this community.

[pixlapps]

Thanks @psweb. I have followed his posts since he joined. Have played around with the geoplugin api. Happy with my solution currently incorporating google maps javascript api, google geocode api and what3words api.