Post Json Data in EmberJs

1

Hi there,

I am having problems with posting data to URL , though I have checked the URL in Soap UI and it worked ,but when I try to do the same using ember its not working .So ,please help. My code in app.js goes here ,

var App = Ember.Application.create();

App.Router.map(function() {
 this.resource('about');
 this.resource('persons', function() {
 this.resource('data', { path: ':person_id' });
});  
});

App.Store = DS.Store.extend({
revision: 12, 
adapter: DS.RESTAdapter.extend({
url: 'http://portNum/pathToSendJsonData' 
})

});

App.PersonsRoute = Ember.Route.extend({
model: function(){   
return App.Person.find(); 
}
});

App.Person = DS.Model.extend({  
name: DS.attr('string'),
file: DS.attr('string')
});

  App.DataController = Ember.ObjectController.extend({
  isEditing: false,

 edit: function() {
 this.set('isEditing', true);

},

 doneEditing: function() {
 this.set('isEditing', false);

 var store = this.get('store');

 store.createRecord('person', {
  name: 'Rails is Omakase',
  file: 'Lorem ipsum'
  });
 // this.get('store').commit();
 // this.get('Person').save();
 }
});

My code in index.html goes here

  <html>
  <head>
  <meta charset="utf-8">
  <title>Ember Starter Kit</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
  </head>
  <body>

  <script type="text/x-handlebars" id="blogger">
    <h2>Here in Blogger</h2>
    </script>

    <script type="text/x-handlebars">
      <div class="navbar">
        <div class="navbar-inner">
         <ul class="nav">
          
            <li>{{#link-to 'persons'}}Person{{/link-to}}</li>
            <li>{{#link-to 'about'}}About{{/link-to}}</li>
          </ul>
        </div>
      </div>

      {{outlet}}
    </script>

   <script type="text/x-handlebars" id="persons">
      <div class="container-fluid">
        <div class="row-fluid">
          <div class="span3">
            <table class='table'>
              <thead>
                <tr><th>Recent Posts </th></tr>
              </thead>
               {{#each model}}
              <tr><td>
               {{#link-to 'data' this}} {{name}}{{/link-to}}
               {{file}}
              </td></tr>
              {{/each}}
            </table>
          </div>
          <div class="span9">
           {{outlet}}
          </div>
        </div>
      </div>
    </script>


  <script type="text/x-handlebars" id="data">
       {{#if isEditing}}
        {{partial 'data/edit'}}
        <button {{action 'doneEditing'}}>Done</button>
      {{else}}
        <button {{action 'edit'}}>Edit</button>
      {{/if}}

      <div class='below-the-fold'>
      <p></p>
        <p>{{name}}</p>
        <p>{{file}}</p>
      </div>
  </script>


   <script type="text/x-handlebars" id="data/_edit">
   
      <p>{{view Ember.TextField valueBinding = 'name'}}</p>
      <p>{{view Ember.TextField valueBinding = 'file'}}</p>
     
    </script>
    <script type="text/x-handlebars" id="posts/index">
      <p class="text-warning">Please select a post</p>
    </script>
   

  <script type="text/x-handlebars" id="about">
      <p>in about route</p>
    </script>

    <script src="js/libs/jquery-1.10.2.js"></script>
    <script src="js/libs/handlebars-1.1.2.js"></script>
    <script src="js/libs/ember-1.5.1.js"></script>
    <script src="js/bower_components/ember-data/ember-data.js"></script>
    <script src="js/app.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.1.0/moment.min.js"></script>
    <!-- to activate the test runner, add the "?test" query string parameter -->
    <script src="tests/runner.js"></script>

  </body>
  </html>

The Json format to send data is :

      	       {
			"persons": [{
				"id": 61,
				"name": "aaa",
				"file": "File_a"
			},
			{
				"id": 62,
				"name": "bbb",
				"file": "File_b"
			}]
		}

So,this is it,Please help thanks in advance

2

This is the old fashioned way, you should do:

model: function() {
    return this.store.find('person');
}

You’re doneEditing method should be like this:

var newRecord = store.createRecord('person', { ...});
newRecord.save();

Otherwise, I think there is a confusion in your code. If you create a new record it’s not an edition.

Apart from that, could you tell us what is happening when you try to save ? We need information about the error that you’re getting. And also, in my opinion this kind of questions should be addressed on StackOverflow even if asking here is fine :smile:

3

Hello sir, basically I am trying to save data to db,and I made changes as per your instructions ,but db is not affected .The Ember Inspector says :

Uncaught TypeError: Cannot read property 'createRecord' of undefined

what should I do?.

4

This error basically tells you that it cannot find the store when it does this.get('store'). If your controller is instantiated by Ember, it should have it so I guess that you manually instantiate the DataController. Am I right ?

5

Yes ,right now this is the state

		 App.DataController = Ember.ObjectController.extend({
		  isEditing: false,

		  edit: function() {
			this.set('isEditing', true);

		  },

		  doneEditing: function() {
			this.set('isEditing', false);
			var store =  store.createRecord('person', {
			name: 'Rails is Omakase',
			file: 'Lorem ipsum'
		  });
			store.save();
		  }
		});
6

The doneEditing method is wrong. Try this:

doneEditing: function() {
    this.set('isEditing', false);
    var record = this.get('store').createRecord('person', {
        name: 'Rails is Omakase',
        file: 'Lorem ipsum'
    });
    record.save();
}
7

I tried doing that too,but it didn’t work.I am saving data to database using PHP(Symfony2) code , I think when doneEditing is called the URL in ember is not hitting the URL in PHP . Ths cdoe in routing file is:

  test_saveData:
      pattern:  /test/ember/persons/{id}
      defaults: { _controller: TestDefaultDirTestBundle:Default:save }

and Action for this route is :

public function saveAction(Request $request)
    {
    	$em = $this->getDoctrine()->getEntityManager();
    	 
    	if ($request->isMethod('POST'))
    	{
    		$jsonData = $request->get('jsonData');
    		$serializer = $this->get('serializer');
    		$persons = $serializer->deserialize($jsonData, 'TestDefaultDir\TestBundle\WSClasses\Persons', 'json');
    
    		foreach ($persons->persons as $p)
    		{
    			$person = new Person();
    			$person->setName($p->name);
    			$person->setFile($p->file);
    			$em->persist($person);
    			$em->flush();
    		}
           		$em->flush();
    	}
    	
    }

is this correct,?