function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
vijay sunilvijay sunil 

display get response data in vf page, json response please help

display get response data in vf page, json response please help 

VF page :
<apex:page controller="RESTAPIJSONResponseController">
    <apex:form >
        <apex:pageBlock >            
            <apex:pageBlockButtons location="bottom">
                <apex:commandButton value="Fetch" action="{!fetchAPI}"/>
            </apex:pageBlockButtons>
        </apex:pageBlock>
        
        <apex:pageblock >
            <apex:pageBlockSection >
                <apex:pageBlockTable value="{!listWrapper}" var="obj">
                    <apex:column value="{!obj.rates}" headerValue="Id"/>
                    <apex:column value="{!obj.base}" headerValue="Login"/>
                    

 

                    
                </apex:pageBlockTable>
            </apex:pageBlockSection>
        </apex:pageblock>
    </apex:form>
</apex:page>

Controller: 
public with sharing class RESTAPIJSONResponseController {

    public List < JSONWrapper > listWrapper {get;set;}
    
    public RESTAPIJSONResponseController() {
        listWrapper = new List < JSONWrapper >();
    }
    
    public void fetchAPI() {
        HTTP h = new HTTP();
        HTTPRequest req = new HTTPRequest();
        req.setEndPoint('https://theforexapi.com/api/latest?HTTP/2');
        req.setMethod('GET');
        HTTPResponse res = h.send(req);  
        JSONParser parser = JSON.createParser(res.getBody());
        listWrapper = (List < JSONWrapper >) JSON.deSerialize(res.getBody(), List < JSONWrapper >.class);
        system.debug(''+res.getBody() );
        /*
           If the response contains only one value instead list, then you can use the below code
           JSONWrapper obj = (JSONWrapper) JSON.deSerialize(res.getBody(), JSONWrapper.class); 
           listWrapper.add(obj);
        */
    }
    
    public class JSONWrapper {
        
        public String base {get;set;}
        public String rates {get;set;}
        
    }
    
}

JSON Response :  in system.debug
"{\"date\":\"2021-07-07\",\"base\":\"EUR\",\"rates\":{\"USD\":\"1.1831\",\"JPY\":\"130.86\",\"BGN\":\"1.9558\",\"CZK\":\"25.688\",\"DKK\":\"7.4361\",\"GBP\":\"0.85500\",\"HUF\":\"355.57\",\"PLN\":\"4.5192\",\"RON\":\"4.9268\",\"SEK\":\"10.1813\",\"CHF\":\"1.0917\",\"ISK\":\"146.30\",\"NOK\":\"10.2475\",\"HRK\":\"7.4867\",\"RUB\":\"87.8009\",\"TRY\":\"10.2566\",\"AUD\":\"1.5711\",\"BRL\":\"6.1224\",\"CAD\":\"1.4708\",\"CNY\":\"7.6478\",\"HKD\":\"9.1900\",\"IDR\":\"17146.47\",\"INR\":\"88.2825\",\"KRW\":\"1344.89\",\"MXN\":\"23.5724\",\"MYR\":\"4.9241\",\"NZD\":\"1.6760\",\"PHP\":\"58.960\",\"SGD\":\"1.5924\",\"THB\":\"38.173\",\"ZAR\":\"16.8666\"}}"

Visualforce Error:
System.JSONException: Malformed JSON: Expected '[' at the beginning of List/Set
Error is in expression '{!fetchAPI}' in component <apex:commandButton> in page forexconv: Class.System.JSON.deserialize: line 15, column 1
Class.RESTAPIJSONResponseController.fetchAPI: line 16, column 1

Need to display This format :
Need to display this format
To This  Type : 
User-added image

Please Help With this Issue,
Thanks in Advance.



 
Best Answer chosen by vijay sunil
Dushyant SonwarDushyant Sonwar
Vijay,

Try making the suggested changes below 
public with sharing class RESTAPIJSONResponseController {

    public List < JSONWrapper > listWrapper {get;set;}
    public String jsonData{get;set;}
    
    public RESTAPIJSONResponseController() {
        listWrapper = new List < JSONWrapper >();
    }
    
    public void fetchAPI() {
        HTTP h = new HTTP();
        HTTPRequest req = new HTTPRequest();
        req.setEndPoint('https://theforexapi.com/api/latest?HTTP/2');
        req.setMethod('GET');
        HTTPResponse res = h.send(req);  
        jsonData = res.getBody();
        
        //JSONParser parser = JSON.createParser(res.getBody());
        //listWrapper = (List < JSONWrapper >) JSON.deSerialize(res.getBody(), List < JSONWrapper >.class);
        system.debug(''+res.getBody() );
        /*
           If the response contains only one value instead list, then you can use the below code
           JSONWrapper obj = (JSONWrapper) JSON.deSerialize(res.getBody(), JSONWrapper.class); 
           listWrapper.add(obj);
        */
    }
    
    public class JSONWrapper {
        
        public String base {get;set;}
        public String rates {get;set;}
        
    }
    
}

VF Page 
<apex:page controller="RESTAPIJSONResponseController">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    
    <apex:form >
        <apex:outputPanel id="scriptPanel">
       <script>
        function showFormattedData(){
            var jsonStr = '{!jsonData}';
            var jsonObj = JSON.parse(jsonStr);
            var jsonPretty = JSON.stringify(jsonObj, null, '\t');
            
            $("#responsePre").html('<span style="font-size: 14px">' + jsonPretty + '</span>');
        }
             
        </script>
       </apex:outputPanel>  
        <apex:pageblock title="Formatted Response" id="pblock">
            <apex:pageBlockButtons location="bottom">
                <apex:commandButton value="Fetch" action="{!fetchAPI}" rerender="pblock,scriptPanel" oncomplete="showFormattedData();"/>
            </apex:pageBlockButtons>
            <pre id="responsePre">  </pre>
        </apex:pageblock>
    </apex:form>
</apex:page>

Your Final Output be like this below

User-added image

Hope this helps!!​​​​​​​

All Answers

Dushyant SonwarDushyant Sonwar
Vijay,

Try making the suggested changes below 
public with sharing class RESTAPIJSONResponseController {

    public List < JSONWrapper > listWrapper {get;set;}
    public String jsonData{get;set;}
    
    public RESTAPIJSONResponseController() {
        listWrapper = new List < JSONWrapper >();
    }
    
    public void fetchAPI() {
        HTTP h = new HTTP();
        HTTPRequest req = new HTTPRequest();
        req.setEndPoint('https://theforexapi.com/api/latest?HTTP/2');
        req.setMethod('GET');
        HTTPResponse res = h.send(req);  
        jsonData = res.getBody();
        
        //JSONParser parser = JSON.createParser(res.getBody());
        //listWrapper = (List < JSONWrapper >) JSON.deSerialize(res.getBody(), List < JSONWrapper >.class);
        system.debug(''+res.getBody() );
        /*
           If the response contains only one value instead list, then you can use the below code
           JSONWrapper obj = (JSONWrapper) JSON.deSerialize(res.getBody(), JSONWrapper.class); 
           listWrapper.add(obj);
        */
    }
    
    public class JSONWrapper {
        
        public String base {get;set;}
        public String rates {get;set;}
        
    }
    
}

VF Page 
<apex:page controller="RESTAPIJSONResponseController">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    
    <apex:form >
        <apex:outputPanel id="scriptPanel">
       <script>
        function showFormattedData(){
            var jsonStr = '{!jsonData}';
            var jsonObj = JSON.parse(jsonStr);
            var jsonPretty = JSON.stringify(jsonObj, null, '\t');
            
            $("#responsePre").html('<span style="font-size: 14px">' + jsonPretty + '</span>');
        }
             
        </script>
       </apex:outputPanel>  
        <apex:pageblock title="Formatted Response" id="pblock">
            <apex:pageBlockButtons location="bottom">
                <apex:commandButton value="Fetch" action="{!fetchAPI}" rerender="pblock,scriptPanel" oncomplete="showFormattedData();"/>
            </apex:pageBlockButtons>
            <pre id="responsePre">  </pre>
        </apex:pageblock>
    </apex:form>
</apex:page>

Your Final Output be like this below

User-added image

Hope this helps!!​​​​​​​
This was selected as the best answer
vijay sunilvijay sunil
Thanq so much for your Solution But iam not getting any data or not even page loading when i click fetch.
User-added image
Can you please help me to get data display on page load without command button 
thankyou,