Displaying Json Data on Visualforce

Question

{"QueryResponse":{"Item":[{"Name":"Concrete","Description":"Concrete for fountain installation","Active":true,"FullyQualifiedName":"Concrete","Taxable":true,"UnitPrice":0,"Type":"Service","IncomeAccountRef":{"value":"48","name":"Landscaping Services:Job Materials:Fountains and Garden Lighting"},"PurchaseCost":0,"TrackQtyOnHand":false,"domain":"QBO","sparse":false,"Id":"3","SyncToken":"1","MetaData":{"CreateTime":"2017-07-10T10:36:03-07:00","LastUpdatedTime":"2017-07-13T12:47:47-07:00"}},{"Name":"Design","Description":"Custom Design","Active":true,"FullyQualifiedName":"Design","Taxable":false,"UnitPrice":75,"Type":"Service","IncomeAccountRef":{"value":"82","name":"Design income"},"PurchaseCost":0,"TrackQtyOnHand":false,"domain":"QBO","sparse":false,"Id":"4","SyncToken":"0","MetaData":{"CreateTime":"2017-07-10T10:41:38-07:00","LastUpdatedTime":"2017-07-10T10:41:38-07:00"}},{"Name":"Garden Supplies","Active":true,"FullyQualifiedName":"Garden Supplies","Taxable":false,"UnitPrice":0,"Type":"Service","IncomeAccountRef":{"value":"79","name":"Sales of Product Income"},"PurchaseCost":0,"ExpenseAccountRef":{"value":"80","name":"Cost of Goods Sold"},"TrackQtyOnHand":false,"domain":"QBO","sparse":false,"Id":"21","SyncToken":"0","MetaData":{"CreateTime":"2017-08-19T07:14:02-07:00","LastUpdatedTime":"2017-08-19T07:14:02-07:00"}},{"Name":"Garden Supplies2","Active":true,"FullyQualifiedName":"Garden Supplies2","Taxable":false,"UnitPrice":0,"Type":"Service","IncomeAccountRef":{"value":"79","name":"Sales of Product Income"},"PurchaseCost":0,"ExpenseAccountRef":{"value":"80","name":"Cost of Goods Sold"},"TrackQtyOnHand":false,"domain":"QBO","sparse":false,"Id":"24","SyncToken":"0","MetaData":{"CreateTime":"2017-08-20T23:24:30-07:00","LastUpdatedTime":"2017-08-20T23:24:30-07:00"}},{"Name":"Garden Supplies3","Active":true,"FullyQualifiedName":"Garden Supplies3","Taxable":false,"UnitPrice":0,"Type":"Service","IncomeAccountRef":{"value":"79","name":"Sales of Product Income"},"PurchaseCost":0,"ExpenseAccountRef":{"value":"80","name":"Cost of Goods Sold"},"TrackQtyOnHand":false,"domain":"QBO","sparse":false,"Id":"25","SyncToken":"0","MetaData":{"CreateTime":"2017-08-21T00:13:22-07:00","LastUpdatedTime":"2017-08-21T00:13:22-07:00"}}],"startPosition":1,"maxResults":5},"time":"2017-08-23T01:55:23.697-07:00"}

This is the Json Data i am getting in response, from which i need all the attributes of Items on a Pageblocktable

global class quickbookItemResponse{
    global cls_QueryResponse QueryResponse{get;set;}
    public String timee;    //2017-08-22T03:37:13.512-07:00

    global class cls_QueryResponse {
        public cls_Item[] Item{get;set;}
        public Integer startPosition{get;set;}  //1
        public Integer maxResults{get;set;} //5
    }

    class cls_Item {
        public String Name; //Concrete
        public String Description;  //Concrete for fountain installation
        public boolean Active;
        public String FullyQualifiedName;   //Concrete
        public boolean Taxable;
        public Integer UnitPrice;   //0
        public String Type; //Service
        public cls_IncomeAccountRef IncomeAccountRef;
        public Integer PurchaseCost;    //0
        public boolean TrackQtyOnHand;
        public String domain;   //QBO
        public boolean sparse;
        public String Id;   //3
        public String SyncToken;    //1
        public cls_MetaData MetaData;
    }
    class cls_IncomeAccountRef {
        public String value;    //48
        public String name; //Landscaping Services:Job Materials:Fountains and Garden Lighting
    }
    class cls_MetaData {
        public String CreateTime;   //2017-07-10T10:36:03-07:00
        public String LastUpdatedTime;  //2017-07-13T12:47:47-07:00
    }
    public static quickbookItemResponse parse(String json){
        return (quickbookItemResponse) System.JSON.deserialize(json, quickbookItemResponse.class);
    }

}

I am deserializing JSON using this class, but i am not able to get the items' attributes to display in the Visualforce page

<apex:page controller="getQuickbookProducts">
    <apex:pageBlock >
        <apex:form >

                 <apex:pageBlockTable value="{!mapList}" var="pg" >
                     <apex:column value="{!pg}"/>
                </apex:pageBlockTable>                

        </apex:form>
    </apex:pageBlock>
</apex:page>

Response on Page is coming as

Apex Callout

public class getQuickbookProducts 
{
    public List<Object> mapList{get;set;}

    public getQuickbookProducts()
    {
       mapList =  getQuickbookProductscallout();
    }
    public static List<Object> getQuickbookProductscallout()
    {
        HttpRequest req = new HttpRequest();
        req.setMethod('GET');
        req.setEndpoint('my url');
        Http http = new Http();
        HttpResponse res = http.send(req);
        String jsonString = res.getBody();
        System.debug(jsonString);
        quickbookItemResponse qir = quickbookItemResponse.parse(jsonString);
        Map<String, Object> results = (Map<String, Object>) JSON.deserializeUntyped(res.getBody());
        Map<String, Object> QueryResponse = (Map<String, Object>) results.get('QueryResponse');
        List<Object> item = (List<Object>) QueryResponse.get('Item'); 
        return item;
    }

}

Answer 1

Each column needs a simple data value rather than a complex object as its value so something like:

<apex:column value="{!pg.Name}"/>
<apex:column value="{!pg.Description}"/>
...

where you are referencing each field of cls_Item should work better.

PS

Based on your updated question you are not parsing into cls_Item but into Object. If you change List<Object> to List<Map<String, Object>> this may work:

<apex:column value="{!pg['Name']}"/>
<apex:column value="{!pg['Description']}"/>
...

but parsing into cls_Item would let you use the field names more directly.