Using JSON in Visualforce page in Salesforce

JSON stands for “Java Script Object Notation“.

JSON.serialize() is used to generate JSON. It is a lightweight data-interchange format.

JSON is built on two structures:

• A collection of name/value pairs. In various languages, this is realized as an object, record, struct, dictionary, hash table, keyed list, or associative array.
• An ordered list of values. In most languages, this is realized as an array, vector, list, or sequence.

---------------------------------------------------------------------------------------------------------

<apex:page controller="sample1" action="{!parseJson}">
    <p>
       <b> displaying json format in visulaforce page</b>
    </p>
    {!text1}
 
    <apex:pageblock >
         <p>
        <b> Displaying Json data in PageBloack Table</b>
    </p>
        <apex:pageblockTable value="{!jsonList}" var="json">
            <apex:column headerValue="id" value="{!json.id}"/>
            <apex:column headerValue="name" value="{!json.name}"/>
        </apex:pageblockTable>
    </apex:pageblock>
</apex:page>


-------------------------------------------------------------------------------------


public class sample1 {
 public String text1 {get;set;}
    public list<JsonWrapper> jsonList{get;set;}
    public sample1()
    {
         jsonList=new list<JsonWrapper>();
    } 
    public void parseJson()
    {
        String soql = 'SELECT Name FROM Account LIMIT 5';
        List<Account> acct = Database.Query(soql);
        text1 = JSON.serialize(acct);
        jsonList=(List<JsonWrapper>) System.JSON.deserialize(text1,List<JsonWrapper>.class);
    }
 
 
    public class JsonWrapper{
        public string id{get;set;}
        public string name{get;set;}
    }
}

Image: