How can I display JSON data in a Salesforce Visualforce Page?

Question

EDIT : Here's what I was thinking for the callout :

public class APISocieteCallout {

String searchContent= //Content of the search
String apiKey= 'XXXXXXXXXXXXXXXXXXXXXX';
String requestEndpoint += 'https://api.societe.com/pro/dev/societe/';
requestEndpoint += 'search?nom=';
requestEndpoint += '&token='+apiKey;
requestEndpoint += '&format=json';

public static HttpResponse getSocieteInfo(){
Http http = new Http();
HttpRequest request = new HttpRequest();
requestEndpoint= 'https://api.societe.com/pro/dev/societe/';
request.setMethod('GET');


HttpResponse response = http.send(request);
System.debug(response.getStatusCode());

if(response.getStatusCode() == 200){
   Map<String,Object> result = (Map<String,Object>) JSON.deserializeUntyped(response.getBody());
   System.debug(result);
               
}

return response;

} }

Sorry, I am new to this and can't get the different documentations to help...

Thanks a lot, H.

Answer 1

One way would be to create some helper class with these fields (public Integer n; public String siren; etc) and deserialize the JSON into proper apex objects. Or pass it directly as is to Visualforce as string variable and do something with it in JavaScript. Depends what you consider cleaner and what else you plan to do with this data. For just displaying on 1 VF page parsing properly is bit of overkill but if there are other things that could use it or JavaScript is not an option (say VF page rendered as pdf for example...). On the other hand if you'd be making a Lightning Web Component - no point wasting time parsing it,pass it to JS as is.

You don't have to create the helper wrapper class by hand. You could feed your JSON document to https://json2apex.herokuapp.com/, it will generate the class and parsing code for you, it will try to guess the field types and will even work around reserved keywords (for example if your file would have "limit" or "trigger" it would have to be parsed special way). It'll even include a best guess unit test so you have bit less work to do.

//
// Generated by JSON2Apex http://json2apex.herokuapp.com/
//

public class Wrapper{

    public Integer nb;
    public List<Result> result;

    public class Result {
        public Integer n;
        public String siren;
        public String ape;
        public String apetexte;
        public String rs;
        public String cp;
    }

    
    public static Wrapper parse(String json) {
        return (Wrapper) System.JSON.deserialize(json, Wrapper.class);
    }
}

which is almost perfect. For use on VF page you need to add public Integer n {get;private set;} or something similar.

And finally - <apex:repeat>, <apex:pageBlockTable> etc tags to loop through {!wrapper.result}.

Edit: code dump :)

public class Stack72189633{

    static final String APIKEY = 'XXXXXXXXXXXXXXXXXXXXXX';
    static final String ENDPOINT = 'https://api.societe.com/pro/dev/societe/';
    
    public String searchTerm {get;set;}
    public Wrapper myData {get; private set;}
    
    // If the constructor can be empty we can skip it completely, SF will generate one for us silently
    //public Stack72189633(ApexPages.StandardController sc){}
    
    public void doSearch(){
        if(String.isBlank(searchTerm)){
            ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.ERROR, 'Nice try'));
            return;
        }
        
        if(searchTerm == 'fake'){
            String json = '{'+
            '\"nb\": 192,'+
            '\"result\": ['+
            '    {'+
            '        \"n\": 1,'+
            '        \"siren\": \"390206357\",'+
            '        \"ape\": \"9312Z\",'+
            '        \"apetexte\": \"XXXXXXXXXXXXXXXXXXXXXXXXXXXX\",'+
            '        \"rs\": \"AMICALE SORTIVE CULTURELLE DE LA BNP\",'+
            '        \"cp\": \"XXXXXXXXXXXX\"'+
            '    },'+
            '    {'+
            '        \"n\": 2,'+
            '        \"siren\": \"434285359\",'+
            '        \"ape\": \"9499Z\",'+
            '        \"apetexte\": \"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX\",'+
            '        \"rs\": \"AMICALE DES RETRAITES BNP PARIBAS\",'+
            '        \"cp\": \"XXXXXXXXXXXXX\"'+
            '    },'+
            '    {'+
            '        \"n\": 3,'+
            '        \"siren\": \"524769841\",'+
            '        \"ape\": \"9499Z\",'+
            '        \"apetexte\": \"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX\",'+
            '        \"rs\": \"AMICALE SPORTIVE ET CULTURELLE DE BNP\",'+
            '        \"cp\": \"XXXXXXXXXXXXX\"'+
            '    },'+
            '    {'+
            '        \"n\": 4,'+
            '        \"siren\": \"517815544\",'+
            '        \"ape\": \"XXXXX\",'+
            '        \"apetexte\": \"Activités de clubs de sports\",'+
            '        \"rs\": \"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX\",'+
            '        \"cp\": \"05000 GAP\"'+
            '    }'+
            ']'+
            '}';
            myData = (Wrapper) System.JSON.deserialize(json, Wrapper.class);
        } else {

            // This is bit better than joining strings manually because it should urlencode special characters too.
            PageReference pr = new PageReference(ENDPOINT + 'search');
            pr.getParameters().putAll(new Map<String, String>{
                'nom' => searchTerm,
                'token' => APIKEY,
                'format' => 'json'
            });
            
            Http h = new Http();
            HttpRequest req = new HttpRequest();
            req.setMethod('GET');
            req.setEndpoint(pr.getUrl());
            
            HttpResponse res = new Http().send(req);
            if(res.getStatusCode() == 200 && String.isNotBlank(res.getBody())){
                myData = (Wrapper) System.JSON.deserialize(res.getBody(), Wrapper.class);
            }
        }
    }
    
    public class Wrapper{
        public Integer nb {get; private set;}
        public List<Result> result {get; private set;}
    }
    public class Result {
        public Integer n {get; private set;}
        public String siren {get; private set;}
        public String ape {get; private set;}
        public String apetexte {get; private set;}
        public String rs {get; private set;}
        public String cp {get; private set;}
    }
}

<apex:page controller="Stack72189633">
<apex:pageMessages />
<apex:form>
<apex:pageBlock title="Search form">
    <apex:pageBlockButtons location="bottom">
        <apex:commandButton value="Search" action="{!doSearch}" />
    </apex:pageBlockButtons>
    <apex:pageBlockSection>
        <apex:inputText label="Name" value="{!searchTerm}" required="true" />
    </apex:pageBlockSection>
</apex:pageBlock>
</apex:form>

<apex:pageBlock title="Results">
    <apex:pageBlockTable value="{!myData.result}" var="r" rendered="{!myData != null}">
        <apex:column headerValue="#" value="{!r.n}" />
        <apex:column headerValue="Siren" value="{!r.siren}" />
        <apex:column headerValue="APE" value="{!r.ape}" />
        <apex:column headerValue="Text" value="{!r.apetexte}" />
    </apex:pageBlockTable>
</apex:pageBlock>
</apex:page>