+ Start a Discussion
Diwakar G 7Diwakar G 7 

Json Result in Table Visualforce page

Hi,
 
[{"Name": "US-0000314","Project":"TestPOC","Release":"Dec-GGGG","Username":"AAA.g@ccc.com","Useremail":"AAA.g@BBB.com"},{"Name": "US-0000312","Project":"TestPOC","Release":"Dec-GGGG","Username":"AAA.g@ccc.com","Useremail":"AAA.g@BBB.com"},{"Name": "US-0000315","Project":"TestPOC","Release":"Dec-GGGG","Username":"AAA.g@ccc.com","Useremail":"AAA.g@BBB.com"},{"Name": "US-0000318","Project":"TestPOC","Release":"Dec-GGGG","Username":"AAA.g@ccc.com","Useremail":"AAA.g@BBB.com"},{"Name": "US-0000313","Project":"TestPOC","Release":"Dec-GGGG","Username":"AAA.g@ccc.com","Useremail":"AAA.g@BBB.com"},{"Name": "US-0000317","Project":"TestPOC","Release":"Dec-GGGG","Username":"AAA.g@ccc.com","Useremail":"AAA.g@BBB.com"},{"Name": "US-0000320","Project":"TestPOC","Release":"Dec-GGGG","Username":"AAA.g@ccc.com","Useremail":"AAA.g@BBB.com"},{"Name": "US-0000316","Project":"TestPOC","Release":"Dec-GGGG","Username":"AAA.g@ccc.com","Useremail":"AAA.g@BBB.com"},{"Name": "US-0000322","Project":"TestPOC","Release":"Dec-GGGG","Username":"AAA.g@ccc.com","Useremail":"AAA.g@BBB.com"},{"Name": "US-0000319","Project":"TestPOC","Release":"Dec-GGGG","Username":"AAA.g@ccc.com","Useremail":"AAA.g@BBB.com"},{"Name": "US-0000321","Project":"TestPOC","Release":"Dec-GGGG","Username":"AAA.g@ccc.com","Useremail":"AAA.g@BBB.com"},{"Name": "US-0000324","Project":"TestPOC","Release":"Dec-GGGG","Username":"AAA.g@ccc.com","Useremail":"AAA.g@BBB.com"},{"Name": "US-0000328","Project":"TestPOC","Release":"Dec-GGGG","Username":"AAA.g@ccc.com","Useremail":"AAA.g@BBB.com"},{"Name": "US-0000335","Project":"TestPOC","Release":"Feb-GGGG","Username":"AAA.g@ccc.com","Useremail":"AAA.g@BBB.com"},{"Name": "US-0000337","Project":"TestPOC","Release":"Feb-GGGG","Username":"AAA.g@ccc.com","Useremail":"AAA.g@BBB.com"},{"Name": "US-0000329","Project":"TestPOC","Release":"Dec-GGGG","Username":"AAA.g@ccc.com","Useremail":"AAA.g@BBB.com"},{"Name": "US-0000330","Project":"TestPOC","Release":"Dec-GGGG","Username":"AAA.g@ccc.com","Useremail":"AAA.g@BBB.com"},{"Name": "US-0000336","Project":"TestPOC","Release":"Feb-GGGG","Username":"AAA.g@ccc.com","Useremail":"AAA.g@BBB.com"},{"Name": "US-0000332","Project":"TestPOC","Release":"Dec-GGGG","Username":"AAA.g@ccc.com","Useremail":"AAA.g@BBB.com"},{"Name": "US-0000331","Project":"TestPOC","Release":"Dec-GGGG","Username":"AAA.g@ccc.com","Useremail":"AAA.g@BBB.com"},{"Name": "US-0000334","Project":"TestPOC","Release":"Feb-GGGG","Username":"AAA.g@ccc.com","Useremail":"AAA.g@BBB.com"},{"Name": "US-0000333","Project":"TestPOC","Release":"Dec-GGGG","Username":"AAA.g@ccc.com","Useremail":"AAA.g@BBB.com"},{"Name": "US-0000342","Project":"TestPOC","Release":"Dec-GGGG","Username":"AAA.g@ccc.com","Useremail":"AAA.g@BBB.com"},{"Name": "US-0000344","Project":"TestPOC","Release":"Dec-GGGG","Username":"AAA.g@ccc.com","Useremail":"AAA.g@BBB.com"},{"Name": "US-0000345","Project":"TestPOC","Release":"Feb-GGGG","Username":"AAA.g@ccc.com","Useremail":"AAA.g@BBB.com"},{"Name": "US-0000343","Project":"TestPOC","Release":"Feb-GGGG","Username":"AAA.g@ccc.com","Useremail":"AAA.g@BBB.com"}]

I want display the above JSON in below table format in Visualforce page. Please help me.

User-added image
Thanks and Regards,
Diwakar G

Best Answer chosen by Diwakar G 7
DevADSDevADS
Change your apex class as below -
public class dt_tracker {
	public static List<wrapperCls> result{get;set;}
    
    public dt_tracker(){
    String recordstring = getAccessToken();
    result = (List<wrapperCls>) JSON.deserialize(recordstring, List<wrapperCls>.class);
    }
    class wrapperCls {
    public string Name {get;set;}
    public string Project {get;set;}
    public string Release {get;set;}
    public string Username {get;set;}
    public string Useremail {get;set;}
}
    
    public static String getAccessToken(){
        
        String jsonData = '   '; 
		String endpoint = 'https://aaa';
		HttpRequest req = new HttpRequest();
		req.setEndpoint(endpoint);
        req.setHeader('Content-Type', 'application/json');
		req.setMethod('POST');
		req.setbody(jsonData);
        req.setTimeout(120000);
		Http http = new Http();
		HTTPResponse res = http.send(req);     
        String recordstring = res.getBody(); 
        return recordstring;
    } 
    
}

Please hit best answer if it resolves your issue.
 

All Answers

PrasathPrasath
Hi Diwakar,

Use the wrapper class to display the JSON Response on the VF page.
Amit Shingavi 8Amit Shingavi 8
Hi Diwakar,

As Prasath state, you can use wrapper classes to define the structure of your JSON as a class.
For example -
String jsonString = '{"Firstname":"Diwakar","Email":"abc@test.com"}';

Wrapper Class
Public class JSONwrapper{
    public string Firstname;
    public string Email;
}

Parse JSON 
JSONwrapper wrapObj = (JSONwrapper)JSON.deserialize( jsonString, JSONwrapper.class);

Follow this link (https://developer.salesforce.com/docs/atlas.en-us.apexcode.meta/apexcode/apex_class_System_Json.htm)for reference.

ELSE
You can use javascript plugins to convert the JSON into HTML table.
Please follow my fiddle link (https://jsfiddle.net/shingavi_a/n3ku1f5m/2/) for the reference.

Do post here if you still have any questions.

Happy Coding!

Regards,
Amit Shingavi
PrasathPrasath
Hi Diwakar,

Use the blow code,

Apex class
public String response = '[{"Name": "US-0000314","Project":"TestPOC","Release":"Dec-GGGG","Username":"AAA.g@ccc.com","Useremail":"AAA.g@BBB.com"},{"Name": "US-0000312","Project":"TestPOC","Release":"Dec-GGGG","Username":"AAA.g@ccc.com","Useremail":"AAA.g@BBB.com"},{"Name": "US-0000315","Project":"TestPOC","Release":"Dec-GGGG","Username":"AAA.g@ccc.com","Useremail":"AAA.g@BBB.com"},{"Name": "US-0000318","Project":"TestPOC","Release":"Dec-GGGG","Username":"AAA.g@ccc.com","Useremail":"AAA.g@BBB.com"},{"Name": "US-0000313","Project":"TestPOC","Release":"Dec-GGGG","Username":"AAA.g@ccc.com","Useremail":"AAA.g@BBB.com"},{"Name": "US-0000317","Project":"TestPOC","Release":"Dec-GGGG","Username":"AAA.g@ccc.com","Useremail":"AAA.g@BBB.com"},{"Name": "US-0000320","Project":"TestPOC","Release":"Dec-GGGG","Username":"AAA.g@ccc.com","Useremail":"AAA.g@BBB.com"},{"Name": "US-0000316","Project":"TestPOC","Release":"Dec-GGGG","Username":"AAA.g@ccc.com","Useremail":"AAA.g@BBB.com"},{"Name": "US-0000322","Project":"TestPOC","Release":"Dec-GGGG","Username":"AAA.g@ccc.com","Useremail":"AAA.g@BBB.com"},{"Name": "US-0000319","Project":"TestPOC","Release":"Dec-GGGG","Username":"AAA.g@ccc.com","Useremail":"AAA.g@BBB.com"},{"Name": "US-0000321","Project":"TestPOC","Release":"Dec-GGGG","Username":"AAA.g@ccc.com","Useremail":"AAA.g@BBB.com"},{"Name": "US-0000324","Project":"TestPOC","Release":"Dec-GGGG","Username":"AAA.g@ccc.com","Useremail":"AAA.g@BBB.com"},{"Name": "US-0000328","Project":"TestPOC","Release":"Dec-GGGG","Username":"AAA.g@ccc.com","Useremail":"AAA.g@BBB.com"},{"Name": "US-0000335","Project":"TestPOC","Release":"Feb-GGGG","Username":"AAA.g@ccc.com","Useremail":"AAA.g@BBB.com"},{"Name": "US-0000337","Project":"TestPOC","Release":"Feb-GGGG","Username":"AAA.g@ccc.com","Useremail":"AAA.g@BBB.com"},{"Name": "US-0000329","Project":"TestPOC","Release":"Dec-GGGG","Username":"AAA.g@ccc.com","Useremail":"AAA.g@BBB.com"},{"Name": "US-0000330","Project":"TestPOC","Release":"Dec-GGGG","Username":"AAA.g@ccc.com","Useremail":"AAA.g@BBB.com"},{"Name": "US-0000336","Project":"TestPOC","Release":"Feb-GGGG","Username":"AAA.g@ccc.com","Useremail":"AAA.g@BBB.com"},{"Name": "US-0000332","Project":"TestPOC","Release":"Dec-GGGG","Username":"AAA.g@ccc.com","Useremail":"AAA.g@BBB.com"},{"Name": "US-0000331","Project":"TestPOC","Release":"Dec-GGGG","Username":"AAA.g@ccc.com","Useremail":"AAA.g@BBB.com"},{"Name": "US-0000334","Project":"TestPOC","Release":"Feb-GGGG","Username":"AAA.g@ccc.com","Useremail":"AAA.g@BBB.com"},{"Name": "US-0000333","Project":"TestPOC","Release":"Dec-GGGG","Username":"AAA.g@ccc.com","Useremail":"AAA.g@BBB.com"},{"Name": "US-0000342","Project":"TestPOC","Release":"Dec-GGGG","Username":"AAA.g@ccc.com","Useremail":"AAA.g@BBB.com"},{"Name": "US-0000344","Project":"TestPOC","Release":"Dec-GGGG","Username":"AAA.g@ccc.com","Useremail":"AAA.g@BBB.com"},{"Name": "US-0000345","Project":"TestPOC","Release":"Feb-GGGG","Username":"AAA.g@ccc.com","Useremail":"AAA.g@BBB.com"},{"Name": "US-0000343","Project":"TestPOC","Release":"Feb-GGGG","Username":"AAA.g@ccc.com","Useremail":"AAA.g@BBB.com"}]';

public List<wrapperCls> result = new List<wrapperCls>(){get;set;};
result = (List<wrapperCls>) JSON.deserialize(response, List<wrapperCls>.class);

class wrapperCls{
    public string Name;
    public string Project;
    public string Release;
    public string Username;
    public string Useremail;
}

VF Page
<apex:page>
<apex:pageBlockTable value="{!result}" var="item">
	<apex:column value="{!item.Name}"/>
	<apex:column value="{!item.Project}"/>
	<apex:column value="{!item.Release}"/>
	<apex:column value="{!item.Username}"/>
	<apex:column value="{!item.Useremail}"/>
</apex:pageBlockTable>
</apex:page>

 
Diwakar G 7Diwakar G 7
Hi Prasath,

'recordstring' contains json value.

Apex class:
public class dt_tracker {
	public static List<wrapperCls> result{get;set;}
    
    public dt_tracker(){
    String recordstring = getAccessToken();
    result = (List<wrapperCls>) JSON.deserialize(recordstring, List<wrapperCls>.class);
    }
    class wrapperCls {
    public string Name;
    public string Project;
    public string Release;
    public string Username;
    public string Useremail;
}
    
    public static String getAccessToken(){
        
        String jsonData = '   '; 
		String endpoint = 'https://aaa';
		HttpRequest req = new HttpRequest();
		req.setEndpoint(endpoint);
        req.setHeader('Content-Type', 'application/json');
		req.setMethod('POST');
		req.setbody(jsonData);
        req.setTimeout(120000);
		Http http = new Http();
		HTTPResponse res = http.send(req);     
        String recordstring = res.getBody(); 
        return recordstring;
    } 
    
}

Visualforce Page:
<apex:page controller="dt_tracker">
    <apex:pageBlock>
	<apex:pageBlockTable value="{!result}" var="item">
	<apex:column value="{!item.Name}"/>
	<apex:column value="{!item.Project}"/>
	<apex:column value="{!item.Release}"/>
	<apex:column value="{!item.Username}"/>
	<apex:column value="{!item.Useremail}"/>
	</apex:pageBlockTable>
    </apex:pageBlock>
</apex:page>
But, getting below error.
User-added image
DevADSDevADS
Change your apex class as below -
public class dt_tracker {
	public static List<wrapperCls> result{get;set;}
    
    public dt_tracker(){
    String recordstring = getAccessToken();
    result = (List<wrapperCls>) JSON.deserialize(recordstring, List<wrapperCls>.class);
    }
    class wrapperCls {
    public string Name {get;set;}
    public string Project {get;set;}
    public string Release {get;set;}
    public string Username {get;set;}
    public string Useremail {get;set;}
}
    
    public static String getAccessToken(){
        
        String jsonData = '   '; 
		String endpoint = 'https://aaa';
		HttpRequest req = new HttpRequest();
		req.setEndpoint(endpoint);
        req.setHeader('Content-Type', 'application/json');
		req.setMethod('POST');
		req.setbody(jsonData);
        req.setTimeout(120000);
		Http http = new Http();
		HTTPResponse res = http.send(req);     
        String recordstring = res.getBody(); 
        return recordstring;
    } 
    
}

Please hit best answer if it resolves your issue.
 
This was selected as the best answer
Diwakar G 7Diwakar G 7
Thanks Prasath and DevADS