public class jsonresponse{
 
  public string jsonTest{get;set;}
  public wrapperclass wrapperclasswrap{get;set;}
  public list<wrapperclass> wrapperclasswrapnameslst{get;set;}
  public string Totaldata{get;set;}
   public list<string> totallistdata{get;set;}
      public jsonresponse(){
      totallistdata = new list<string>();
      wrapperclasswrap = new wrapperclass();
      wrapperclasswrapnameslst =  new list<wrapperclass>();
jsonTest ='{"$id":"1","data":{"$id":"2","compName":"Big-CMobiles","SalesData":[{"$id":"3","Name":"Sony","purchaseddata":[{"$id":"4","category":"ipads","amount":null},{"$id":"5","category":"Electronics","amount":7000}]},{"$id":"6","Name":"samsung","purchaseddata":[{"$id":"7","category":"","amount":null},{"$ref":"5"}]},{"$id":"8","Name":"Totals","purchaseddata":[{"$id":"9","category":"Electronics","amount":7000},{"$id":"10","category":"Spares","amount":0}]}]}}';  
     
            Map<string, object>  mapobj = (map<string,object>)json.deserializeuntyped(jsonTest);
           Object objj = (object)mapobj.get('data');
          string serilize = system.json.serialize(objj);
         wrapperclasswrap =(wrapperclass)system.json.deserialize(serilize,wrapperclass.class);
   system.debug('=================second ========================');
    Map<string, object>  mapobj2 = (map<string,object>)json.deserializeuntyped(serilize);
   Object objj2 = (object)mapobj2.get('SalesData');
  string serilize2 = system.json.serialize(objj2 );
  
          wrapperclasswrapnameslst =(list<wrapperclass>)system.json.deserialize(serilize2 ,list<wrapperclass>.class);
              system.debug(wrapperclasswrapnameslst[0].Name);
              system.debug(wrapperclasswrapnameslst[0].purchaseddata[0].category);  //iam getting phones
              
              for(wrapperclass wr:wrapperclasswrapnameslst){
              
               Totaldata = wr.name+'\t';
                Totaldata +=wr.purchaseddata[0].category;
                
               //for(purchaseddata p:er.purchaseddata){
               
               //how to bind the subclass data in the for loop any idea
               
                //}  
               
                   
                totallistdata.add(Totaldata);
               }
             
             
                 }
            
      
       
       
       
       public class wrapperclass{
         public string compName{get;set;}
         public string Name{get;set;}
         public integer amount{get;set;}
         public list<purchaseddata> purchaseddata{get;set;}
     
       public wrapperclass(){       
          purchaseddata= new list<purchaseddata>();
        }
    }

     //wrapclass2subwrapper
      public class purchaseddata{
         public string category{get;set;}
         public integer amount{get;set;}
      }

}

Visual force page:

 

<apex:page controller="jsonresponse">

 
   <apex:repeat value="{!totallistdata}" var="a">
   {!a}
   
   </apex:repeat>
</apex:page>

Note:  how to use subwrapper clss in in the forloop
for(wrapperclass wr:wrapperclasswrapnameslst){
     Totaldata = wr.name+'\t';
      //Totaldata +=wr.purchaseddata[0].category;  //this is static way
 for(purchaseddata p:er.purchaseddata){
//how to bind the subclass data in the for loop any idea dynamically
totallistdata.add(Totaldata);
 }
}