ember JS : iterating over a json list and displaying in handlebars

I have a JSON object consisiting of an array of json objects. I want to display the provider group List for every application as a dataList in my JSON object . The JSON object is :

{"Application1":[{"pg_id":"test00020","pg_name":"test20","sealID":"Application1"},{"pg_id":"test00030","pg_name":"test30","sealID":"Application1"}],"Application2":[{"pg_id":"test00040","pg_name":"test40","sealID":"Application2"},{"pg_id":"test00050","pg_name":"test50","sealID":"Application2"}]}

I have named this JSON object as AppPgMap and in my hbs file I am trying to access it as follows:

         **<input class="typeahead" type="text" id= list="pg_data"  onchange=   placeholder="search here">  
          <datalist id="pg_data">
        <select   class="form-control " id= "new_pg_id"  oninput=  required=true>

             
              
                <option value=> </option>

                
             



       </select>  
      </datalist>**

This doesn't work for me and instead of getting the data list i get an empty input field . Is there a solution to this?Or do I have to restructure my data and try displaying it another way?