+ Start a Discussion
khushi S 2khushi S 2 

Split JSON values and display it in aura component

I am stuck here on how to get json string values into aura components. I am getting result as following
 {"results":[{"address_components":[{"long_name":"4700","short_name":"4700","types":["street_number"]},{"long_name":"Kingsway","short_name":"Kingsway","types":["route"]},{"long_name":"Metrotown","short_name":"Metrotown","types":["neighborhood","political"]},{"long_name":"Burnaby","short_name":"Burnaby","types":["locality","political"]},{"long_name":"Metro Vancouver","short_name":"Metro Vancouver","types":["administrative_area_level_2","political"]},{"long_name":"British Columbia","short_name":"BC","types":["administrative_area_level_1","political"]},{"long_name":"Canada","short_name":"CA","types":["country","political"]},{"long_name":"V5H 4M1","short_name":"V5H 4M1","types":["postal_code"]}],"formatted_address":"4700 Kingsway, Burnaby, BC V5H 4M1, Canada","geometry":{"location":{"lat":49.2274147,"lng":-122.9998869},"location_type":"ROOFTOP","viewport":{"northeast":{"lat":49.2287636802915,"lng":-122.9985379197085},"southwest":{"lat":49.2260657197085,"lng":-123.0012358802915}}},"place_id":"ChIJWWlMHFl2hlQR6j8qts-7x8c","plus_code":{"compound_code":"62G2+X2 Burnaby, BC, Canada","global_code":"84XV62G2+X2"},"types":["street_address"]}],"status":"OK"}
 I want to get values in separate fields street, city, postalcode, province and coutry OR just one field formatted_address in aura component.

So far I have this, in my controller


action.setCallback(this, function(response) {
                               var state = response.getState();
                               if (state === "SUCCESS") { 
                                   var res = response.getReturnValue();
                                   helper.hideSpinner(component, event, helper);
                                       
                                var frm = JSON.parse(res);
                                  var parsed = JSON.stringify(frm);
                                   console.log("PARSED: "+ parsed);
                                   component.set("v.returnAddress",parsed);}


My aura component-
<aura:iteration items="{!v.returnAddress}" var="retAdd" indexVar="index">
                                      <h2> {!retAdd}</h2>
                                     </aura:iteration>


Any help would be greatly appreciated
Best Answer chosen by khushi S 2
David Zhu 🔥David Zhu 🔥
You may need to do the followings:
1. create a Apex class to deserialize the Google API return. You can use the code below.
public class AddressClass {

	public class Address_components {
		public String long_name;
		public String short_name;
		public List<String> types;
	}

	public class Geometry {
		public Location location;
		public String location_type;
		public Viewport viewport;
	}

	public class Plus_code {
		public String compound_code;
		public String global_code;
	}

	public List<Results> results;
	public String status;

	public class Results {
		public List<Address_components> address_components;
		public String formatted_address;
		public Geometry geometry;
		public String place_id;
		public Plus_code plus_code;
		public List<String> types;
	}

	public class Viewport {
		public Location northeast;
		public Location southwest;
	}

	public class Location {
		public Double lat;
		public Double lng;
	}
}

2. Deserialize Google API return in Apex 
Same code is below. replace string S with actual return.
 
string s ='{"results":[{"address_components":[{"long_name":"4700","short_name":"4700","types":["street_number"]},{"long_name":"Kingsway","short_name":"Kingsway","types":["route"]},{"long_name":"Metrotown","short_name":"Metrotown","types":["neighborhood","political"]},{"long_name":"Burnaby","short_name":"Burnaby","types":["locality","political"]},{"long_name":"Metro Vancouver","short_name":"Metro Vancouver","types":["administrative_area_level_2","political"]},{"long_name":"British Columbia","short_name":"BC","types":["administrative_area_level_1","political"]},{"long_name":"Canada","short_name":"CA","types":["country","political"]},{"long_name":"V5H 4M1","short_name":"V5H 4M1","types":["postal_code"]}],"formatted_address":"4700 Kingsway, Burnaby, BC V5H 4M1, Canada","geometry":{"location":{"lat":49.2274147,"lng":-122.9998869},"location_type":"ROOFTOP","viewport":{"northeast":{"lat":49.2287636802915,"lng":-122.9985379197085},"southwest":{"lat":49.2260657197085,"lng":-123.0012358802915}}},"place_id":"ChIJWWlMHFl2hlQR6j8qts-7x8c","plus_code":{"compound_code":"62G2+X2 Burnaby, BC, Canada","global_code":"84XV62G2+X2"},"types":["street_address"]}],"status":"OK"}';

AddressClass address = (AddressClass)JSON.deserialize(s, AddressClass.class);

system.debug(address);

for (AddressClass.Results result : address.results)
{
    system.debug('result:' + result);
}

3. Manipulate the deserailized data to what you expect and return the value to Aura component helper method. (do not return the raw data to helper method)