CODEWITHSUNDEEP
javascripthtmlember.js
priyanka.sarkar
priyanka.sarkar

Reputation: 26498

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>

Upvotes: 0

Views: 198

Answers (2)

Jose CC
Jose CC

Reputation: 866

This should be simple by just adding html tags to break to the next line. Also make sure you wrap you handle bars property in three curly braces to make sure that handlebars knows that you are not only passing strings but also html tags. Make sure you check this tutorial on handlebars expressions for deeper details..... I haven't tested but I hope you get the picture...

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

      <table>
        <thead>    
            <tr>
                <th>Id</th>
                <th>Name</th>
            </tr>
        </thread>
        <tbody>
            <tr>
                {{#each value in App.testData}}
                <tr>{{{value}}}</tr>
               {{/each}}
            </tr>
         </tbody>
      </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 '<td>' + el.id + '</td>' + ',' + '<td>' + el.name + '</td>'; 
                    }); 
      </script>

Upvotes: 1

saumya shukla
saumya shukla

Reputation: 36

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>

Upvotes: 1

Related Questions