+ Start a Discussion
prati@salesforceprati@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
{!Piyush_soni__c}{!Piyush_soni__c}
hi prati@salesforce
you getting above error because of some syntax error
can you Please share you component and controller code Thanks :)
 
prati@salesforceprati@salesforce
Hi,
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;
    }

}
prati@salesforceprati@salesforce
Here are my client side controller and helper:
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);
    }
})

 
Arnold F BrownArnold F Brown
#trailheadsupport  @trailhead
 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. 
Vivek MakkarVivek Makkar
Your getHttp method is Incorrect. Please update it and send the request to get back the response.
    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();
    }
    
Vasav Chaturvedi 7Vasav Chaturvedi 7
Hi, please i need a help. I am building a project on restaurant locator lightening component from the trailhead. In the 2nd step fetch and retrieve data after i create the helper function and after saving it in my browser i opened  developer tools- console and then it is showing ' Failed to Load Resource'. Why this is happening? please reply urgently.