How to post data using Angular 2

Question

Data from add pop up must get saved here This is my add popup I am very new to Angular 2. I am unable to post the data.. It is giving error as "department_id,category_id,subcategories,times are missing". I am unable to fetch the data from the selected list.I am here by sharing my code please help. Here is my code of ts:

Component.ts file:

addTask(new_task,task) {
  console.log(new_task);
  task.department_id =  new_task.department_id, 
  task.category_id =  new_task.category_id, 
  task.client_id =  new_task.client_id, 
  task.project_id =  new_task.project_id
  this.currentTask = true;
  this.playTimer();
   this.newTask.hide();

                    this.ApiService
                      .addtimerEntries(new_task)
                      .subscribe(
                        entry  => {
                          this.entries = entry;
                          console.log(entry);
                         console.log(this.entries);
                          this.entries.map(function(entry) {
                            var total = 0;
                            entry.total = moment.utc(total).format("HH:mm");
                          })    
                        },
                        error => {
                           console.log(error);
                        }); 
                    }

Api service code:

        addtimerEntries(new_task){
var company_id = JSON.parse(localStorage.getItem('company_id'));
  var email = JSON.parse(localStorage.getItem('userEmail'));
  var start = JSON.parse(localStorage.getItem('start'));
  var date = JSON.parse(localStorage.getItem('date'));
  var department_id = JSON.parse(localStorage.getItem('department_id'));
  var category_id = JSON.parse(localStorage.getItem('category_id'));
  var subcategory_id = JSON.parse(localStorage.getItem('subcategory_id'));
  var option_id = JSON.parse(localStorage.getItem('option_id')); 

  var data = {
    workEmail:email,
    company_id:company_id,
    entry_type:"checkin_entry",
    department_id:new_task.department_id,
    category_id:new_task.category_id,
   "subcategories":[{
       subcategory_id:new_task.subcategory_id ,
           option:new_task.option_id
    }] ,
    "times": [{
            state:"start",
            date:"dd/mm/yyyy"
         }]  
  }
  return this.http.post(timerUrlBase + '/timerEntry' , data, options)
                  .map(this.extractData)
                  .catch(this.handleError);
}

My HTML part:

<div class="table-container">
                    <table class="tasks-table" md-row-select="selected">
                        <tbody>
                            <tr md-auto-select *ngFor="let tod of todays.today">
                                <td class="category-cell"> {{tod.department_id}} </td>
                                <td class="subcategory-cell"> {{tod.category_id}} </td>
                                <td class="client-cell"> {{tod.client_id}} </td>
                                <td class="project-cell"> {{tod.project_id}} </td>
                                <td class="duration-cell"> {{tod.total_hours}}</td>
                                <td class="icon-cell-one">
                                    <span mdTooltipPosition="above" mdTooltip="Press to restart task">
                                    <md-icon class="wd-reload-icon" svgIcon="refresh"></md-icon>
                                    </span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

console output:

Object {status: "success", data: Array(1)}
data:Array(1)
0:Object
category_id:Object
company_id:2
department_id:10
entry_type:"checkin_entry"
subcategories:Array(1)
times:Array(1)
workEmail:"[email protected]"
_id:"592bbd40325a5a0786f66137"
__proto__:Object
length:1
__proto__:Array(0)
status:"success"
__

Answer 1

From your error, you are missing department_id, category_id and subcategories

You don't have those values in localStorage check the chrome localStorage

You can check from browser,

Open console ==> Application ==> LocalStorage and check

Change your service to,

addtimerEntries(user){
    var company_id = JSON.parse(localStorage.getItem('company_id'));
    var email = JSON.parse(localStorage.getItem('userEmail'));
    var start = JSON.parse(localStorage.getItem('start'));
    var number = JSON.parse(localStorage.getItem('number'));
    var department_id = JSON.parse(localStorage.getItem('department_id')) || '';
    var category_id = JSON.parse(localStorage.getItem('category_id')) || '';
    var subcategories = JSON.parse(localStorage.getItem('subcategories')) || [];

    var data = {
        workEmail:email,
        company_id:company_id,
        entry_type:"checkin_entry",
        department_id:department_id,
        category_id:category_id,
        subcategories:subcategories
    }
    var times = {
        state:start,
        date:number
    }
    console.log(times);
    return this.http.post(timerUrlBase + '/timerEntry' , data, options)
                    .map(this.extractData)
                    .catch(this.handleError);
}

Watch the lines,

var department_id = JSON.parse(localStorage.getItem('department_id')) || '';
var category_id = JSON.parse(localStorage.getItem('category_id')) || '';
var subcategories = JSON.parse(localStorage.getItem('subcategories')) || [];

I have taken empty values, if the values are null