Apex Code Development You need to sign in to do that
Don't have an account?
prati@salesforce Build a restaurant locator Lightning Component
Hi, I folllowed the trailhead (Build a restaurant locator Lightning Component ) Leveraging the Contact Record Data and it also marks as completed. but when i try to see the output, I get the following error,
Unfortunately, there was a problem. Please try again. If the problem continues, get in touch with your administrator with the error ID shown here and any other related details. Something has gone wrong. Error in $A.getCallback() [SyntaxError: Unexpected end of JSON input] Failing descriptor: {markup://c:InTheArea}. Please try again.
Can anyone help me to undersatnd why am I getting this error.
Thank you
Unfortunately, there was a problem. Please try again. If the problem continues, get in touch with your administrator with the error ID shown here and any other related details. Something has gone wrong. Error in $A.getCallback() [SyntaxError: Unexpected end of JSON input] Failing descriptor: {markup://c:InTheArea}. Please try again.
Can anyone help me to undersatnd why am I getting this error.
Thank you
you getting above error because of some syntax error
can you Please share you component and controller code Thanks :)
Below is my component:
<aura:component controller="InTheArea" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
<aura:attribute name="defaultSearch" type="String" default="Restaurants"/>
<aura:attribute name="location" type="Object" default='{"coords":{"latitude":37.7938462, "longitude":-122.3970253}}'/>
<aura:attribute name="restaurantList" type="Object"/>
<aura:attribute name="recordId" type="Id"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<div class="slds">
<div class="slds-box" aura:id="main">
<div aura:id="panelList">
<header>
<h2 class="slds-text-heading--small slds-m-bottom--small">In the Area</h2>
<div class="slds-form-element">
<label class="slds-form-element__label slds-assistive-text" for="searchBox">Search</label>
<div class="slds-form-element__control">
<ui:inputText aura:id="searchTerm" label="" class="field" placeholder="Search for..." change="{!c.updateSearch}" />
</div>
</div>
</header>
<div aura:id="scrollableArea">
<ul class="slds-list--vertical slds-has-dividers--top-space">
<aura:iteration items="{!v.restaurantList}" var="item" indexVar="i">
<li class="slds-list__item" onclick="{!c.showDetails}" data-record="{!i}">
<h3 class="slds-text-heading--small slds-m-bottom--x-small">{!item.name}</h3>
<img src="{!item.ratingImg}" alt="" class="ratingStars"/>
</li>
</aura:iteration>
</ul>
</div>
</div>
</div>
</div>
</aura:component>
My Controller****************************************
public class InTheArea {
@AuraEnabled
public static String getLocal(String searchTerm, Decimal lat, Decimal lon){
String url = 'https://th-yelp-locator.herokuapp.com/search?address='+lat+','+lon+
'&term='+EncodingUtil.urlEncode(searchTerm, 'UTF-8');
String resultList = getHttp(url);
return resultList;
}
private static String getHttp(String url){
HttpRequest req = new HttpRequest();
Http http = new Http();
req.setMethod('GET');
req.setEndpoint(url);
HTTPResponse res = new HTTPResponse();
return res.getBody();
}
@AuraEnabled
public static String getListByAddress(Id recordId, String searchQuery){
try{
String location = contactSelect(recordId);
String url = 'https://th-yelp-locator.herokuapp.com/search?address='+
EncodingUtil.urlEncode(location, 'UTF-8') +'&term='+EncodingUtil.urlEncode(searchQuery, 'UTF-8');
String resultList = getHttp(url);
return resultlist;
}catch(Exception ex){
return '{"error": "' + ex.getMessage() + '"}';
}
}
private static String contactSelect(Id recordId){
Contact contact = [SELECT MailingStreet, MailingCity, MailingState FROM Contact WHERE Id = :recordId];
String location = contact.MailingStreet + ','+contact.MailingCity+','+contact.MailingState;
return location;
}
}
HELPER***********************
({
getLocalList : function(component) {
//var searchTerm = component.get("v.defaultSearch");
var recId = component.get("v.recordId");
var location = component.get("v.location");
//var action = component.get("c.getLocal");
var searchTerm = component.find("searchTerm").get("v.value");
if(searchTerm == null){
searchTerm = component.get("v.defaultSearch");
}
location = JSON.parse(location);
var action = component.get("c.getListByAddress");
action.setParams({
"recordId" : recId,
"searchQuery" : searchTerm
});
action.setCallback(this, function(response){
this.doLayout(response, component);
});
$A.enqueueAction(action);
},
doLayout: function(response, component){
var data = JSON.parse(response.getReturnValue());
component.set("v.restaurantList", data.bizArray);
console.log("The data: ", data);
}
})
CONTROLLER(Client side)***********************************
({
doInit : function(component, event, helper) {
helper.getLocalList(component);
},
updateSearch : function(component, event, helper){
helper.getLocalList(component);
}
})
I'm having the same issue. I followed the turorial and the challenge passes, but my componenent is NOT doing what it's supposed to be doing. No restaurnat list, just a search box. It's very annoying.
private static String getHttp(String url){
HttpRequest req = new HttpRequest();
Http http = new Http();
req.setMethod('GET');
req.setEndpoint(url);
HTTPResponse res = http.send(req); // here you need to change
System.debug('resposne ' + res.getBody() + '/n'+ res.getStatus());
return res.getBody();
}