priyanka.sarkar priyanka.sarkar - 3 months ago 14
Javascript Question

How to display comma seperated list into table in EmberJS?

Ok, I have Array [ "1,john", "2,jane", "3,zack" ]

At present it is displayed as enter image description here

I want to display as

enter image description here

How to to this

My code

<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.10.0/ember.min.js"></script>
<script src="http://builds.emberjs.com/tags/v1.10.0-beta.3/ember-template-compiler.js"></script>
<script src="http://builds.emberjs.com/release/ember.debug.js"></script>
<script src="http://builds.emberjs.com/beta/ember-data.js"></script>
</head>
<body>

<script type="text/x-handlebars">
{{outlet}}
</script>


<script type="text/x-handlebars" data-template-name="index">

<table>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
<tr>
{{#each value in App.testData}}
<td>{{value}}</td>
{{/each}}
</tr>
</table>

</script>

<script type="text/javascript">
var App = Ember.Application.create()
var someArray = [ {
'id':1,
'name':'john'
},{
'id':2,
'name':'jane'
},{
'id':3,
'name':'zack'
}];

App.testData = someArray.map( function( el )
{
return el.id + ',' + el.name;
});
</script>
</body>
</html>

Answer

Use someArray instead of testArray and if you have default testArray in your app then you have to convert it to someArray and set it into App now inside each handlebar use value.id and value.name

     <!DOCTYPE html>
  <html>
     <head> 
        <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.min.js"></script>
        <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.10.0/ember.min.js"></script>
        <script src="http://builds.emberjs.com/tags/v1.10.0-beta.3/ember-template-compiler.js"></script>
        <script src="http://builds.emberjs.com/release/ember.debug.js"></script>
        <script src="http://builds.emberjs.com/beta/ember-data.js"></script>
     </head>
     <body>

        <script type="text/x-handlebars">
           {{outlet}}
        </script>


        <script type="text/x-handlebars" data-template-name="index">

        <table>       
              <tr>
                  <th>Id</th>
                  <th>Name</th>
              </tr>
              <tr>
                  {{#each value in App.someArray}}
                  <td>{{value.id}}</td>
      <td>{{value.name}}</td>
              {{/each}}
              </tr>
        </table>  

        </script>

        <script type="text/javascript">
          var App = Ember.Application.create()    
          var testData =  [ "1,john", "2,jane", "3,zack" ];  
          App.someArray = testData.map(function(e){
                            var [id,name] = e.split(",");
                            return {
                              id:id,
                              name:name
                            }
                          })
        </script>
     </body>
  </html>
Comments